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

user_9779791 0
Viewed 655

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.

spotify miniplayer

flutter
4 Answers

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'),
        );
      },
    ),
  ],
),
user_112764160

I would recommend using this with a Stack. Maybe something like this:

class PodcastApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Expanded(
            child: Stack(
              children: [
                SizedBox.expand(child: PageView()),
                Align(
                  alignment: Alignment.bottomCenter,
                  child: YOUR_MINI_PLAYER(),
                )
              ],
            ),
          ),
          BottomNavigationBar(),
        ],
      ),
    );
  }
}
user_126248910

I did the same thing but not for an audio player, where was that

First, build a BasePage that contains all of these tabs

Secondly, use GetIt to transfer the object from one page to another. The goal is to find out if the user played an audio clip or not.

Third You can store in GetIt the audio track, name, picture, ..etc.

In BasePage, you check if this object has been modified or if it is empty. The goal of viewing in BasePage is for it to be visible in all sections of the tab.

Do not hesitate to ask me if something is not clear.

user_83065700

Check out this persistent_bottom_nav_bar package

Features of this package

  1. Highly customizable persistent bottom navigation bar.
  2. Ability to push new screens with or without the bottom navigation bar.
  3. 20 styles for the bottom navigation bar.
  4. Includes functions for pushing screen with or without the bottom navigation bar i.e. pushNewScreen() and pushNewScreenWithRouteSettings().
  5. Based on flutter's Cupertino(iOS) bottom navigation bar.
  6. Can be translucent for a particular tab.
  7. Custom styling for the navigation bar. Click here for more information.
  8. Handles hardware/software Android back button.

I hope this is what you are looking for.

user_80975190
Related