CODEWITHSUNDEEP
flutterflutter-layoutflutter-animation
Pasan Kamburugamuwa
Pasan Kamburugamuwa

Reputation: 89

Show Music Player On Bottom of Every View of flutter app

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.

enter image description here

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

Upvotes: 7

Views: 3966

Answers (2)

amit.flutter
amit.flutter

Reputation: 1141

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

enter image description here

Upvotes: 1

OroshiX
OroshiX

Reputation: 714

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

Upvotes: 3

Related Questions