I've tried a couple of options to make my icon change when it's clicked. But none of the options worked. She's just dyed blue.
Here is my first choice -
BottomNavigationBarItem(
icon: ImageIcon(
AssetImage('assets/images/home.PNG')
),
activeIcon: ImageIcon(
AssetImage('assets/images/home_color.PNG')
),
label: "Главная",
),
And here is the second option -
BottomNavigationBarItem(
icon: selectedIndex == 0 ? ImageIcon(
AssetImage('assets/images/home.PNG')
) : ImageIcon(
AssetImage('assets/images/home_color.PNG')
),
// activeIcon: ImageIcon(
// AssetImage('assets/images/home_color.PNG')
// ),
label: "Главная",
),
Tell me what's wrong
Here are the settings I use for the bottombar itself -
type: BottomNavigationBarType.fixed,
currentIndex: selectedIndex,
backgroundColor: Colors.deepPurple,
items: <BottomNavigationBarItem>[
And full code bottom bar - https://dpaste.org/SuHuk
Try replacing ImageIcon with Image.asset:
BottomNavigationBarItem(
icon: Image.asset("assets/inactive_icon.png"),
label: label,
activeIcon: Image.asset("assets/active_icon.png"),
);
Related
List navScreens = [
const HomeScreen(),
const FavoriteScreen(),
const NotificationScreen(),
const MyProfilesScreen(),
];
Scaffold(
body: navScreens.elementAt(selectedIndex),
bottomNavigationBar: BottomNavigationBar(
currentIndex: selectedIndex,
iconSize: 34,
selectedItemColor: ConstColors.green,
unselectedItemColor: ConstColors.black2,
elevation: 10,
onTap: (value) {
setState(() {
selectedIndex = value;
});
},
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.home_outlined), label: 'home'),
BottomNavigationBarItem(
icon: Icon(Icons.bookmark_border_outlined), label: 'favorite'),
BottomNavigationBarItem(
icon: Icon(Icons.notifications_none), label: 'notification'),
BottomNavigationBarItem(
icon: Icon(Icons.person_outline), label: 'profile'),
],
),
);
When I switch screens from BottomNavBar (MainScreen) to inside (DetailScreen), then BottomNavBar disappears. If I directly navigate to bottombar screen back from nested screens. It also get disappear. Persistent_bottom_bar is another solution but I want to fix it with built in support. Thanks !
This package suits your need well.
context: my app navigation relies on one screen with a scaffold and a BottomNavigationBar containing BottomNavigationBarItems. If you click an item, its index dertermines which widget is picked from a list to serve as body for the scaffold. (Code below)
problem: I'd also like to add a Drawer to the scaffold that can also be used for navigation. I know how to add a drawer, but I don't know how to connect items in there with my navigation.
solution I can see:
I could try writing my own function that determines the index of whatever I click in the drawer and sets my page selection to that index. I don't want to reinvent the wheel though; Is there anything like the combination of "BottomNavigationBar + BottomNavigationBarItems" I could place in the drawer? Am I thinking about this the wrong way?
EDIT: I can also just add a list of items wrapped in individual GestureDetectors and call _selectPage() with a hard coded index ... but that does feel clumsy.
Shortened code of the screen for the tabbed navigation:
class _TabsScreenState extends State<TabsScreen> with WidgetsBindingObserver {
late List<Widget> _pages;
late Timer timer;
int _selectedPageIndex = 0;
#override
void initState() {
_pages = [
HomeScreen(),
FavoritesScreen(),
LookBackScreen(),
InfoScreen(),
];}
void _selectPage(int index) {
setState(() {
_selectedPageIndex = index;
});
}
return Scaffold(
appBar: AppBar(
//
body: _pages[_selectedPageIndex],
//
bottomNavigationBar: BottomNavigationBar(
onTap: _selectPage,
currentIndex: _selectedPageIndex,
type: BottomNavigationBarType.fixed,
items: [
//home
BottomNavigationBarItem(
icon: Icon(Icons.home, color: customColorScheme['Icon 1']),
activeIcon: Icon(Icons.home, color: customColorScheme['Icon 2']),
label: '',
),
//favorite
BottomNavigationBarItem(
icon: Icon(Icons.favorite, color: customColorScheme['Icon 1']),
activeIcon:
Icon(Icons.favorite, color: customColorScheme['Icon 2']),
label: '',
),
//loockback
BottomNavigationBarItem(
icon: Icon(Icons.bar_chart, color: customColorScheme['Icon 1']),
activeIcon:
Icon(Icons.bar_chart, color: customColorScheme['Icon 2']),
label: '',
),
//info & support
BottomNavigationBarItem(
icon: Icon(Icons.info, color: customColorScheme['Icon 1']),
activeIcon: Icon(Icons.info, color: customColorScheme['Icon 2']),
label: '',
),
],
),
);
}
}
I am creating a bottom navigation bar in flutter. I would like to pick the labels from an array. The following program throws an error "Values in a const list literals must be constants". I understand that the the list of navigation bar items in the scaffold is declared const and we cannot use the non-const string arrays. How to fix this problem?
class _MyHomePageState extends State<MyHomePage> {
int _currentIndex = 0;
// final List _children = [];
Text titleText = new Text('Pensor');
var tabLabels = ['Home', 'Water', 'Insights', 'Cabliration', 'Settings'];
#override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
title: titleText,
),
// body: _children[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
onTap: onTabTapped,
currentIndex: _currentIndex,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: tabLabels[0], // <-- Here is the error. The tabLabels are not const.
),
BottomNavigationBarItem(
icon: Icon(Icons.water_damage),
label: 'Water',
),
BottomNavigationBarItem(
icon: Icon(Icons.insights),
label: 'Insights',
),
BottomNavigationBarItem(
icon: Icon(Icons.biotech),
label: 'Calibration',
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
),
],
),
);
}
Just remove const
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: tabLabels[0],
),
BottomNavigationBarItem(
icon: Icon(Icons.water_damage),
label: 'Water',
),
BottomNavigationBarItem(
icon: Icon(Icons.insights),
label: 'Insights',
),
BottomNavigationBarItem(
icon: Icon(Icons.biotech),
label: 'Calibration',
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
),
],
Is there a way that I can make an item on bottom navigation bar unclickable that doesn't route anywhere?
lets say you want to deactivate deactiveIndex in your navigation bar. use this:
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:(index){
if(index == deactiveIndex){ return;}
setState((){_selectedIndex=index});
},
),
for more UI representation you can set activeIcon for active indices or change the color and style of reactive index.
I'm having an app with a bottom navigation bar:
BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: Image.asset('assets/icons/inactive/sth.png'),
activeIcon: Image.asset('assets/icons/active/sth.png'),
title: Text('Sth')
),
BottomNavigationBarItem(
icon: Image.asset('assets/icons/inactive/sth.png'),
activeIcon: Image.asset('assets/icons/active/sth.png'),
title: Text('Sth')
),
],
onTap: (int index) {
_currentIndex = index;
},
currentIndex: _currentIndex
)
Now I have some use cases where I want to display the bottomNavigationBar but none of its items should be active.
When setting the currentIndex to a non-existing index, I'm getting an error as expected.
Is there any way to achieve my goal?
Thank you in advance.
You can try something like
bool isInactive;
BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: Image.asset('assets/icons/inactive/sth.png'),
activeIcon: isInactive ? Image.asset('assets/icons/active/sth.png') : Image.asset('assets/icons/inactive/sth.png'),
title: Text('Sth')
),
...
// set default unselected
int _selectedIndex = -1;
BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: Image.asset('assets/icons/inactive/sth.png'),
activeIcon: Image.asset('assets/icons/active/sth.png'),
title: Text('Sth')
),
BottomNavigationBarItem(
icon: Image.asset('assets/icons/inactive/sth.png'),
activeIcon: Image.asset('assets/icons/active/sth.png'),
title: Text('Sth')
),
],
onTap: (int index) {
setState(() {
_selectedIndex = index;
});
},
// if unselected change select index to 0, else you will get error
currentIndex: (_selectedIndex != -1) ? _selectedIndex : 0,
// add unselected color
unselectedItemColor: Colors.grey,
// if unselected change color to unselectedItemColor
selectedItemColor: (_selectedIndex != -1) ? Colors.blueGrey : Colors.grey,
)