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
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.
I would like to use Navigator.pushNamed(context, '/route-name'); instead of creating an object instance. I'm trying to get back to a single instance of the called screen from multiple screens of the app. Is there any other way to make this possible?
I would like to replace the widget list with navigator routes instances so I can navigate back to my screen from any place in the app. Code below:
class _NavigationWrapperState extends State<NavigationWrapper> {
var bottomWidgetKey = GlobalKey<State<BottomNavigationBar>>();
int _index = 0;
List<Widget> widgets = [
MyIssuesOverview(),
ProjectOverview(),
DashboardWrapper(),
SettingsScreen(),
];
#override
Widget build(BuildContext context) {
return Scaffold(
key: bottomWidgetKey,
body: widgets.elementAt(_index),
bottomNavigationBar: BottomNavigationBar(
selectedItemColor: Colors.blue,
unselectedItemColor: Colors.grey,
onTap: (int idx) => {
setState(() {
_index = idx;
}),
},
currentIndex: _index,
items: [
BottomNavigationBarItem(label: "Home", icon: Icon(Icons.home)),
BottomNavigationBarItem(label: "Projects", icon: Icon(Icons.topic)),
BottomNavigationBarItem(
label: "Dashboard",
icon: Icon(Icons.add_chart),
),
BottomNavigationBarItem(
label: "Timer",
icon: Icon(Icons.lock_clock),
),
BottomNavigationBarItem(
label: "Settings",
icon: Icon(Icons.settings),
)
],
),
);
}
}
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,
)