How to create a widget that stays alive on all screens? Like spotify's miniplayer

Question

I'm currently building a podcast app and what I want to implement is something similar to miniplayer in Spotify.

When user taps on a podcast and start listening, I want to open a miniplayer and make it alive across on all pages.

First thing come up to my mind is using Overlay widget or using a custom navigator for all of the pages and put that navigator inside a stack. I wonder if anyone implement something like this before or what's the best way to approach this.

Answer 1

Try this package with less effort, miniplayer

Stack(
  children: <Widget>[
    YourApp(),
    Miniplayer(
      minHeight: 70,
      maxHeight: 370,
      builder: (height, percentage) {
        return Center(
          child: Text('$height, $percentage'),
        );
      },
    ),
  ],
),