Flutter Tutorials – #1.4 – DRAWER – PageRoute, Navigator, UserAccountsDrawerHeader
Introduction
Welcome to Himdeve development, where we are preparing the best tutorials to make your mobile application development easier and more efficient.
Goal
- Create a Drawer for our application
- Use UserAccountsDrawerHeader and ListTile for Drawer
- Learn how to work with GestureDetector, CircleAvatar, AlertDialog widgets
- Learn basic navigation between screens in the application – Page routing
Procedure
First we open our existing application from the previous tutorial and we open the file shop_page.dart.
In the build method, in the Scaffold widget we define a new attribute – drawer and we set its value to a new widget – ShopDrawer.
We need to create this widget first. So we add a new shop_drawer.dart file to the components folder. And we will create a ShopDrawer in it that will inherit from the Stateless Widget.
Drawer
In the build method of this widget, we will return the Flutter Drawer widget. Drawer can be any widget, but it is often best to use the Drawer widget from a Material Library that follows the Material Design specification.
We will wrap the Drawer widget in a Theme widget to change the style for the entire drawer. Specifically, we change the canvasColor, that is a drawer’s background color, and we set its value to blue. Rather than overriding everything, it often makes sense to extend the parent theme. And we can handle this by using the copyWith() method.
In the Drawer’s hierarchy of widgets, we add a ListView widget to the child attribute of the Drawer. We could define another way to organize additional item widgets into Drawer, but ListView is useful because it allows users to scroll through Drawer if the content takes up more space than the screen supports.
We will add the Drawer header and ListTile widget to the ListView.
And we set Drawer’s padding to zero to remove any redundant space from Drawer.
Drawer Header
To create a Drawer header, we define the private method _buildDrawerHeader, where we set BuildContext as a parameter. This method returns the UserAccountsDrawerHeader widget.
UserAccountsDrawerHeader
We will define several attributes for the UserAccountsDrawerHeader widget.
accountName
The first attribute will be accountName, where we define the name of our store: ‘Himdeve Fashion’. We’ll wrap it with the Text widget and set a text background color to black.
accountEmail
We will also define another attribute accountEmail and we set its value to ‘[email protected]’.
currentAccountPicture
Another attribute will be currentAccountPicture, which represents either the user’s photo or, in our case, the logo of our store. We will return the GestureDetector to call this callback method.
Gesture Detector
Gesture detector is a widget that detects gestures. In our case we will be interested in the gesture of tapping at the logo of our store. This is done by the Gesture Detector onTap attribute, and on the call of this callback method we will display a dialog with a basic info about this store. To display the dialog, we use the Flutter showDialog() method. And we define here 2 attributes: BuildContext and child. In the child attribute we set the Flutter AlertDialog widget.
AlertDialog
For AlertDialog set the title attribute, where we add a Text widget with the name of our store ‘Himdeve Fashion’. Then the content attribute, where we add a basic info about the store. Finally, we define the actions attribute where we add the FlatButton widget. To press this button, the following method is called:
When a user opens a dialog, Flutter adds the dialog to the navigation stack. Therefore, if we want to close it, we call the Navigator pop() method to jump out of the last navigator path.
CircleAvatar
The second attribute of the Gesture Detector is the child attribute, which represents the hierarchy of other widgets. In our case, we will define a CircleAvatar widget here to create a circle around our logo.
We set the backgroundColor attribute to black and we set also the backgroundImage attribute to which we insert a NetworkImage widget that displays an image of our logo from the Internet.
UserAccountsDrawerHeader – decoration
The last attribute we define for UserAccountsDrawerHeader will be a decoration attribute that will represent the background of the drawer’s header. We put in it a BoxDecoration widget that has an image attribute where we create a DecorationImage widget. The DecorationImage widget also has an image attribute. In this attribute we insert the NetworkImage widget with the url image for our header. To adjust the layout of the image for the entire header area, we define the fit attribute to: BoxFit.cover.
ListTile
To add more items in the drawer, under the drawer header, we define the _buildPortfolioItem method with the BuildContext parameter, in where we return the ListTile widget.
ListTile is a single line of fixed height, which usually contains some text, as well as a leading or trailing icon.
In our case it will have the title attribute, where we set the name to ‘Portfolio’.
The attribute leading that represents the start-up icon and we set its value to the icon representing the portfolio.
Next, the attribute trailing that represents the end icon and we set it to the right arrow.
The last attribute we define here will be the onTap attribute. It is a callback method that is called when a Portfolio item is tapped.
First we call:
This command works just like with a dialog, so we jump out of the last path in the navigator, in our case from the drawer widget.
Basic navigation – Page Route
And then we call the command to switch the screens, in our case to switch to Portfolio widget.
We will call Navigator again with a BuildContext and this time we use its push method, which has the Route parameter. This parameter represents the new screen of our app, in our case the PortfolioPage widget. Navigator adds this widget to the navigation stack using the push method.
What is important to note is that the call for a navigator pop command must be defined before switching the screen to another widget by the navigator push method. Otherwise we will get an exception because we are already in the context of another widget.
Divider
The last method we create in Listview for Drawer will be _buildDivider(). This method returns the Divider widget, which is a thin horizontal line with padding on the sides. We will separate the Portfolio item with it. We set her color to white.
PortfolioPage
Under the pages folder we will create a new file portfolio_page.dart file, where we define the PortoflioPage class, which will inherit from the Stateless Widget. In the build method of this class, we will return the Scaffold widget to define an appbar widget so that we can navigate back in the Navigator stack using the back arrow in the top bar. We will set the appbar title to ‘Portfolio’ value. To see something on this page, we create a Text widget with the text ‘Portofolio’ in the center of the screen, using the Center widget.
Conclusion
And with this is our fourth part of this first series of Flutter Tutorials completed and of course you can find the complete source code on the githube.