I want to disable the Bottom Navigation Bar animation for selected item to get the same text/icon size of unselected items.
That's my code:
class BottomNavigationBarHome extends StatelessWidget {
#override
Widget build(BuildContext context) {
return BottomNavigationBar(
unselectedItemColor: Colors.black38,
backgroundColor: Colors.white,
items: [
BottomNavigationBarItem(
icon: Icon(BalanceIcon.scale_balance, size: 15.0),
title: Text('Item 1', style: TextStyle(
),)
),
BottomNavigationBarItem(
icon: Icon(BalanceIcon.scale_balance),
title: Text('Item 2')
),
BottomNavigationBarItem(
icon: Icon(BalanceIcon.scale_balance),
title: Text('Item 3')
),
]
);
}
}
I have already tried setting the same font size, the animation is still here
You can try add type to BottomNavigationBar
BottomNavigationBar(
type: BottomNavigationBarType.fixed,
...
)
The previous answers are correct but you need a combination of both, fixed type and defined font sizes:
BottomNavigationBar(
type: BottomNavigationBarType.fixed,
selectedFontSize: 12.0,
unselectedFontSize: 12.0,
...
)
BottomNavigationBarType.fixed prevents the items from moving horizontally and makes the labels of the unselected items visible.
selectedFontSize: 12.0, unselectedFontSize: 12.0 prevents the font size change when selecting an item that happens even if the type is fixed.
To re-add the gap between icon and label that disappears with this configuration, you can add a bottom padding to the icons in your BottomNavigationBarItem:
BottomNavigationBarItem(
icon: Padding(
padding: EdgeInsets.only(bottom: 2.5),
child: <your icon>,
),
label: <your title>,
),
Add selectedFontSize & unselectedFontSize in BottomNavigationBar and set the same font sizes
BottomNavigationBar(
selectedFontSize: 15.0,
unselectedFontSize: 15.0,
Related
Goal: I want to give the item label a specific font and color depending on if it is selected or not.
My approach: As the label cannot be styled directly, I'm using the properties "unselectedLabelStyle" and "selectedLabelStyle".
The Problem:
The properties work for font and fontweight, but I cannot directly control the text color
I can influence the label color of the selected item; but not with the "selectedLabelStyle" property, but with the color I specifiy under "seltectedItemColor".
"unselectedLabelStyle" also works for font and fontweight, but not for the color. I cannot find a property, that would allow me to change the color. > THIS IS THE PROBLEM
Pretty picture (code below):
The code:
BottomNavigationBar(
elevation: 0,
onTap: (index) => selectPage(index),
currentIndex: selectedPageIndex,
selectedItemColor:
Provider.of<CustomColors>(context).customColorScheme['Dark Teal'],
unselectedLabelStyle:
Provider.of<CustomTextStyle>(context, listen: false)
.customTextStyle('IconLabel'),
selectedLabelStyle:
Provider.of<CustomTextStyle>(context, listen: false)
.customTextStyle('IconLabel'),
backgroundColor: Colors.white,
type: BottomNavigationBarType.fixed,
items: [
//home
bottomNavIcon(
context: context,
icon: Image.asset(
"assets/icons/icon_home.png",
),
icon_active: Image.asset("assets/icons/icon_home.png",
color: Provider.of<CustomColors>(context)
.customColorScheme['Dark Teal']),
label: 'Home',
),
//favorite
bottomNavIcon(
context: context,
icon: Image.asset("assets/icons/icon_favorite.png"),
icon_active: Image.asset("assets/icons/icon_favorite.png",
color: Provider.of<CustomColors>(context)
.customColorScheme['Dark Teal']),
label: 'Favorite',
),
//loockback
bottomNavIcon(
context: context,
icon: Image.asset("assets/icons/icon_lookback.png"),
icon_active: Image.asset("assets/icons/icon_lookback.png",
color: Provider.of<CustomColors>(context)
.customColorScheme['Dark Teal']),
label: 'Lookback',
),
//info & support
bottomNavIcon(
context: context,
icon: Image.asset("assets/icons/icon_info.png"),
icon_active: Image.asset("assets/icons/icon_info.png",
color: Provider.of<CustomColors>(context)
.customColorScheme['Dark Teal']),
label: 'Info & Support',
),
],
),
Code for the icons
BottomNavigationBarItem bottomNavIcon(
{required BuildContext context,
required Image icon,
required Image icon_active,
required String label}) {
return BottomNavigationBarItem(
icon: Padding(
padding: EdgeInsets.only(top: 6.h, bottom: 3.h),
child: icon,
),
activeIcon: Padding(
padding: EdgeInsets.only(top: 6.h, bottom: 3.h),
child: icon_active,
),
label: label,
);
}
If you want the unselected items to have a certain color, use:
unselectedItemColor: Colors.red,
This will change the color of label and icon both for unselected items.
Example:
Unfortunately, unselectedLabelStyle property works for changing font weight, font size etc but not for color.
Also check this answer for unselectedLabelstyle don't work in Flutter
As the docmumentation say's, you can change the text color using the color property of TextStyle : https://api.flutter.dev/flutter/painting/TextStyle-class.html
Once this say's perharps BottomNavigationBar overide the color when setting selectedItemColor and/or unselectedItemColor
After giving a try, effectively color is overide even if you don't provide selectedItemColor and/or unselectedItemColor
I'm using SafeArea to display a bottom navigation bar :
SafeArea(
child: ScaffoldMessenger(
child: Scaffold(
body: _tabs[index],
bottomNavigationBar: BottomNavigationBar(
selectedItemColor: Theme.of(context).primaryColor,
unselectedItemColor: Colors.grey,
showUnselectedLabels: true,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.calendar_today), label: "Agenda"),
BottomNavigationBarItem(
icon: Icon(Icons.people), label: "Patients"),
BottomNavigationBarItem(
icon: Icon(Icons.account_balance_wallet), label: "Comptes"),
BottomNavigationBarItem(
icon: Icon(Icons.settings), label: "Réglages"),
],
currentIndex: index,
onTap: (i) => context.read(navigationIndexProvider).index = i,
),
),
),
);
When bookmarked on iphone desktop, the safe area does not prevent the notch from overlapping the bottom navbar.
Here is the result :
How to properly prevent notch from overlapping the bottom bar ?
In SAFEAREA widget there is an argument -bottom
Set this bottom either true or false.
SafeArea(
bottom:true,
child:ScaffoldMessanger()
)
I don't remember the correct one, you can check both and let us know which one works for you.
I think since you're using bottomNavigationBar, the SafeArea should not be wrapped around Scaffold. It should be wrapped by Scaffold like this:
Scaffold(
body: SafeArea(child:
_tabs[index] ...
I think you should only wrap Scaffold with SafeArea when you're not using any kind of bottomNavigationBar
I'm using the package feature_discovery at version ^0.12.1. In order to display the feature discovery overlay, I need to wrap the BottomNavigationBarItem with a DescribedFeatureOverlay. However the BottomNavigationBar's items require a list of type BottomNavigationBarItem:
Scaffold(
[...]
bottomNavigationBar: BottomAppBar(
[...]
child: BottomNavigationBar(
[...]
items: [
DescribedFeatureOverlay( // This does not work because items requires type BottomNavigationBarItem
[...]
child: BottomNavigationBarItem(
icon: Icon(item.icon),
label: item.title,
),
),
],
),
),
);
The valid code would be like this:
Scaffold(
[...]
bottomNavigationBar: BottomAppBar(
[...]
child: BottomNavigationBar(
[...]
items: [
BottomNavigationBarItem( // need to wrap this with DescribedFeatureOverlay
icon: Icon(item.icon),
label: item.title,
),
],
),
),
);
I've been trying for so long now to find a solution to this.
How can I wrap the BottomNavigationBarItem with the DescribedFeatureOverlay?
Is this a limitation of Flutter or is there a way of doing this?
Do I need to copy, extend and modify the BottomNavigationBar class and use that one in order to achieve this?
As workaround you can wrap icon widget of BottomNavigationBarItem
like that
BottomNavigationBarItem(
icon: DescribedFeatureOverlay(
featureId: item.featureId,
title: Text(item.title),
description: Text(item.description),
backgroundColor: item.color,
tapTarget: Icon(item.icon),
child: Icon(item.icon),
),
label: item.title,
);
I'm making a simple Flutter app with a BottomNavigationBar and the label in my BottomNavigationBarItem exceeds the ink effect created when I tap on it . For some reason, it seems to be covering the icon only and not the label as well.
How can I change this behavior to accommodate the label as well? I would also prefer to have a more rectangular shape for the ink reaction.
Edit:
My code for the navigation bar
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
selectedItemColor: Colors.blue[900],
unselectedItemColor: Colors.black87,
onTap: onTabTapped,
showUnselectedLabels: true,
currentIndex: _currentIndex,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.collections),
title: Text('Collections'),
),
BottomNavigationBarItem(
icon: Icon(Icons.phone),
title: Text('Recent'),
),
BottomNavigationBarItem(
icon: Icon(Icons.more_horiz),
title: Text('More'),
),
],
),
Current Behavior
Expected Behavior
After a few tries I figured that changing splashFactory could do the trick.
MaterialApp(
theme: ThemeData(
splashFactory: InkRipple.splashFactory,
),
)
After fiddling around with the flutter standard library, I now realised that BottomNavigationBarItem isn't a widget, but a container class to encapsulate the information that BottomNavigationBar need for its items.
Unfortunately, you will need to override BottomNavigationBar and create your own CustomBottomNavigationBar to do what you want.
The good news is that this is incredibly easy, since you only have to change one line of code. :)
I copied the code from $FLUTTER_HOME/packages/flutter/lib/src/material/bottom_navigation_bar.dart and made only one adjustment: at line 480, I changed InkResponse to InkWell and now it works as you wished.
With InkResponse:
With InkWell:
I suggest you to create an override folder in your project with the overridden classes, this is how I do it (I have overridden the default bottom sheet class):
Then, you can just import your overridden classes like this:
import 'package:your_project/widgets/override/bottom_navigation_bar.dart' as BottomNavigationBarOverride;
And use it like so:
bottomNavigationBar: BottomNavigationBarOverride.BottomNavigationBar(
type: BottomNavigationBarType.fixed,
selectedItemColor: Colors.blue[900],
unselectedItemColor: Colors.black87,
onTap: onTabTapped,
showUnselectedLabels: true,
currentIndex: _currentIndex,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.collections),
title: Text('Collections'),
),
BottomNavigationBarItem(
icon: Icon(Icons.phone),
title: Text('Recent'),
),
BottomNavigationBarItem(
icon: Icon(Icons.more_horiz),
title: Text('More'),
),
],
),
Old response
If you provide more code, I could help you out more.
Judging by the picture that you provided, this is intended behavior as bottom navigation itens aren't intended to be large. They are intend to be swift and clean as the material spec suggests:
If you intend to make only one "option", I suggest that you change your widget to a FlatButton. But be warned, this is against the spec as, for usability purposes, bottom navigation itens should contain at least 3 options and at max 5 options.
I am trying to create an effect on the Bottom Navigation Bar such as that of Google Drive. I want the title of the item only to be displayed, on the selected item, and the others to only display the icons.
Also, this bottom bar becomes somewhat transparent, so you can barely see what's under it. Is this possible to do in flutter? I know it is not possible on the main app bar, since there is an issue talking about it here
image for reference
Hide Title of Unselected BottomNavigationBarItem
You just need to set the show unselected labels property of the bottom navigation bar to false
showUnselectedLabels: false,
Transparent BottomNavigation bar
The Scaffold provides placeholders for both Appbar and BottomNavigation bars. This is how they are placed.
The problem here is that the body does not overlap the Appbar or the BottomNavigation bar, and thus even if you give transparent background it would appear to do nothing.
A workaround would be to put the Body, AppBar and BottomNavigationBar inside a stack and position the AppBar and BottomNavigationBar appropriately.
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Container(
color: Colors.green, // Content of body here
),
Positioned(
left: 0,
right: 0,
top: 0,
child: AppBar(
elevation: 0,
backgroundColor: Colors.indigo.withAlpha(80),
title: Text('Some Text'),
),
),
Positioned(
left: 0,
right: 0,
bottom: 0,
child: BottomNavigationBar(
elevation: 0,
showUnselectedLabels: false,
backgroundColor: Colors.red.withAlpha(80),
items: [
BottomNavigationBarItem(
title: Text('A'),
icon: Icon(Icons.add),
),
BottomNavigationBarItem(
title: Text('B'),
icon: Icon(Icons.remove),
),
],
),
),
],
),
);
}
}
U should use this code :
bottomNavigationBar: BottomNavigationBar(
//use both properties
type: BottomNavigationBarType.fixed,
showUnselectedLabels: true,
//-----------
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.icon1),
label:'item 1',
),
BottomNavigationBarItem(
icon: Icon(Icons.icon2),
label: 'item 2',
),
],
)