Show Music Player On Bottom of Every View of flutter app - flutter

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.

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

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

Related

how to do page switching and active bottom navigation at the same time?

#overrideWidget build(BuildContext context) {
final PageController controller = PageController();
return Scaffold(
body: SafeArea(
child: PageView(
controller: controller,
children: const [
Center(
child: Text("Page 0"),
),
Center(
child: Text("Page 1"),
)
],
),
),
bottomNavigationBar: BlocListener<MenuBloc, MenuState>(
listener: (context, state) {
controller.jumpToPage(state.index);
},
child: BlocBuilder<MenuBloc, MenuState>(
builder: (context, state) {
return BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: const Icon(Icons.explore),
label: state.index.toString(),
),
BottomNavigationBarItem(
icon: const Icon(Icons.apps),
label: state.index.toString(),
),
],
onTap: (index) =>
context.read<MenuBloc>().add(MenuSwitch(state.index)),
selectedItemColor: Colors.black,
);
},
),
),
);
}
i want both? how to make it work properly when the selected item is active and changing pages?
Blockquote
how to do page switching and active bottom navigation at the same time?
It's Worked, With A Little Observation I finally realized it returns index doesn't need state anymore :)

How to keep navigation bar when push to subpages and back to main page?

screentshot
In my app there are some features in home page,what I want is when direct to their sub pages and still keep the buttom navigation bar.
Code for navigation bar Below the answer
Code for parts of home page
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold( resizeToAvoidBottomInset:false,
body: SlidingUpPanel(
body: Center(
child:Container(
constraints: BoxConstraints.expand(),
margin: const EdgeInsets.only(top:23),
child: Column(
children: [
.....
Container(
width: 730,
height: 190,
alignment:Alignment.center,
child:Wrap(
children: <Widget>[
//...otherFiveFeatures...//
OutlinedButton(
onPressed:()async{
var nav = await Navigator.of(context).pushNamed('/routerMobileScannerPage');
if(nav==true||nav==null)
{Navigator.of(context).pushNamedAndRemoveUntil('/routerHomePage',(Route<dynamic>route)=>false);
}
},
),
],
),
)
],
),
),
),
collapsed: Container(),
panel: Center(),
),
)
);
}
To achieve this, you need to manage multiple widgets for a single selection index. For example, from Home Screen you want to navigate to Details screen keeping the Home tab selected, you need to manage a flag for that selection. Something like this.
Code to get widget based on selection
Widget _getBodyWidget() {
switch (currentIndex) {
case 0:
return shouldShowDetails ? DetailsView() : HomeView();
case 1:
return CategoriesView();
default:
return HomeView();
}
}
In the code above, there is a flag shouldShowDetails which will be assigned as true when user taps on the Details button. When user wants to come to HomeScreen, change to false.
For such scenarios, I would suggest you to use the Provider plugin. It provides us an easy way to update the widget state based on such flags.
Code for buttom navigation bar
class PageCTRLWidget extends State<statePageCTRLWidget> with AutomaticKeepAliveClientMixin{
#override
bool get wantKeepAlive => true;
int currentIndex=0;
final screens=[
stateHomePageWidget(),
Center(child: Text('Categories',style: TextStyle(fontSize: 45),),),
Center(child: Text('Assistant',style: TextStyle(fontSize: 45),),),
stateMemberPageWidget()
];
#override
Widget build(BuildContext context) {
return Scaffold(
body: IndexedStack(
index: currentIndex,
children: screens,
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
selectedItemColor: Colors.orange,
currentIndex: currentIndex,
onTap:(tappedIndex)=>setState(()=>currentIndex=tappedIndex),
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.menu_book_rounded),
label: 'Categories',
),
BottomNavigationBarItem(
icon: Icon(Icons.add_location_alt_rounded),
label: 'Assistant',
),
BottomNavigationBarItem(
icon: Icon(Icons.account_box_rounded),
label: 'Member',
)
],
),
);
}
}

