Flutter - SelectedItemColor in bottomNavigationBar not working - flutter

I need to display a BottomNavigationBar with the same width in each item and a yelowish color in the selected but the property seems that's not working
Here's the code
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
showUnselectedLabels: true,
selectedItemColor: Color(0xffffd156),
backgroundColor: Color(0xff22273d).withOpacity(1),
currentIndex: _currentIndex,
onTap: (int index) {
_currentIndex = index;
setState(() {
_currentIndex = index;
});
print(_currentIndex);
if(porraIsActive=="Active" && userPorra && _currentIndex ==1){
Navigator.pushNamed(context, '/vistaPorra');
_currentIndex = 0;
}
},
items: getBottomBar()
)
And Each Item is stored in a List
BottomNavigationBarItem(
icon: SvgPicture.asset("images/home_24_px.svg",
),
title: Text("Inicio", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),
),
backgroundColor: Color(0xff22273d).withOpacity(1),
),
BottomNavigationBarItem(
icon: SvgPicture.asset("images/soccer_24_px.svg",),
title: Text("La porra", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),),
backgroundColor: Color(0xff22273d).withOpacity(1),
),
BottomNavigationBarItem(
icon: SvgPicture.asset("images/calendar_24_px.svg",),
title: Text("Calendario", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),),
backgroundColor: Color(0xff22273d).withOpacity(1),
),
BottomNavigationBarItem(
icon: SvgPicture.asset("images/classification_24_px.svg",),
title: Text("Clasificacion", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),),
backgroundColor: Color(0xff22273d).withOpacity(1),
),
BottomNavigationBarItem(
icon: SvgPicture.asset("images/more_horiz_24_px.svg",),
title: Text("Más", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),),
backgroundColor: Color(0xff22273d).withOpacity(1),
),
];

You should placed the bottom navigation items as an array of BottomNavigationBarItem
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text('Business'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('School'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
Here is the complete code for three bottom navigation bar from Flutter website.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
#override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text('Business'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('School'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}

Seems like it will help you,
getBottomBar(){
List items = <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text('Business'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('School'),
),
];
return items;
}

Here i am changing the color to green. Just try it
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'First',
),
BottomNavigationBarItem(
icon: Icon(Icons.exit_to_app),
label: 'Second',
),
],
selectedItemColor: Colors.green,
)

Related

Why isn't the bottom navigation bar moving between screens in Flutter?

I have been trying to figure out the reason why the screens won't switch easily. It doesn't seem like they are switching to other views such as Profile.
I got the tutorial from here: https://blog.logrocket.com/how-to-build-a-bottom-navigation-bar-in-flutter/
class TabNav extends StatefulWidget {
const TabNav({Key? key}) : super(key: key);
#override
State<TabNav> createState() => _TabNavState();
}
class _TabNavState extends State<TabNav> {
#override
Widget build(BuildContext context) {
int _selectedIndex = 0;
const List<Widget> _pages = <Widget>[
HomeTab(),
RoomsTab(),
SearchTab(),
MapsTab(),
ProfileTab()
];
// This will give the index of the page when a nav icon is tapped
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
return Scaffold(
body: IndexedStack(
index: _selectedIndex,
children: _pages,
),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.transparent,
onTap: _onItemTapped,
type: BottomNavigationBarType.shifting,
iconSize: 30,
unselectedItemColor: Colors.black,
// backgroundColor: Color.fromRGBO(75, 0, 130, 0.5),
selectedIconTheme: IconThemeData(color: Colors.black, size: 30),
selectedItemColor: Colors.black,
selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold),
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.door_back_door),
label: 'Rooms',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.map),
label: 'Maps',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
currentIndex: _selectedIndex,
),
);
}
}
I am not sure why this is occurring because everything seems all right. But I can't navigate anywhere else besides the home screen. I'd appreciate any sort of help :)
Because you declared your functions and variables inside the build method. The build method runs every time you call setState and this means you will declare _selectedIndex every time with 0 again. So if you put it inside your class it won't reset to 0 again:
int _selectedIndex = 0;
const List<Widget> _pages = <Widget>[
HomeTab(),
RoomsTab(),
SearchTab(),
MapsTab(),
ProfileTab()
];
// This will give the index of the page when a nav icon is tapped
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: IndexedStack(
index: _selectedIndex,
children: _pages,
),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.transparent,
onTap: _onItemTapped,
type: BottomNavigationBarType.shifting,
iconSize: 30,
unselectedItemColor: Colors.black,
// backgroundColor: Color.fromRGBO(75, 0, 130, 0.5),
selectedIconTheme: IconThemeData(color: Colors.black, size: 30),
selectedItemColor: Colors.black,
selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold),
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.door_back_door),
label: 'Rooms',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.map),
label: 'Maps',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
currentIndex: _selectedIndex,
),
);
}

