How To Set Up Navigation Drawer In Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 21-09-2020

The navigation drawer is one of the most common ways to provide a user with access to various destinations with an application. As Flutter can now be used to target other platform.

Navigation Drawer Layouts in Flutter

When you need to wrap multiple screen in a single screen and navigate through them, you have to use Drawer
We will start by editing the main.dart file
Main.dart

import 'package:flutter/material.dart';

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


class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Drawer Layout',
      theme: new ThemeData(
        primaryColor: Colors.black
      ),
      home: MyHomePage(title: "Drawer Layout with Tab"),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

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


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          centerTitle: true,
          title: Text('App Design'),
        ),
        drawer: Drawer(
          child: ListView(
            children: <Widget>[
              DrawerHeader(
                child: Text(
                  "Bajarangisoft.com!",
                  textAlign: TextAlign.justify,
                  textScaleFactor: 2.0, style: TextStyle(color: Colors.white),
                ),
                decoration: BoxDecoration(color: Colors.black),
              ),
              ListTile(
                leading: const Icon(Icons.home, color: Colors.black,),
                title: Text('Home'),
              ),
              ListTile(
                  leading: const Icon(Icons.photo, color: Colors.black,),
                  title: Text('Gallery')
              ),
              ListTile(
                  leading: const Icon(Icons.slideshow,color: Colors.black,),
                  title: Text('Slideshow')
              )
            ],
          ),
        ),
      body: Center(
        child: Text('Drawer layout'),
      ),
    );
  }
}

Related Post