Is it possible to use BottomNavigatorBar without to use Scaffold`s Body

There are plenty Bottom Navigator Bar tutorial in internet but almost all of them suggesting to put the Navigate method into Scaffold's body.
Here is my final Navigate and it works if I put into Scaffold's body:
showPage(_selectedIndex)
but the problem is I am using on same page Tabbar and BottomNavigatorBar together. Here is the current situation (Scaffold's body)
body: TabBarView(
children: [
for (final tab in filteredList)
NewsView(
id: tab.id!,
),
],
),
unfortunately I could not find a way to put or integrate showPage(_selectedIndex)
P.S. the tabs generating dynamically from JSON.
The Scaffold Widget has a ButtonNavigationBar property besides de body. If it’s about navigation you can definitely add a button and pass the reference to the Class or Page you want to navigate to in its ‘onPressed () {}’ property. This is an example from the official documentation:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Sample Code'),
),
body: Center(
child: Text('You have pressed the button $_count times.'),
),
bottomNavigationBar: BottomAppBar(
shape: const CircularNotchedRectangle(),
child: Container(height: 50.0),
),
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() {
_count++;
}),
tooltip: 'Increment Counter',
child: const Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
Here’s the link https://api.flutter.dev/flutter/material/Scaffold-class.html
the final solution:
body: Center(
child: _selectedIndex != 0
? showPage(_selectedIndex)
: TabBarView(
children: [
for (final tab in filteredList)
NewsView(
id: tab.id!,
),
],
),
),

how can I achieve a bottom navigation bar with these features?

There are five navigation items in total and the widths are 154,153,154,153,154. I know it's kind of strange but the UI design is like this. As for this I guess I cannot use any Widget about navigator in the flutter lib.
Each item contains an icon and a text as usual but the distance between the two should be set exactly. I don't know if it can be set in flutter widget bottomNavigatorBar.
Commonly, the color of the icon, text and the background will change when selected.
What I have done: I created a widget and add it to the bottom of every pages. As you can imagine, when jumping to a new page, the navigation bar will re-render. That is not the same as we use in our mobile phones.
I have found some articles and blogs, but still can't solve my problem. Is there any reference?
You can use the below code and redirect this page into main.dart and can use test and icon also.
class nav extends StatefulWidget {
#override
_navState createState() => _navState();
}
class _navState extends State<nav> {
int tabIndex = 0;
List<Widget> listScreens;
#override
void initState() {
ScreenUtil.init(width: 375, height: 812);
super.initState();
listScreens = [
Home(),
Treatments(),
Request(),
Appointments(),
Menu(),
];
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: listScreens[tabIndex],
bottomNavigationBar: new Theme(
data: Theme.of(context).copyWith(
canvasColor: Color(0xFF320151),
primaryColor: Color(0xFF320151)),
child: BottomNavigationBar(
backgroundColor: Color(0xFF38095c),
selectedItemColor: Color(0xFFe34fd1),
unselectedItemColor: Color(0xFF510382),
currentIndex: tabIndex,
onTap: (int index) {
setState(() {
tabIndex = index;
});
},
items: [
BottomNavigationBarItem(
title: Text(""),
icon: Container(
width: 154, child: Center(child: Icon(AntDesign.home))),
),
BottomNavigationBarItem(
title: Text(""),
icon: Container(
width: 153,
child: Center(
child: Icon(MaterialCommunityIcons.medical_bag))),
),
BottomNavigationBarItem(
title: Text(""),
icon: Container(
width: 154,
child: Center(child: Icon(Fontisto.share_a))),
),
BottomNavigationBarItem(
title: Text(""),
icon: Container(
width: 153,
child: Center(child: Icon(AntDesign.calendar))),
),
BottomNavigationBarItem(
title: Text(""),
icon: Container(
width: 154,
child: Center(child: Icon(Ionicons.ios_person))),
),
]),
)),
);
}
}

How to perfectly align bottom navigation item with docked fab?

I am new in flutter. I am trying to create a main screen where there is bottom bar with floating action button(FAB). The fab is docked at the center of bottom app bar. Meanwhile, the bottom app bar has 4 bottom navigation items. Currently all the items are not perfectly aligned with each other. The search and notification icons are too close to the center. Is there a way i can arrange it to make it better and perfectly aligned? Please help. Thank you
Current ui:
The code:
import 'package:flutter/material.dart';
class Dashboard extends StatefulWidget {
_DashboardState createState() => _DashboardState();
}
class _DashboardState extends State<Dashboard> {
int _selectedPage = 0;
final _pageOptions = [
Home(),
Discover(),
Notifications(),
Messages(),
];
Widget build(BuildContext context) {
final _drawerNav = Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(color: colorPrimary),
),
ListTile(
title: Text('Item 1'),
onTap: () {},
),
Divider(),
ListTile(
title: Text('Item 2'),
onTap: () {},
),
Divider(),
],
),
);
final _bottomNav = BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 6,
clipBehavior: Clip.antiAlias,
child: BottomNavigationBar(
selectedItemColor: colorPrimary,
unselectedItemColor: Colors.grey,
currentIndex: _selectedPage,
onTap: (int index) {
setState(() {
_selectedPage = index;
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Container(height: 8.0)),
BottomNavigationBarItem(
icon: Icon(Icons.search), title: Container(height: 8.0)),
BottomNavigationBarItem(
icon: Icon(Icons.notifications), title: Container(height: 8.0)),
BottomNavigationBarItem(
icon: Icon(Icons.message), title: Container(height: 8.0)),
],
),
);
final _fab = FloatingActionButton(
child: Icon(Icons.add),
backgroundColor: colorPrimary,
onPressed: () {},
);
return Scaffold(
appBar: AppBar(
title: Text('Test'),
backgroundColor: colorPrimary,
),
drawer: _drawerNav,
body: _pageOptions[_selectedPage],
floatingActionButton: _fab,
bottomNavigationBar: _bottomNav,
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
}
I made a quick and dirty fix
I made the bottom navigation bar using row. Instead of using 4 children, I use 5. One of them is a dummy child
https://gist.github.com/hariangr/2739c25dda72edcbc18073b907ef057a
Try setting type in BottomNavigationBar to BottomNavigationBarType.fixed
The bottom navigation bar's type changes how its items are displayed. If not specified, then it's automatically set to BottomNavigationBarType.fixed when there are less than four items, and BottomNavigationBarType.shifting otherwise.
BottomNavigationBarType.fixed, the default when there are less than four items. The selected item is rendered with the selectedItemColor if it's non-null, otherwise the theme's ThemeData.primaryColor is used. If backgroundColor is null, The navigation bar's background color defaults to the Material background color, ThemeData.canvasColor (essentially opaque white).
BottomNavigationBarType.shifting, the default when there are four or more items. If selectedItemColor is null, all items are rendered in white. The navigation bar's background color is the same as the BottomNavigationBarItem.backgroundColor of the selected item. In this case it's assumed that each item will have a different background color and that background color will contrast well with white.