Flutter Tutorial

Flutter Navigation Drawer Example

Hii Flutter developer in this Flutter tutorial, I am sharing how to make Navigation Drawer in a flutter. In this Semple example, we create a Flutter Navigation Drawer Example. Using Flutter you can make app for both platforms Android and iOS. The simple and fast way.

Now talk about Navigation Drawer in a flutter.

When I first created a flutter application with Navigation Drawer it like magic, thanks to flutter development team because with only one line of code we can already see the hare. Flutter Navigation Drawer Example.

Flutter: Creating Drawers

Let’s Start to Flutter Creating Drawers simple way and fast.

Flutter Navigation Drawer Example source

Main.Dart File Source Code.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(child: Text('My Page!')),
      drawer: Drawer(
        // Add a ListView to the drawer. This ensures the user can scroll
        // through the options in the drawer if there isn't enough vertical
        // space to fit everything.
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: <Widget>[
//            DrawerHeader(
//              child: Text('Drawer Header'),
//              decoration: BoxDecoration(
//                color: Colors.blue,
//              ),
//            ),
            UserAccountsDrawerHeader(
              accountName: Text("Parmit malik"),
              accountEmail: Text("codeplayonapp@gmail.com"),
              currentAccountPicture: CircleAvatar(
                backgroundColor:
                Theme.of(context).platform == TargetPlatform.iOS
                    ? Colors.blue
                    : Colors.white,
                child: Text(
                  "P",
                  style: TextStyle(fontSize: 40.0),
                ),
              ),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

 

Flutter Navi Drower Source Code  On GitHub

 

Read More Tutorial