How To Add Navigate To New Screens Drawer In Flutter App

admin_img Posted By Bajarangi soft , Posted On 30-10-2020

in apps that use Material Design, there are two primary options for navigation: tabs and drawers. When there is insufficient space to support tabs, drawers provide a handy alternative.

How To Add Navigate To New Screens Drawer In Flutter App

Navigate To New Screens Drawer
Complete Code For Navigate To New Screens Drawer In Flutter
main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: NavToNewPageDrawer()
    );
  }
}

class NavToNewPageDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue[900],
        title: Text("Navigate To New Screens Drawer"),
      ),
      drawer: Container(
        width: 250,
        child: Drawer(
          child: Container(
            color: Colors.blue[900],
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                child: ListView(padding: EdgeInsets.all(10.0), children: [
                  ListTile(
                    leading: Icon(Icons.home,color: Colors.white,),
                    title: Text("First Screen",style: TextStyle(color: Colors.white)),
                    onTap: () {
                      Navigator.of(context).push(
                          MaterialPageRoute<Null>(builder: (BuildContext context) {
                            return new FirstScreen();
                          }));
                    },
                  ),
                  ListTile(
                    leading: Icon(Icons.home,color: Colors.white,),
                    title: Text("Second Screen",style: TextStyle(color: Colors.white)),
                    onTap: () {
                      Navigator.of(context).push(
                          MaterialPageRoute<Null>(builder: (BuildContext context) {
                            return new SecondScreen();
                          }));
                    },
                  )
                ]),
              ),
            ),
          ),
        ),
      ),
      body: Center(
        child: Text('Main Body'),
      ),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("First Screen"),
      ),
      body: Center(
        child: RaisedButton(
          color: Colors.blue[900],
          child: Text("Go Back",style: TextStyle(color: Colors.white)),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: RaisedButton(
          color: Colors.blue[900],
          child: Text("Go Back",style: TextStyle(color: Colors.white),),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ),
    );
  }
}

Related Post