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),
Related
I have used the Expansion Tile to generate a Expansion List View.
I'm facing some customization issues in Expansion Tile Header.
Below is my code.
ExpansionTile(
title: Container(
child: Text(
getCategory(i),
style: TextStyle(
color: Colors.white,
),
),
color: Colors.black
),
children: <Widget>[
new Container(
height: 60.0,
margin: const EdgeInsets.only(top:10.0, left: 10.0, right:10.0, bottom: 10.0),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: new BorderRadius.all( Radius.circular(5.0) ),
),
),
new Container(
height: 60.0,
margin: const EdgeInsets.only(top:10.0, left: 10.0, right:10.0, bottom: 0.0),
decoration: BoxDecoration(
color: Colors.green,
borderRadius: new BorderRadius.all( Radius.circular(5.0) ),
),
)
],
backgroundColor: Colors.white,
)
I'm getting below result.
What I'm expecting to have is below.
If anyone know a workaround to customize the header color, please advice.
If you check the source code of the ExpansionTitle , you will notice that the header item is a ListTile , so you can't change the background because it hasn't a parent with a color property.
I modified a little the class to support what you need.
Add this file to your project: https://gist.github.com/diegoveloper/02424eebd4d6e06ae649b31e4ebcf53c
And import like this way to avoid conflicts because the same name.
import 'package:nameofyourapp/custom_expansion_tile.dart' as custom;
I put an alias 'custom' but you can change for any alias.
Usage:
custom.ExpansionTile(
headerBackgroundColor: Colors.black,
iconColor: Colors.white,
title: Container(
...
Remember, Flutter has a lot of Widgets out of the box, but If any of them don't fit what you need, you'll have to check the source code and create your own widget.
In my opinion, the more preferable way is wrap It with a new Theme, so It could work as expected:
Theme(
data: Theme.of(context).copyWith(accentColor: ColorPalette.fontColor, unselectedWidgetColor: ColorPalette.fontColor..withOpacity(0.8)),
child: ListView(
children: <Widget>[
ExpansionTile(
title: Text("Padding"),
children: <Widget>[
Text("Left"),
Text("Top"),
Text("Right"),
Text("Bottom"),
],
)
],
),
)
Instead of copy a full class to customize, check the source code, you could find more Theme attribute to override.
_borderColorTween
..end = theme.dividerColor;
_headerColorTween
..begin = theme.textTheme.subhead.color
..end = theme.accentColor;
_iconColorTween
..begin = theme.unselectedWidgetColor
..end = theme.accentColor;
_backgroundColorTween
..end = widget.backgroundColor;
If you want a more animatable widget or something, I would recommend diegoveloper's answer. Otherwise, just wrap It with Theme, so you won't need to maintain the Component, and get native flutter component.
A much easier way than all of those suggested is to wrap your ExpansionTile in a ListTileTheme.
Once you do this, you can change the backgroundColor to whatever you'd like. In my case, I've done the same thing with the ListTiles inside of the ExpansionTile so that the header can have one color and the children can have another color.
return ListTileTheme(
tileColor: Colors.grey.shade300,
child: ExpansionTile(
leading: Padding(
padding: const EdgeInsets.only(top:4.0),
child: Text('Outer Tile'),
),
title: null,
children: [
Slidable(
actionPane: SlidableDrawerActionPane(),
child: ListTileTheme(
tileColor: Colors.white,
child: ListTile(
title: Text('Inner Tile'),
subtitle: Text('subtitle'),
leading: FlutterLogo(),
),
),
)
],
),
);
I think this is easier than digging through the docs to find which Theme elements correspond to individual ListTile parameters.
I think better this solution more than custom list tile .
Widget customTheme(Widget child, BuildContext context) => Theme(
data: Theme.of(context).copyWith(
dividerColor: Colors.transparent,
dividerTheme: DividerThemeData(
color: Theme.of(context).colorScheme.background)),
child: child,
);
Code Gist
It seems the ExpansionTile was changed and you can now directly configure lots of colors. As an example, for the arrows:
return ExpansionTile(
// sets the color of the arrow when collapsed
collapsedIconColor: Colors.red,
// sets the color of the arrow when expanded
iconColor: Colors.green,
);
For changing trailing arrow icon color you can wrap expansion tile with Theme and make theme light and set accet color and primary color to dark and it will work.
return Theme(
data: ThemeData.light()
.copyWith(accentColor: darkAccent, primaryColor: darkAccent),
child: ExpansionTile(
title: Text(
data['number'],
style:
TextStyle(color: darkAccent, fontWeight: FontWeight.bold),
),
Another option which should work is wrapping both the entire expansion tile and each individual container in a Card() widget as they have a color property. The downside is that the background for your expansion will be colored as well as the title, but if you set a color for the child cards, they will not be affected by the parent an so they could be individually colored as you like.
For trouble with the arrow color: notice it's an ExpandIcon, defined as a local Widget expandIconContainer in _ExpansionPanelListState.build().
When your ExpansionPanel uses canTapOnHeader: true, you get ExpandIcon(onPressed: null), so the color used for the underlying IconButton is determined by Theme#disabledColor.
I use this great little plugin, much more flexible than the Flutter Material. You can change the background and borders and have custom icons for open and close states. https://pub.dev/packages/configurable_expansion_tile
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
I'm trying to implement my own TabBar design in flutter. I was able to get a pretty good result. However, when I tap another tab to change the tab, there is a highlight create by default as shown in the image here. I'm wondering if there is any way I can get rid of the square highlight on tapped. I've been looking around for like almost a day not and did not find any solution.
If anyone have any solution please let me know. Thanks.
Edited: as CopsOnRoad suggestion I wrapped the TabBar in the Container and set the color to Colors.transparent, but it does not really disappear so I tried to set the color to Theme.of(context).canvasColor for now.
Container(
color: Theme.of(context).canvasColor,
child: TabBar(
isScrollable: true,
indicator: ShapeDecoration(
color: Color(0xFFE6E6E6),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(99.0)
)
),
tabs: List<Widget>.generate(
categories.length,
(index) => Tab(
child: Text(
categories[index],
style: TextStyle(
fontFamily: 'Hiragino Sans',
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Color(0xFF4D4D4D),
),
),
)
),
)
)
You can also disable the ripple/highlight/splash effect with the code below. Add the Theme with the data of ThemeData where the hightlight and splash color is both transparent.
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(70),
child: Theme(
data: ThemeData(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
),
child: AppBar( ... )
That's the ripple effect. You can remove it by wrapping it in a Container and giving transparent color to it.
you should set tabbar splashFactory: NoSplash.splashFactory as this post mentioned.
TabBar(splashFactory: NoSplash.splashFactory,)
How to disable default Widget splash effect in Flutter?
Here is my custom solution from #Tempelriter
Theme(
data: Theme.of(context).copyWith(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
),
child: Container(
decoration: BoxDecoration(
color: Colors.gray,
border: Border.all(
color: Colors.red
),
borderRadius: BorderRadius.circular(50),
),
child: TabBar(
isScrollable: true,
tabs: [
Tab(text: 'comingSoon'),
Tab(text: 'selling'),
],
),
),
);
I had the similar issue. I tried to read the documentation and found it.
///
/// If non-null, it is resolved against one of [MaterialState.focused],
/// [MaterialState.hovered], and [MaterialState.pressed].
///
/// [MaterialState.pressed] triggers a ripple (an ink splash), per
/// the current Material Design spec.
///
/// If the overlay color is null or resolves to null, then the default values
/// for [InkResponse.focusColor], [InkResponse.hoverColor], [InkResponse.splashColor],
/// and [InkResponse.highlightColor] will be used instead.
final MaterialStateProperty<Color?>? overlayColor;
Finally just added overlayColor to transparent. It solved my issue.
overlayColor: MaterialStateProperty.all(Colors.transparent)
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'm new to Flutter and was trying to change the child icon color of FloatingActionButton. Child icon color is white by default.
How can i change that??
Given below is the code that i have worked on.
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
backgroundColor: Colors.yellow,
), // This trailing comma makes auto-formatting nicer for build methods.
);
Thank you.
You can wrap in an IconTheme
child: new IconTheme(
data: new IconThemeData(
color: Colors.yellow),
child: new Icon(Icons.add),
),
or a Theme where iconTheme is set the way you want it
(not tested)
To change the color of child Icon, You have to set the color in the Icon() widget.
Here I am sharing the code snippet where I have set the red color.
floatingActionButton: FloatingActionButton(
tooltip: 'Increment',
child: new Icon(Icons.add, color: Colors.red,),
backgroundColor: Colors.yellow,
),
Flutter v17.4
This worked for me, if you just want to change to colour of icon.
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add,
color: Colors.black, //The color which you want set.
),
onPressed: () => {},
),
MaterialApp theme: ThemeData
If using ThemeData in your MaterialApp to color your app like:
return MaterialApp(
title: 'Flutter Demo',
theme: lightThemeData, // this guy
darkTheme: darkThemeData, // and perhaps this guy
home: MyHomePage()
);
... you have 2 ways to color your FloatingActionButton (FAB) Icon color in ThemeData:
floatingActionButtonTheme: const FloatingActionButtonThemeData(foregroundColor: myColor)
onSecondary: myColor (used only if ↑↑↑ is missing)
final lightThemeData = ThemeData.from(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.blue,
brightness: Brightness.light,
primary: blue,
secondary: blue,
onSecondary: white, // FAB Icon color if FABTheme not provided like below
),
).copyWith(
floatingActionButtonTheme: const FloatingActionButtonThemeData(foregroundColor: Colors.green), // this guy works
iconTheme: const IconThemeData(color: white), // DOES NOT affect FAB Icon
accentIconTheme: const IconThemeData(color: purpleRain), // argumentFormerlyKnownAsFabIconColor - deprecated, DON'T USE THIS
);
In the above themeData example, the FAB Icon would be colored green.
Because onSecondary is used to color the FAB icon only if floatingActionButtonTheme is missing.
If neither of the above theme colors are provided, the FAB Icon will fallback to black color.
iconTheme and accentIconTheme both have no effect on FAB icon color.
FAB accentIconTheme change happened in Flutter 1.17.