Therefore, you can use DartPad to follow along. This demo app doesn’t depend on any third party libraries. The navigation will allow users to switch between pages for houses, apartments, townhomes, and the user’s favorites list. We’ll use what we’ve learned about the Flutter Drawer widget to enhance the app by including a navigation. Demo Appįor our demo app, we’ll improve the real estate app that we created in the previous post, The Flutter Visibility Widget: Show and Hide Content.

And for each ListTile, we can set the onTap property to respond to the user’s selection of a navigation link. We use the ListTile widget, which provides a layout that includes an icon and some text, for the navigation links. For the header, we use the UserAccountsDrawerHeader widget that provides a simple layout for user profile information. The header comes first in the ListView, followed by all the navigation links. Furthermore, the ListView will scroll if the list is too long to fit on the screen. The ListView enables us to easily add widgets in a column layout. In this example, we used a ListView widget as the child widget. The Drawer widget has a child property where you can place all the content for the drawer. Import 'package:temple/globals/settings/router/utils/router_utils.Builder: (BuildContext context) => const MyHomePage( Import 'package:go_router/go_router.dart' Maybe we'll want to add icons like shopping cart, bell icon, and more depending on the page, we are on.Īpp_bar import 'package:flutter/material.dart' We'll also need a person icon somewhere in the app bar, which we'll trigger the custom drawer we'll create later. Moreover, we'll have to use navigation features as well.

In doing so we'll have to go to a sub-page like mentioned previously. Let's say we have search functionality, which is triggered by clicking the search icon.

Is the current screen a main screen or sub-screen? If it's a sub-screen we'll have to display the back arrow while hiding it on the main screen. Touch lib/globals/widgets/app_bar/app_bar.dartīefore we work on the app bar let's consider some features our app bar will have and how can we make it more flexible. # Cursor on the root folder # Create widgets and app_bar folder mkdir lib/globals/widgets lib/globals/widgets/app_bar First, let's create a folder and file for our app bar inside the globals folder. You'll find the source code up until now from this repo. But we'll be using a drawer to manage navigation tasks related to the User Account, for instance, logout, user profile settings, order history, etc. As far as navigation goes, we are not going to use a drawer instead, we'll be using the bottom navigation bar. So usually, you don't have to make custom ones.įor an app bar, as the app grows dynamic content also increases, hence it's better to write it once and use it everywhere with slight modification. All of these three widgets a readily available in Flutter SDK. Three global widgets we're building are App Bar, Bottom Navigation Bar, and Drawer. In this section, we'll work on three widgets that'll be part of every screen in the app. Before this, we made a splash screen, created an onboard screen experience for app users, and defined a global theme for our app. This here is the 4 th part of the series. Hello and Welcome, I am Nibesh Khadka from Khadka's Coding Lounge. Find out how to create custom and dynamic widgets like App Bar, Bottom Nav Bar, and the Alert Dialog box that works as a Drawer.

Flutter scaffold drawer