Flutter Drawer Demo

main.dart

// To learn more visit - https://www.akshatapp.com/tutorials/flutter-tutorial

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Drawer Demo',
      theme: ThemeData(primarySwatch: Colors.purple),
      routes: {
        '/': (BuildContext context) => MyHomePage(),
        '/login': (BuildContext context) => LoginPage(),
        '/settings': (BuildContext context) => SettingsPage(),
        '/about': (BuildContext context) => AboutPage(),
        '/profile': (BuildContext context) => ProfilePage(),
      },
      onUnknownRoute: (RouteSettings settings) {
        return MaterialPageRoute(
            builder: (BuildContext context) => MyHomePage());
      },
    );
  }
}

// Page 1 - About Page

class AboutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('About Page'),
      ),
      body: Center(
        child: Icon(
          Icons.info,
          color: Colors.blue,
          size: 50.0,
        ),
      ),
    );
  }
}

// Page 2 - Settings Page

class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings Page'),
      ),
      body: Center(
        child: Icon(
          Icons.settings,
          color: Colors.black.withOpacity(0.7),
          size: 50.0,
        ),
      ),
    );
  }
}

// Page 3 - Login Page

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login Page'),
      ),
      body: Center(
          child: RaisedButton(
        child: Text('LOGIN'),
        onPressed: () {
          Navigator.pushReplacementNamed(context, '/');
        },
      )),
    );
  }
}

// Page 4 - Profile Page

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile Page'),
      ),
      body: Center(
        child: Icon(
          Icons.person_outline,
          color: Colors.black,
          size: 50.0,
        ),
      ),
    );
  }
}

// Page 5 - Home Page

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        drawer: AppDrawer(),
        appBar: AppBar(
          title: Text('Flutter Drawer Demo'),
        ),
        body: Center(
          child: Icon(
            Icons.home,
            color: Colors.purple,
            size: 50.0,
          ),
        ));
  }
}

// Drawer

class AppDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: <Widget>[
          UserAccountsDrawerHeader(
            arrowColor: Colors.black,
            decoration: BoxDecoration(color: Colors.transparent),
            onDetailsPressed: () {
              Navigator.pushNamed(context, '/profile');
            },
            accountName: Text('AkshatApp',
                style: TextStyle(
                  color: Colors.black.withOpacity(0.7),
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                )),
            accountEmail: Text('akshatapp.com',
                style: TextStyle(
                  color: Colors.black.withOpacity(0.7),
                  fontSize: 14.0,
                  fontWeight: FontWeight.bold,
                )),
            currentAccountPicture: CircleAvatar(
              child: Icon(
                Icons.person,
                size: 50.0,
              ),
            ),
            otherAccountsPictures: <Widget>[
              CircleAvatar(
                child: Icon(Icons.person_outline),
              ),
            ],
          ),
          Container(
            padding: EdgeInsets.all(15.0),
            child: Text(
              'Flutter Drawer Widget',
              style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
                color: Colors.black.withOpacity(0.7),
              ),
            ),
          ),
          ListTile(
            leading: Icon(
              Icons.info_outline,
              color: Colors.black.withOpacity(0.7),
            ),
            title: Text(
              'ABOUT',
              style: TextStyle(
                color: Colors.black.withOpacity(0.7),
                fontSize: 14.0,
                fontWeight: FontWeight.bold,
              ),
            ),
            onTap: () {
              Navigator.pushNamed(context, '/about');
            },
          ),
          ListTile(
            leading: Icon(
              Icons.settings,
              color: Colors.black.withOpacity(0.7),
            ),
            title: Text(
              'SETTINGS',
              style: TextStyle(
                color: Colors.black.withOpacity(0.7),
                fontWeight: FontWeight.bold,
                fontSize: 14.0,
              ),
            ),
            onTap: () {
              Navigator.pushNamed(context, '/settings');
            },
          ),
          ListTile(
            leading: Icon(
              Icons.exit_to_app,
              color: Color(0xFFD50000),
            ),
            title: Text(
              'LOGOUT',
              style: TextStyle(
                color: Color(0xFFD50000),
                fontSize: 14.0,
                fontWeight: FontWeight.bold,
              ),
            ),
            onTap: () {
              Navigator.pushReplacementNamed(context, '/login');
            },
          ),
        ],
      ),
    );
  }
}