Related
Sorry if this sounds a bit obvious but this framework is still fairly unknown to me but I have created a bunch of other pages in my app (saved as .dart files) and also have created paths to them through the use of a drawer. I now have have a bottomNavigationBar that has 5 tabs. I want to be able to route to my previously created page using the tabs. I am currently using the defaultTabController.
bottomNavigationBar: Container(
color: Colors.grey[200],
child: Container(
margin: EdgeInsets.symmetric(vertical: 16),
child: TabBar(
isScrollable: true
labelColor: Colors.black,
labelPadding: EdgeInsets.fromLTRB(21, 0, 21, 16),
unselectedLabelColor: Colors.black45,
indicatorColor: Colors.orange,
indicatorPadding: EdgeInsets.fromLTRB(21, 0, 21, 16),
labelStyle: TextStyle(
fontSize: 16, fontWeight: FontWeight.bold
),
tabs: <Tab>[
new Tab(
text: "Home",
),
new Tab(
text: "Page 1",
),
new Tab(
text: "Page 2",
),
new Tab(
text: "Page 3",
),
new Tab(
text: "Page 4",
),
],
),
),
),
For example, when someone clicks on the "Page 1" tab, I want to be able to route the user to my "page1.dart" file. Thanks in advance!
You do not need TabBar if you're using bottomNavigationBar. You can implement bottomNavigationBar by code below.
int currentIndex = 0;
List<Widget> children = [
Home();
Page1();
];
onTapped(int index){
setState(() {
currentIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
onTap: onTapped,
currentIndex: currentIndex,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(icon: Icon(Icons.add), title: Text('Page 1'))
]),
body: children[currentIndex]);
}
currentIndex will keep the record of the current opened tab. children is the List of pages you want to route in body. onTapped will change currentIndex to index of Navigation Bar.
I am trying to show a menu when a navigation bar item is clicked. This was my attempt:
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: MyAppBar(
title: "Home",
context: context,
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: new Icon(Icons.book), title: Text('Second')),
BottomNavigationBarItem(
icon: new PopupMenuButton(
icon: Icon(Icons.add),
itemBuilder: (_) => <PopupMenuItem<String>>[
new PopupMenuItem<String>(
child: const Text('test1'), value: 'test1'),
new PopupMenuItem<String>(
child: const Text('test2'), value: 'test2'),
],
),
title: Text('more')),
],
currentIndex: 0,
),
body: new Container()));
}
I encountered two problems. First one is the display of the NavigationBarItem. There is a padding between the icon the title that I could not remove (even by adding padding: EdgeInsets.all(0.0)) (as the picture below shows). And the second is that I need to click exactly on the icon for the menu to appear.
I tried calling showMenu directly (the method that PopupMenuButton calls) when a BottomNavigationBarItem of index=2 (for example) is clicked. But it was tricky how to determine the location of origin where the menu should appear from.
Here's an attempt that uses the showMenu directly and calling the function buttonMenuPosition to get the position for the menu. It's fairly fragile, but you can change the location of the button to the middle for example with bar.size.center instead of bar.size.bottomRight. With some MATH and by manually manipulating Offset objects (if/when you have more than 3 items), you can change the location to have the menu on one that isn't the center or at the end).
RelativeRect buttonMenuPosition(BuildContext c) {
final RenderBox bar = c.findRenderObject();
final RenderBox overlay = Overlay.of(c).context.findRenderObject();
final RelativeRect position = RelativeRect.fromRect(
Rect.fromPoints(
bar.localToGlobal(bar.size.bottomRight(Offset.zero), ancestor: overlay),
bar.localToGlobal(bar.size.bottomRight(Offset.zero), ancestor: overlay),
),
Offset.zero & overlay.size,
);
return position;
}
#override
Widget build(BuildContext context) {
final key = GlobalKey<State<BottomNavigationBar>>();
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text("Home"),
),
bottomNavigationBar: BottomNavigationBar(
key: key,
items: [
const BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text('Home')),
const BottomNavigationBarItem(
icon: Icon(Icons.book), title: Text('Second')),
const BottomNavigationBarItem(
icon: Icon(Icons.add), title: Text('more')),
],
currentIndex: 0,
onTap: (index) async {
final position = buttonMenuPosition(key.currentContext);
if (index == 2) {
final result = await showMenu(
context: context,
position: position,
items: <PopupMenuItem<String>>[
const PopupMenuItem<String>(
child: Text('test1'), value: 'test1'),
const PopupMenuItem<String>(
child: Text('test2'), value: 'test2'),
],
);
}
},
),
body: Container()));
}
Here's my attempt at it:
#override
Widget build(BuildContext context) {
return Material(
child: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text("Home"),
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: new Icon(Icons.book), title: Text('Second')),
BottomNavigationBarItem(
icon: new Icon(Icons.add),
title: Text('More')),
],
currentIndex: 0,
onTap: (int index) async {
if(index == 2){
await showMenu<String>(
context: context,
position: RelativeRect.fromLTRB(1000.0, 1000.0, 0.0, 0.0),
items: <PopupMenuItem<String>>[
new PopupMenuItem<String>(
child: const Text('test1'), value: 'test1'),
new PopupMenuItem<String>(
child: const Text('test2'), value: 'test2'),
],
elevation: 8.0,
);
}
},
),
body: new Container())));
}
Basically using the showMenu method as you said except I've put the values for the RelativeRect as 1000.0 so that it'll be in the bottom right of any device. You could mess around with these values to get a position more right above the icon but I think having it like this works well:
I've inserted custom icons into my application and when I run the app, the icons and text are white, instead of the original color.
Two Problems:
1)The Icons are originally black but when I insert it to my Bottom Nav Items they become white.
2)Also only the first item has a tittle beneath the icon the rest doesn't.
This is my code
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(const IconData(0xe903, fontFamily: 'navBar')),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(const IconData(0xe902, fontFamily: 'navBar')),
title: Text('Ideas')
),
BottomNavigationBarItem(
icon: Icon(const IconData(0xe903, fontFamily: 'navBar')),
title: Text('Profile')
),
BottomNavigationBarItem(
icon: Icon(const IconData(0xe901, fontFamily: 'navBar')),
title: Text('Bag')
),
],
),
//pubspec.yaml file
fonts:
- family: navBar
fonts:
- asset: assets/fonts/ic_navbar.ttf
The 4 icons
You need to add a type for your ButtomNavigationBar
bottomNavigationBar: BottomNavigationBar(
//Add this line will fix the issue.
type: BottomNavigationBarType.fixed,
currentIndex: 0, // this will be set when a new tab is tapped
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: new Icon(const IconData(0xe903, fontFamily: 'navBar')),
title: new Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(const IconData(0xe902, fontFamily: 'navBar')),
title: new Text('Messages'),
),
BottomNavigationBarItem(
icon: Icon(const IconData(0xe903, fontFamily: 'navBar')),
title: Text('Profile'),
),
BottomNavigationBarItem(
icon: Icon(const IconData(0xe901, fontFamily: 'navBar')),
title: Text('Bag')
),
],
),
You can use the following code to change the icon color in bottom navigation bar
BottomNavigationBarItem(
icon:IconTheme(child: Icon(Icons.date_range),
data:IconThemeData(color:Colors.yellow)),
title:Text('Schedule')
)
Though it is a rather old thread I wanted to share a finding regarding this topic because I was in the same situation. According to flutter documentation it is expected behavior that item colors default is white if there are more than 3 items in the bottomnavigationbar and there is no selectedItemColor.
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.
Flutter Api reference
try the icons that come in the material icons, https://docs.flutter.io/flutter/material/Icons-class.html to make a kind of debug, if the error continues the error is in another side, can you send all the code and send the assets you use?enter image description here
so i have this flutter app, and i'm trying to hide or remove the title. I tried leaving the title as an empty string i.e. new Text("") but that messed with the alignment of the navbar.
Desired Outcome:
What i'm getting (if i leave the title as empty string):
:
There are two workarounds for this problem, as this feature is not yet implemented.
Pass Container(height: 0.0) instead of Text("")
Create widget and use it instead of Flutter's bottom navigation. Source.
Update:
Just add this to your BottomNavigationBar
showSelectedLabels: false,
showUnselectedLabels: false,
Now you can simply disable labels for selected or unselected items:
bottomNavigationBar: BottomNavigationBar(
showSelectedLabels: false, // <-- HERE
showUnselectedLabels: false, // <-- AND HERE
items: [
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text('Personal')
),
BottomNavigationBarItem(
icon: Icon(Icons.notifications),
title: Text('Notifications'),
),
]
...
)
...resulting in:
Hopefully, this snippet helps someone. It worked well for me.
bottomNavigationBar : new BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icons.search,
title: Padding(padding: EdgeInsets.all(0))
),
BottomNavigationBarItem(
icon: Icons.share,
title: Padding(padding: EdgeInsets.all(0))
),
BottomNavigationBarItem(
icon: Icons.call,
title: Padding(padding: EdgeInsets.all(0))
)],
type: BottomNavigationBarType.fixed
)
//bottomNavBar
In the new version of flutter, the title is depreciated, and we must provide the label.
So, make the label an empty string
BottomNavigationBarItem(
label: '',
icon: Icon(
Icons.home_rounded,
color: kHintColor,
size: 35,
),
activeIcon: Icon(
Icons.home_rounded,
color: kMainColor,
size: 35,
),
),
and add the following to the BottomNavigationBar:
selectedLabelStyle: TextStyle(fontSize: 0),
unselectedLabelStyle: TextStyle(fontSize: 0),
As of now, this feature is not implement. For a BottomNavigationBarItem, title is a required field
But you can build a new widget for this.
Try this :
Column buildButtonColumn(IconData icon) {
Color color = Theme.of(context).primaryColor;
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(icon, color: color),
],
);
}
Widget buttonSection = Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
buildButtonColumn(Icons.call),
buildButtonColumn(Icons.near_me),
buildButtonColumn(Icons.share),
],
),
);
I have tried this approach and it works like charm:
BottomNavigationBarItem(
icon: Icon(
Icons.home,
size: 40,
),
title: Text(
"",
style: TextStyle(fontSize: 0),
),
)
Use BottomAppBar to achieve this BottomNavigationBarItem without label. You could further customize it.
#override
Widget build(BuildContext context) {
return Scaffold(
body: body,
bottomNavigationBar: new BottomAppBar(
child: new Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(
icon: Icon(Icons.home),
disabledColor: Colors.green,
onPressed: _currentIndex == 0
? null
: () => setState(() => _currentIndex = 0)),
IconButton(
icon: Icon(Icons.notifications),
disabledColor: Colors.green,
onPressed: _currentIndex == 1
? null
: () => setState(() => _currentIndex = 1)),
IconButton(
icon: Icon(Icons.settings),
disabledColor: Colors.green,
onPressed: _currentIndex == 2
? null
: () => setState(() => _currentIndex = 2)),
],
)
),
);
}
Hope it really helps.
It worked well for me.
BottomNavigationBarItem(
icon: Icon(
Icons.home,
),
title: SizedBox.shrink(),
)
title: Container(height: 0.0)
will give you some extra padding below.
You can use
title: Text(
'',
style: TextStyle(fontWeight: FontWeight.bold, height: 0.0),
)
One can use bottom navigation bar type to shifting.
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.shifting,
items: [
BottomNavigationBarItem(icon: Icon(Icons.star, color: Colors.red,), title: Text("")),
BottomNavigationBarItem(icon: Icon(Icons.star, color: Colors.red,), title: Text(""))
]
),
To display icons without any labels, below step worked for me:
Set selectedFontSize: 0 and set label to empty string. For example,
BottomNavigationBar(
selectedFontSize: 0,
items: BottomNavigationBarItem(
icon: Icons.search
label: '',
),
)
I am trying to change the selected color of a BottomNavigation icon but all I seem to be achieving is changing the text colours. Please assist:
Currently the text color changes to yellow when selected but the icon stays white, I want it to be yellow too and I have tried setting the icon color of the inactive icons to grey like the caption but it's not budging.
Here is my code:
new Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.black,
splashColor: Colors.yellowAccent,
unselectedWidgetColor: Colors.green,
primaryColor: Colors.red,
textTheme: Theme.of(context).textTheme.copyWith(caption: new TextStyle(color: Colors.grey))
),
child: new BottomNavigationBar(
items: <BottomNavigationBarItem>[
new BottomNavigationBarItem(
icon: const Icon(Icons.add_shopping_cart, color: Colors.white,),
title: new Text("Services"),
),
new BottomNavigationBarItem(
icon: new Theme(
data: new ThemeData(
),
child: const Icon(Icons.calendar_today, color: Colors.white,)),
title: new Text("Appointment")
),
new BottomNavigationBarItem(
icon: const Icon(Icons.face, color: Colors.white,),
title: new Text("Profile")
)
],
currentIndex: index,
onTap: (int i){setState((){index = i;});},
fixedColor: Colors.yellowAccent,
type: BottomNavigationBarType.fixed,
),
)
Don't declare the color of icon inside BottomNavigationBarItem.
You should declare it inside BottomNavigationBar as unselectedItemColor and selectedItemColor.
bottomNavigationBar:
BottomNavigationBar(
unselectedItemColor: Colors.green,
selectedItemColor: Colors.yellow,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.add_shopping_cart),
),
],
);
By doing so, your code will work.
You've explicitly set color: Colors.white for each of the icons, so they will be white until you set them otherwise.
You have a couple of options:
1) Set your BottomNavigationBar's type to type: BottomNavigationBarType.fixed and set fixedColor: Colors.orange or whatever color you want. Note that you'll have to remove your color: Colors.white or they will still be white.
2) You could test for the right index being set and then decide which color to set the icon to directly, i.e. color = index == 0 ? selectedColor : unselectedColor for the first item, index==1 for the second, and item==2 for the third.
3) A slight alternative would be to set an IconTheme with color=unselectedColor around the entire BottomNavigationBar, then only set the selected item with color = index == 0 ? selectedColor : null.
I'd recommend reading the BottomNavigationBar documentation, particularly the part about fixed vs shifting, as it describes the answer to the exact problem you're having.
This how you could set the color of the icon:
bottomNavigationBar: BottomNavigationBar(
selectedIconTheme: IconThemeData(color: Colors.yellow),
unselectedIconTheme: IconThemeData(color: Colors.white),