Bottom Navigation Drawer bar:
The Bottom Navigation bar has become popular in the last few years for navigation between different UI. Many developers use bottom navigation because most of the app is available now using this widget for navigation between different screens.
It contain multiple items such as text labels, icons, or both. It allows the user to navigate between the top-level views of an app quickly. If we are using a larger screen, it is better to use a side navigation bar.
The Bottom Sheets in Flutter widgets are like paper sheets that open up in front of the view and allow users to perform some actions. widgets that open up in a different widget tree that is already there.
Types of Bottom Sheets in Flutter
When defining BottomSheets in Flutter, we have 3 options to create BottomSheets from.
- Standard Bottom Sheet
- Modal Bottom Sheet
- Expanding Bottom Sheet
Modal Bottom Sheet
Model Bottom Sheet an alternative to a menu or a dialog and prevents the user from interacting with the rest of the app. It will appear over the UI so that there is no need to navigate to a different page. It use to perform a small task that does not require the whole new screen to be build.
showModalBottomSheet(
context: context,
builder: (_) => ListView(
shrinkWrap: true,
children: List<Widget>.generate(
4,
(index) => const ListTile(
leading: Icon(Icons.share),
title: Text('Share'),
),
),
),
);
Bottom Navigation bar
Bottom Navigation bar become popular in the last few years for navigation between different UI. Many developers use bottom navigation because most of the app is available now using this widget for navigation between different screens.can contain multiple items such as text labels, icons, or both. It allows the user to navigate between the top-level views of an app quickly. If we are using a larger screen, it is better to use a side navigation bar.
Properties of the BottomNavigationBar Widget
The following are the properties use with the bottom navigation bar widget:
1.Items defines the list to display within the bottom navigation bar. It uses argument BottomNavigationBar Item that contains sup-properties given below:
2.CurrentIndex determines the current active bottom navigation bar item on the screen.
3.onTap call when we tap one of the items on the screen.
4.IconSize use to specify the size of all bottom navigation item icons.
5.FixedColor use to set the color of the selected item. If we have not set a color to the icon or title, it will be shown.
6.Type determines the layout and behavior of a bottom navigation bar. It behaves in two different ways that are: fixed and shifting. If it is null, it will use fixed. Otherwise, it will use shifting where we can see an animation when we click a button.
NavigationBar widget
The widget gives us access to a few widgets such as the following:
onDestinationSelected: TheonDestinationSelectedproperty takes a function that takes anintas an argument. The function is called when a user taps on a navigation bar item (NavigationDestination). Theintargument represents the index of the selected item.selectedIndex: TheseletedIndexproperty determines which of the navigation bar items is selected.destinations: The list of widgets that will be displayed in ourNavigationBarwidget is passed to the Navigation widget through thedestinationsproperty. It requires us to pass an icon and label properties as a required property/parameter.
Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Demo'),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.call),
label: 'Calls',
),
BottomNavigationBarItem(
icon: Icon(Icons.camera),
label: 'Camera',
),
BottomNavigationBarItem(
icon: Icon(Icons.chat),
label: 'Chats',
),
],
),
);
Full Code: Bottom Navigation Drawer bar
import 'package:demoproject/Constant/color.dart';
import 'package:flutter/material.dart';
class NavigationScreen extends StatefulWidget {
@override
_NavigationScreenState createState() => _NavigationScreenState();
}
class _NavigationScreenState extends State<NavigationScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Blue,
title: Text("Bottom Navigation"),
),
bottomNavigationBar: BottomAppBar(
elevation: 0,
color: Color(0xff344955),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10.0),
height: 56.0,
child: Row(children: <Widget>[
IconButton(
onPressed: showMenu,
icon: Icon(Icons.menu),
color: Colors.white,
),
Spacer(),
IconButton(
onPressed: () {},
icon: Icon(Icons.add),
color: Colors.white,
)
]),
),
),
);
}
showMenu() {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
color: Colors.transparent,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
SizedBox(
height: (56 * 6).toDouble(),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0),
),
color: Color(0xff344955),
),
child: Stack(
alignment: Alignment(0, 0),
children: <Widget>[
Positioned(
child: ListView(
physics: NeverScrollableScrollPhysics(),
children: <Widget>[
ListTile(
title: Text(
"Inbox",
style: TextStyle(color: Colors.white),
),
leading: Icon(
Icons.inbox,
color: Colors.white,
),
onTap: () {},
),
ListTile(
title: Text(
"Starred",
style: TextStyle(color: Colors.white),
),
leading: Icon(
Icons.star_border,
color: Colors.white,
),
onTap: () {},
),
ListTile(
title: Text(
"Sent",
style: TextStyle(color: Colors.white),
),
leading: Icon(
Icons.send,
color: Colors.white,
),
onTap: () {},
),
ListTile(
title: Text(
"Trash",
style: TextStyle(color: Colors.white),
),
leading: Icon(
Icons.delete_outline,
color: Colors.white,
),
onTap: () {},
),
ListTile(
title: Text(
"Spam",
style: TextStyle(color: Colors.white),
),
leading: Icon(
Icons.error,
color: Colors.white,
),
onTap: () {},
),
ListTile(
title: Text(
"Drafts",
style: TextStyle(color: Colors.white),
),
leading: Icon(
Icons.mail_outline,
color: Colors.white,
),
onTap: () {},
),
],
),
)
],
))),
Container(
height: 56,
color: Color(0xff4a6572),
)
],
),
);
});
}
}
For More: To know about Swipe Actions in Flutter ListView
Leave a Reply