Show Music Player On Bottom of Every View of flutter app

Question

I am new to flutter and I need to know, how can I show the music player on every view of the flutter app. Can you please guide me to do that, as I am using the bottom sheet in a flutter, and seems like it's not fit my purpose.

Here I need to add only the bottom widget which showing the music playing.

user_2589983 · Answer

One possibility would be to use a bottomNavigationBar in your global Scaffold.

And in your body, you will have to create a new navigation stack in order for the navigation to change only the body (not replacing the whole Scaffold).

It would look like this:

class MusicApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: PlayerBottomBar(), // this is where you put your player bar
      body: Navigator(
        onGenerateRoute: (settings) {
          return MaterialPageRoute(
            builder: (context) {
              // todo return a screen... ,
            },
            settings: settings,
          );
        },
      ),
    );
  }
}

user_13078639 · Answer

Try this one I have used in my music app. one of the most straightforward solutions is to wrap widgets in columns in the bottom bar of the app at the root level.

return Scaffold(
    body: tabs[currentTabIndex],
    backgroundColor: ColorConstants.kBackGround,
    bottomNavigationBar: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          margin: const EdgeInsets.all(10),
          width: 100.w,
          height: 60,
          alignment: Alignment.center,
          color: Colors.black38,
          child: Text(
            "Mini Player",
            style: Theme.of(context).textTheme.headline3,
          ),
        ),
        BottomNavigationBar(
          currentIndex: currentTabIndex,
          elevation: 0,
          onTap: (currentIndex) => setState(() {
            currentTabIndex = currentIndex;
          }),
          selectedLabelStyle: const TextStyle(color: Colors.white),
          selectedItemColor: ColorConstants.kDarkFontColor,
          backgroundColor: ColorConstants.kBackGround,
          showSelectedLabels: false,
          showUnselectedLabels: false,
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: ""),
            BottomNavigationBarItem(icon: Icon(Icons.search), label: ""),
            BottomNavigationBarItem(icon: Icon(Icons.library_books), label: "")
          ],
        )
      ],
    ),
  );

also you can checkout this video for the open and close mini player when the song start youtube

Show Music Player On Bottom of Every View of flutter app

2 Answers