I created a simple bottom navigation bar, (my code below)...
bottomNavigationBar: BottomNavigationBar(
backgroundColor: COLOR_WHITE,
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.account_circle_rounded),
label: 'Profile',
),
BottomNavigationBarItem(
label: 'something', icon: Icon(Icons.star)),
],
)
...but then I really wanted to click on the icons, so I tried adding an Icon Button for its onPressed() method.
bottomNavigationBar: BottomNavigationBar(
backgroundColor: COLOR_WHITE,
items: [
BottomNavigationBarItem(
icon: IconButton(
icon: const Icon(Icons.account_circle_rounded),
onPressed: () {
Navigator.of(context).pushReplacement(
MaterialPageRoute(builder: (context) => ProfileScreen(userID :widget.userID)),
);
},
),
label: "Profile"
),
BottomNavigationBarItem(
label: 'something', icon: Icon(Icons.star)),
],
),
It gets all ugly, and I wanted the paddings and size all around to remain the same, but since I didn't add code to change those features, I don't get why it happened in the first place. Can someone help me solve it? Thanks!!
BottomNavigationBar has an onTap method you can use to trigger your callbacks so you don't need an IconButton. onTap gives you the index of the item tapped so you can map it to the appropriate page. You can also update the currentIndex property on the BottomNavigatorBar to highlight the appropriate item.
See this documentation for BottomNavigationBar for a good example: https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html
the mistake you have made was in the first BottomNavigationBarItem you have IconButton Widget and in second Icon widget... both having different styles by default(flutter developers gave default values for padding size etc)... so below code will work. i implemented locally and checked as well..
BottomNavigationBar(
backgroundColor: Colors.white,
items: [
BottomNavigationBarItem(
icon: IconButton(
icon: const Icon(Icons.account_circle_rounded),
onPressed: () {
Navigator.of(context).pushReplacement(
MaterialPageRoute(builder: (context) =>
ProfileScreen(userID:widget.userID)),
);
},[enter image description here][1]
),
label: "Profile"
),
BottomNavigationBarItem(
label: 'something', icon: IconButton(
icon: const Icon(Icons.star),
onPressed: () {
},
),),
],
)
enter image description here
Related
I can't seem to find a parameter that lets the widgets TextButton.icon and ElevatedButton.icon place the label first then the icon. Is there a way or do I have to make a custom widget for this?
Example:
ElevatedButton.icon(
onPressed: () { /* code */ },
icon: Icon(Icons.arrow_forward),
label: Text('Some text'),
)
Both icon & label accepts a Widget. So you could do this:
ElevatedButton.icon(
icon: Text('A'),
label: Icon(Icons.add),
onPressed: () {},
),
I have just started programming with Flutter and Dart
And I wanted to know how to set the code and content for a tab or button
For example, I put a button icon in the bottom navigator and what code and method is needed so that after clicking on that button, a new page will open one by one and the operation will be performed.
Thanks.
For bottom navigation bar you can use like this:
`
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),
label: 'Home',
backgroundColor: Colors.red,
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
backgroundColor: Colors.green,
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
backgroundColor: Colors.purple,
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
backgroundColor: Colors.pink,
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
`
You need to set onTap() for actions when you press the button and setState() to update the state of the widget.
All buttons (TextButton, ElevatedButton ect) will be having onTap() property, you can call a method inside onTap().
For more details visit this: https://flutter.dev/docs/development/ui/widgets/material#Buttons
This is a very specific use case and has a different solution to what you would usually do with buttons.
The documentation for the BottomNavigationBar() shows a few code examples. You can copy paste that and modify it to suit your need. What they basically do is add BottomNavigationBar() items and add an onChanged/onTap method which you would use to change the page.
For buttons in general, they would have an onPressed parameter where you can pass a function or an anonymous function (e.g. () {your code here}). Flutter provides you with a few default buttons such as ElevatedButton() and TextButton() which you can read more about here (https://api.flutter.dev/flutter/material/ElevatedButton-class.html) and here (https://api.flutter.dev/flutter/material/TextButton-class.html). They have parameters which allow you to tweak them. This is where you can run functions when they are pressed.
If you want to make a non-button widget clickable you can use a GestureDetector() which you can read more about here (https://api.flutter.dev/flutter/widgets/GestureDetector-class.html). It is also has an onTap similar to the buttons but also has much more options such as long, double, triple, etc. taps as well as gestures like swipes.
It all comes down to getting used to all those different widgets and you will get familiar with them through practice.
I'm using SafeArea to display a bottom navigation bar :
SafeArea(
child: ScaffoldMessenger(
child: Scaffold(
body: _tabs[index],
bottomNavigationBar: BottomNavigationBar(
selectedItemColor: Theme.of(context).primaryColor,
unselectedItemColor: Colors.grey,
showUnselectedLabels: true,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.calendar_today), label: "Agenda"),
BottomNavigationBarItem(
icon: Icon(Icons.people), label: "Patients"),
BottomNavigationBarItem(
icon: Icon(Icons.account_balance_wallet), label: "Comptes"),
BottomNavigationBarItem(
icon: Icon(Icons.settings), label: "Réglages"),
],
currentIndex: index,
onTap: (i) => context.read(navigationIndexProvider).index = i,
),
),
),
);
When bookmarked on iphone desktop, the safe area does not prevent the notch from overlapping the bottom navbar.
Here is the result :
How to properly prevent notch from overlapping the bottom bar ?
In SAFEAREA widget there is an argument -bottom
Set this bottom either true or false.
SafeArea(
bottom:true,
child:ScaffoldMessanger()
)
I don't remember the correct one, you can check both and let us know which one works for you.
I think since you're using bottomNavigationBar, the SafeArea should not be wrapped around Scaffold. It should be wrapped by Scaffold like this:
Scaffold(
body: SafeArea(child:
_tabs[index] ...
I think you should only wrap Scaffold with SafeArea when you're not using any kind of bottomNavigationBar
I'm using the package feature_discovery at version ^0.12.1. In order to display the feature discovery overlay, I need to wrap the BottomNavigationBarItem with a DescribedFeatureOverlay. However the BottomNavigationBar's items require a list of type BottomNavigationBarItem:
Scaffold(
[...]
bottomNavigationBar: BottomAppBar(
[...]
child: BottomNavigationBar(
[...]
items: [
DescribedFeatureOverlay( // This does not work because items requires type BottomNavigationBarItem
[...]
child: BottomNavigationBarItem(
icon: Icon(item.icon),
label: item.title,
),
),
],
),
),
);
The valid code would be like this:
Scaffold(
[...]
bottomNavigationBar: BottomAppBar(
[...]
child: BottomNavigationBar(
[...]
items: [
BottomNavigationBarItem( // need to wrap this with DescribedFeatureOverlay
icon: Icon(item.icon),
label: item.title,
),
],
),
),
);
I've been trying for so long now to find a solution to this.
How can I wrap the BottomNavigationBarItem with the DescribedFeatureOverlay?
Is this a limitation of Flutter or is there a way of doing this?
Do I need to copy, extend and modify the BottomNavigationBar class and use that one in order to achieve this?
As workaround you can wrap icon widget of BottomNavigationBarItem
like that
BottomNavigationBarItem(
icon: DescribedFeatureOverlay(
featureId: item.featureId,
title: Text(item.title),
description: Text(item.description),
backgroundColor: item.color,
tapTarget: Icon(item.icon),
child: Icon(item.icon),
),
label: item.title,
);
In our Flutter Cupertino project, we need to show a badge on one of the bottom bar icons. How many articles are already in the shopping cart to be precise.
I've tried different widgets and solutions provided here, but the BottomNavigationBarItem accepts only icon: Icon(..) and nothing else. If I, for example, put icon: Stack(..) instead of the icon: Icon(..), there are error messages shown, for example
"Invalid const value..."
Here is some sample code:
class CupertinoStoreHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return CupertinoTabScaffold(
tabBar: CupertinoTabBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.home),
title: Text('Kühlschrank'),
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.profile_circled),
title: Text('Konto'),
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.shopping_cart),
title: Text('Warenkorb'),
),
],
),
So if I can not put anything instead of the Icon(..). No other widget, no Stack(..).
Why? How can I put some other widget, like for example Badge(..):
badges: ^1.0.2
import 'package:badges/badges.dart';
This question is different from the possible duplicate, because I already tried the solution posted there and still can not use Stack(..) but only Icon(..).
I tried reproducing the problem, but it does work after changing a few things. First of all the icon property accepts a Widget and therefore not only an Icon, so this is not the problem.
I did notice however, in items: const <BottomNavigationBarItem>[ you should remove the const keyword as it is not necessary and also not constant.
And lastly, you need to add a tab builder to CupertinoTabScaffold this basically returns what's displayed above the bottom navigation bar.
Your final code then looks like this:
return CupertinoTabScaffold(
tabBuilder: (BuildContext context, int i) {
return CupertinoActivityIndicator();
},
tabBar: CupertinoTabBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Badge(
badgeContent: Text('3'),
child: Icon(Icons.settings),
),
title: Text('Kühlschrank'),
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.profile_circled),
title: Text('Konto'),
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.shopping_cart),
title: Text('Warenkorb'),
),
],
),
);