I have bottom navigation bar and drawer. I want the drawer to close automatically when ever the user click any button navigation icon. I'm not really sure how to do that.
I can close the drawer immediately when ever the user click inside the drawer like below
void _onSelectItem(int index) {
setState(() => _currentSelected= index);
Navigator.of(context).pop(); // close the drawer
}
But the drawer stuck there forever until I slide back. I also want the drawer to close immediately when ever the user click bottom navigation bar.
void onTappedBar(int index){
index == 3
? _drawerKey.currentState.openDrawer()
: setState((){
_currentSelected = index;
});
}
And this are my bottom navigation bar
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.blueGrey[900],
type: BottomNavigationBarType.fixed,
onTap: onTappedBar,
currentIndex: _currentSelected,
showUnselectedLabels: true,
unselectedItemColor: Colors.white,
selectedItemColor: Color.fromRGBO(10, 135, 255, 1),
items: <BottomNavigationBarItem> [
BottomNavigationBarItem(icon: new Icon(Icons.home), title: new Text('Home')),
BottomNavigationBarItem(icon: new Icon(Icons.search), title: new Text('Explore')),
BottomNavigationBarItem(icon: new Icon(Icons.device_hub), title: new Text('Channels')),
BottomNavigationBarItem(icon: new Icon(Icons.dehaze), title: new Text('More')),
],
),
I'm current learning Flutter so any suggestion will be very appreciated. thanks
Add onTap: (int index) {} to your Bottom Nav Bar scaffold, and within that method add Navigator.of(context).pop();. Hope this helps.
Related
I have a transparent system navigation bar in my application.
Getx snack bar is used by the app to throw errors and success messages. What I'm stuck with is that anytime the app throws a snack bar, the snack bar appears and disappears through the transparent navigation bar (i can see the snack bar move through the navigation bar). Is there any way to have the snack bar appear above the navigation bar? How can I position the snack bar above the system navigation bar?
You may want to look into SnackBarBehavior enum which allows one to change the position. If you are using a third party library then you may want to try putting the behavior into an extension method. Alternative ideas exist on this SO Question that may apply in your use case although not an exact duplicate.
The SnackbarBehavior enum states:
Defines where a SnackBar should appear within a Scaffold and how its location should be adjusted when the scaffold also includes a FloatingActionButton or a BottomNavigationBar.
Other ideas include using a position widget with a Stack widget to gain precise control. Add a MediaQuery or other fractional widgets to allow for multiple screen sizes.
I suggest you to use SnackBar Widget that developed by flutter team instead of Getx snackbar. It basically appears above of navigation bar here an basic example;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: ElevatedButton(
child: const Text('Show Snackbar'),
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: const Text('Awesome Snackbar!'),
action: SnackBarAction(
label: 'Action',
onPressed: () {
// Code to execute.
},
),
),
);
},
),
),
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,
),
);
}
static GetSnackBar SuccessSnackBar({String title = 'Success', String message}) {
Get.log("[$title] $message");
return GetSnackBar(
titleText: Text(title.tr, style: Get.textTheme.headline6.merge(TextStyle(color: Get.theme.primaryColor))),
messageText: Text(message, style: Get.textTheme.caption.merge(TextStyle(color: Get.theme.primaryColor))),
snackPosition: SnackPosition.BOTTOM,
margin: EdgeInsets.all(20),
backgroundColor: Colors.green,
icon: Icon(Icons.check_circle_outline, size: 32, color: Get.theme.primaryColor),
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 18),
borderRadius: 8,
dismissDirection: DismissDirection.horizontal,
duration: Duration(seconds: 5),
);
}
Used like this in my app. Worked fine.
Get.snackbar(
"Bruh",
"Your quantity have to at least one",
colorText: Colors.black,
backgroundColor: Palette.yellowColor,
);
In my case, this is my return to show snackbar for error message, the snackbar appear on top below the appbar
In the getx snackbar there are a snackPosition: attribute
You can use that to display yours
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 have this problem. My home page has a bottomNavigationBar with 2 pages A and B.
Pages A and B have buttons that when tapped navigate to other pages which don't have bottom Navigation Bars. Now, when I am in these other pages that don't have bottom navigation bars and would like to return to my home page, that is the pages with bottom Navigation bars (A & B), using "Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) => A()), (Route route) => false),", the bottom Navigation Bar in page A disappears. The same happens when I navigate to page B.
How can I "pushAndRemoveUntil" to either pages (A & B) in my home page without losing the bottom Navigation Bar?
This is how I have implemented the bottom Navigation Bar:
return Scaffold(
backgroundColor: Theme.of(context).backgroundColor,
body: PageView(
children: <Widget>[
A(),
B(),
],
controller: pageController,
onPageChanged: onPageChanged,
physics: NeverScrollableScrollPhysics(),
),
bottomNavigationBar: CupertinoTabBar(
backgroundColor: appbar_Color,
currentIndex: pageIndex,
onTap: onTap,
activeColor: Theme.of(context).primaryColor,
items: [
BottomNavigationBarItem(
title: Text("Page A"),
icon: Icon(Icons.whatshot),
),
BottomNavigationBarItem(
title: Text("Page B"),
icon: Icon(Icons.notifications_active),
),
],
),
);
my onTap function:
onTap(int pageIndex) {
pageController.animateToPage(pageIndex,
duration: Duration(milliseconds: 100), curve: Curves.easeInOut);
}
Thank you so much.
You just need to call Navigator.pop(context) on other pages as they are just a stack on top of your current Scaffold containing PageView of 2 Pages. Just pop the page out and you will be redirected with the same screen.
It doesn't seem that you want to use pushAndRemoveUntil that push the given route onto the navigator, and then remove all the previous routes until the predicate returns true. It seems that you want to use pop (one view back) or popUntil (back until finding requested one)
This command will take you directly to the first view in the stack
Navigator.of(context).popUntil((route) => route.isFirst);
This other command will go one view back in the stack
Navigator.of(context).pop();
HomeScreen() function call the Home screen of App.
How I Can route/move to "Team", "Add", etcetera page without BottomNavigationBar and AppBar.
I want show another page and back button, with new Bottom Navigation Bar.
I have this on my Flutter Project:
class APPMain extends StatefulWidget {
#override
_APPMainState createState() => _APPMainState();
}
class _APPMainState extends State<APPMain> {
int _currentIndex = 0;
_onTapped(int index) {
setState(() {
_currentIndex = index;
});
}
#override
Widget build(BuildContext context) {
List<Widget> screens = [
HomeScreen(),
Center(child: Text("Team")),
Center(child: Text("Add")),
Center(child: Text("Search")),
Center(child: Text("Settings")),
];
return Scaffold(
appBar: AppBar(
backgroundColor: Color(0xffffffff),
iconTheme: IconThemeData(color: Colors.grey),
title: Text("Test App", style: TextStyle(color: Colors.grey),),
actions: <Widget>[
IconButton(
icon: Icon(Icons.account_circle),
onPressed: (){},
),
],
),
body: Container(
color: Color(0xfff4f4f4),
child: Center(
child: screens[_currentIndex],
),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
type: BottomNavigationBarType.fixed,
fixedColor: Colors.red,
onTap: _onTapped,
items: [
BottomNavigationBarItem(
title: Text('Home'), icon: Icon(Icons.home)),
BottomNavigationBarItem(
title: Text('Team'), icon: Icon(Icons.group)),
BottomNavigationBarItem(
title: Text('Add'), icon: Icon(Icons.add)),
BottomNavigationBarItem(
title: Text('Search'), icon: Icon(Icons.search)),
BottomNavigationBarItem(
title: Text('Settings'), icon: Icon(Icons.settings)),
]),
);
}
}
Thank you so much for help.
This is almost certainly a duplicate but I wasn't able to find a question asking something similar with a quick search so I'll answer anyways.
The answer is actually quite simple, but requires understanding a bit more about how to write flutter applications - you should be using a Navigator or the navigator built right into MaterialApp or WidgetApp rather than making your own navigation. The simplest way is to use MaterialApp's routes property and pass in a map with each of your pages. Then when you want to switch pages, you simply use Navigator.pushNamed(context, <name>) from wherever you want to switch the page (i.e. a button).
The part that can be slightly confusing when you come from other frameworks is that rather than having one Scaffold and switching the body of it, the entire page should switch and each page should have a Scaffold.
Here's an example in the documentation showing how to navigate between pages.
For the record, although it's a bad idea you could make it work with your original code as well - all you'd have to do is build a different BottomNavigationBar with different options depending on what _currentIndex is set to. But I don't recommend that. With what I've suggested you also get animations between pages, back button functionality, you can hook up analytics to track page usage, and a bunch more things that flutter provides as part of navigation.