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.
Related
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"),
);
I have created a bottom navigation menu in my app and i would like to create an animated circular menu when i click on the transact button.
When i click on transact i want it to pull up like this
This is my current bottomNav code
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.swap_horiz),
label: 'Transact',
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
),
],
currentIndex: _selectedIndex,
selectedItemColor: MyColors.greenSuccess,
onTap: _onItemTapped,
),
//function when item is tapped
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
//check which item is selected
if(index == 0){
//go home
}
else if(index == 1){
//open trans menu here
}
else{
// go to settings
}
}
there is a lot of bottom nav variation package you can check at this website
or you can try to use bottom nav with this FAB put in in the center of the nav
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.
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 any workaround to translate the BottomNavigationBarItem into different languages?
I use Lang.getString(context, key) to access a map(loaded from a json file) to fetch the right translation, it doesn't make any sense to hard code the label like this, label: "Home". what should I do?
PageView(
controller: pageController,
onPageChanged: _pageSwipped,
children: <Widget>[Page1()],
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.list),
label: Lang.getString(context, key), // it doesn't work because it should be constant.
),
],
currentIndex: _currenIndex,
selectedItemColor: Colors.blue,
iconSize: _deviceSize.size.height * 0.046,
selectedFontSize: _deviceSize.size.height * 0.023,
unselectedItemColor: Colors.grey,
onTap: _bottomTapped,
)
Remove const keyword from line
items: const <BottomNavigationBarItem>[
......
......
]