How can I create a shared scaffold widget for a podcast app using the just audio package in Flutter?

Question

I am currently building a podcast app using Flutter and the just-audio package. I would like to have a scaffold widget that is shared across all pages of the app and updates its state based on the audio playback. How can I achieve this functionality?

import 'package:flutter/material.dart';
import 'Router/router_config.dart';

void main() {
    runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    const MyApp({Key? key});

    @override
    Widget build(BuildContext context) {
        return MaterialApp.router(
            routerConfig: Myrouter.router,
            debugShowCheckedModeBanner: false,
            title: 'Podcast App',
            theme: ThemeData(
               primarySwatch: Colors.blueGrey,
            ),
        );
    }
}

Here's what I have in mind:

1.The shared scaffold widget should include a bottom player bar with controls for play/pause, progress bar, and track information.

2.It should update dynamically based on the state of the audio playback, such as displaying the current track's title, and progress in real-time.

3.The widget should be accessible from any page of the app, allowing users to interact with the player controls seamlessly.

I have explored the just audio package for handling audio playback, but I am unsure how to approach the implementation of this shared scaffold widget that communicates with the audio package's state. Are there any best practices or recommended approaches for achieving this in Flutter?

Any guidance, code snippets, or sample projects would be highly appreciated. Thank you!