Switch screens in bottombar flutter

I have a bottom bar that is supposed to switch between screens when selected but I do not know how to make that work. I know is all contained in the buildpages() widget. Can you guide me through?
Widget buildBottomBar() {
final style = TextStyle(color: Colors.white);
return BottomNavigationBar(
backgroundColor: Colors.deepOrange,
selectedItemColor: Colors.white,
unselectedItemColor: Colors.black,
showSelectedLabels: true,
showUnselectedLabels: false,
selectedLabelStyle: TextStyle(color: Colors.black54),
currentIndex: index,
items: [
BottomNavigationBarItem(
icon: Text('App', style: style),
label: 'Idioms List',
activeIcon: Icon(Icons.list)
),
BottomNavigationBarItem(
icon: Text('FAVORITES', style: style),
label: 'Favorited',
activeIcon: Icon(Icons.favorite_border_rounded)
),
],
onTap: (int index) => setState(() => this.index = index),
);
}
Widget buildPages() {
switch (index) {
case 0:
return FavoriteScreen();
case 1:
return MainPage();
default:
return Container();
}
}
}
you need to create a page for bottom nav bar and
give stful widget then create a list of page like this
static const List<Widget> _widgetOptions = <Widget>[
YorPageclass1(),
YourPageclass2(), etc...];
and create a function for Ontap like
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});}
and create a scaffold widget for pages
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}

Flutter BottomNavigationBar icon reduce on tap and return back normal size on release

I have standard Bottom Navigation. I already hide item titles and use type: BottomNavigationBarType.fixed to prevent default animation.
What I want is : BottomNavigationBar item icons got smaller on click and return back to normal size animatedly. Could anybody help me achieving this ?
int _selectedIndex = 0;
static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: SizedBox.shrink(),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: SizedBox.shrink(),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: SizedBox.shrink(),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
type: BottomNavigationBarType.fixed,
),
);
}
You can use a
AnimatedContainer
to achieve this. Wrap every of your Icons in one and have the icon expand within them. if you change the height of the Animated Container, it will be animated.

bottomNavigationBar is showing labels when showSelectedLabels and showUnselectedLabels is set to false (Flutter)

