In Flutter application or any mobile application, there are usually two options for navigation to multiple pages they are either by TabBar or by using Drawer Widget. We have already learned TabBar Widget in the previous part of the flutter series. Now its time to learn how to make a beautiful Drawer widget in Flutter.

Drawer Widget in Flutter

Drawer widget can be directly created inside the Scaffold widget. The drawer widget automatically creates the menu icon on the left side of the AppBar and before the title of AppBar. Now you can add content in it like ListView which shows the content in List like Home, Search, Category, Close, etc and now you can also add ListTile widget inside ListView widget to make to clickable or to navigate the users to another screen.

import "package:flutter/material.dart";

void main() => runApp(MaterialApp(home: MyApp(),));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Drawer Widget"),
      ),
      drawer: Drawer(
          child: ListView(
            children: [
              UserAccountsDrawerHeader( //It is use to decorate top of Drawer widget (Optional)
                accountName: Text("Subash Khatiwada"),
                accountEmail: Text("[email protected]"),
                currentAccountPicture: CircleAvatar(backgroundColor: Colors.black, child: Text("S")),
                decoration: BoxDecoration(color: Colors.blue),
              ),
              ListTile(title: Text("Page 1"), trailing: Icon(Icons.arrow_forward),
                onTap: (){
                  // Navigation.push()/pushNamed() method goes here. Below this Widget there is full explanation of how it works
                },
              ),
              ListTile(title: Text("Page 2"), trailing: Icon(Icons.arrow_forward),
                onTap: (){
                  // Navigation.push()/pushNamed() method goes here. Below this Widget there is full explanation of how it works
                },
              ),
              ListTile(title: Text("Close"), trailing: Icon(Icons.close),
                onTap: (){
                  // Navigation.pop() method goes here. Below this Widget there is full explanation of how it works
                },
              ),
            ],
          )
      ),
      body: Container(

      ),
    );
  }
}

How to Redirect Users to Another Screen in Flutter?

To redirect users to another screen/page in flutter application there are many methods but the simplest and most used method to route users from one screen to another is by using Navigator class and its rebuild methods like Navigator.push(), Navigator.pushNamed() and Navigator.pop().

Navigator.push(): Navigate the user from one screen to another using MaterialPageRoute

onTap: (){ //You can also use it inside onPressed
  Navigator.push(context, MaterialPageRoute(builder: (context) => NewPage())); 
  //Create NewPage class with either stateless or stateful widget within same file or another .dart file
},

Navigator.pushNamed(): It is also used to navigate users through different screens but should define the routes before using it

//First Specify the Routes
MaterialApp(
// Start the app with the "/" named route. In this case, the app starts on the ScreenOne
initialRoute: '/',
routes: {
  // When navigating to the "/" route, build the ScreenOne widget
  '/': (context) => ScreenOne(),
  // When navigating to the "/second" route, build the ScreenTwo widget
  '/second': (context) => ScreenTwo(),
  },
);
//Now put this inside buttons or other supported widgets to navigate users to Second screen
onPressed: () {
  // Navigate to the second screen using a named route
  Navigator.pushNamed(context, '/second');
}

Navigator.pop(): It is used to pop the screen or return the users to the previous screen

onPressed: () {
  Navigator.pop(context);
}
Note: SystemNavigator.pop() is used to exit the user from the app

Output

Drawer Widget in FLutter

Complete Flutter Series List: Click here 

Categories: Blog Tags: flutter, review2tech flutter series, drawer widget, routes in flutter, flutter android, flutter ios


2 Comments

  • Comment

    air max 97

    2020-08-10 05:13:42

    You made some first rate factors there. I appeared on the internet for the problem and located most individuals will go together with along with your website.

    Reply

  • Comment

    yeezys

    2020-08-14 13:25:14

    I and also my buddies have been checking out the good procedures on your site and then the sudden came up with an awful suspicion I never expressed respect to you for those secrets. All of the young men happened to be so stimulated to read them and have in effect truly been taking pleasure in these things. Thank you for truly being indeed considerate and then for figuring out such outstanding guides millions of individuals are really wanting to be informed on. Our own honest regret for not saying thanks to sooner.

    Reply

Leave a comment