Was messing around with the bottomNavigationBarTheme and noticed that the label was showing on the selected item even though showSelectedLabels was set to false. Is this a bug or am I missing something?
This behavior only holds true as long as the property is declared in the ThemeData when moved to the bottomNavigationBar it behaves as expected.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'app',
themeMode: ThemeMode.dark,
darkTheme: ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.blueGrey,
canvasColor: Color.fromRGBO(52, 58, 70, 1),
bottomNavigationBarTheme: BottomNavigationBarThemeData(
selectedIconTheme: IconThemeData(
color: Color.fromRGBO(113, 124, 152, 1),
size: 28,
),
unselectedIconTheme: IconThemeData(
color: Color.fromRGBO(196, 201, 212, 1),
size: 28,
),
type: BottomNavigationBarType.fixed,
showSelectedLabels: false,
showUnselectedLabels: false,
),
cardColor: Color.fromRGBO(52, 58, 70, 1)
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key);
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('appbar'),
),
body: Center(
child: Text('Text here'),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.access_time),
title: Text('a'),
),
BottomNavigationBarItem(
icon: Icon(Icons.view_day),
title: Text('a'),
),
BottomNavigationBarItem(
icon: Icon(Icons.equalizer),
title: Text('a'),
),
BottomNavigationBarItem(
icon: Icon(Icons.notifications_active),
title: Text('a'),
),
BottomNavigationBarItem(
icon: Icon(Icons.account_circle),
title: Text('a'),
),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
),
);
}
}
That has to do with the BottomNavigationBarType.
if you are using more than 3 Items in BottonNavigationBar, you have to set the type to BottomNavigationBarType.fixed
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
this has been already discussed on the Flutter github issue page:
https://github.com/flutter/flutter/issues/13642#issuecomment-353945439
This is the right way and worked for me and that too with type BottomNavigationBarType.shifting
showUnselectedLabels: true, unselectedItemColor: Colors.black,
you can do this by multiple way
use Text("");
remove title
You should not be using title, instead of that you should use label without Text() as shown below:
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.access_time),
label:'a',
),
BottomNavigationBarItem(
icon: Icon(Icons.view_day),
label: 'a',
),
BottomNavigationBarItem(
icon: Icon(Icons.equalizer),
label: 'a',
),
BottomNavigationBarItem(
icon: Icon(Icons.notifications_active),
label: 'a',
),
BottomNavigationBarItem(
icon: Icon(Icons.account_circle),
label: 'a',
),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
),
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',
),
],
)
when you new the BottomNavigationBarItem, add the "tooltip:''"

Customise flutter navbar / tabbar with individual background colors

In both a tabbar and nav bar, I would like the selected tab to have a different background to the rest of the bar.
For example: https://imgur.com/a/jxD8MTg
Is this possible in flutter?
If you are using stateful Widget, you could just set the state of the currentIndex in the on Tap method
#override
void initState() {
super.initState();
currentIndex = 0;
}
BottomNavigationBar(
backgroundColor: Colors.white,
type: BottomNavigationBarType.fixed,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
backgroundColor: currentIndex == 0 ? Colors.green : Colors.black,
title: Text('0'),
),
BottomNavigationBarItem(
backgroundColor: currentIndex == 1 ? Colors.green : Colors.black,
title: Text('1'),
),
],
currentIndex: currentIndex,
onTap: (int index) {
setState(() {
currentIndex = index;
});
_navigateToPage(index);
},
);
import 'package:flutter/material.dart';
class ChangeBottomNavBarTextColor extends StatefulWidget {
#override
ChangeBottomNavBarTextColorState createState() {
return new ChangeBottomNavBarTextColorState();
}
}
class ChangeBottomNavBarTextColorState
extends State<ChangeBottomNavBarTextColor> {
String text = 'Home';
var curIndex = 0;
_onTap(int index) {
setState(() {
curIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Change Bottom Nav Bar Text Color Example"),
),
body: Center(
child: Text(text,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
)),
),
bottomNavigationBar: BottomNavigationBar(
selectedItemColor: Colors.red,
currentIndex: curIndex,
type: BottomNavigationBarType.fixed,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
Icons.home,
),
title: Text("Home", style: TextStyle(color: Colors.teal)),
),
BottomNavigationBarItem(
icon: Icon(
Icons.favorite,
),
title: Text("Favorite", style: TextStyle(color: Colors.pink)),
),
BottomNavigationBarItem(
icon: Icon(
Icons.person,
),
title: Text("Profile", style: TextStyle(color: Colors.brown)),
),
BottomNavigationBarItem(
activeIcon: Icon(
Icons.info,
color: Colors.red,
),
icon: Icon(
Icons.settings,
),
title: Text("Settings", style: TextStyle(color: Colors.amber)),
),
],
onTap: _onTap,
),
);
}
}
You can use something like that. When you clicked, _onTap function will change currentIndex. Then selectedItemColor will define the color of the selected index. You can play with the colors whatever you want.