Navigation Drawer in Contents Demo

main.dart

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) => _Home();
}

/*
 * Can not get callback Drawer Open and Close !
 *
 * Detect Flutter Drawer Open and Close | by Arathi Shankri | Flutter Community | Medium https://medium.com/flutter-community/detect-flutter-drawer-open-and-close-21a2250b3606
 * Add detection of drawer open and close in Scaffold widget as a callback method. by bikcrum · Pull Request #67249 · flutter/flutter https://github.com/flutter/flutter/pull/67249
 */

final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

enum HomeLayout { slim, wide }

class _Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<_Home> with SingleTickerProviderStateMixin, WidgetsBindingObserver {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(vsync: this, duration: const Duration(milliseconds: 300));
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final mediaWidth = MediaQuery.of(context).size.width;
    final layout = mediaWidth >= 720 ? HomeLayout.wide : HomeLayout.slim;
    
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: AnimatedIcon(
            icon: AnimatedIcons.menu_close,
            progress: _animationController,
          ),
          onPressed: () {
            if (_scaffoldKey.currentState.isDrawerOpen) {
              _animationController.reverse();
              Navigator.pop(context);
            } else {
              if (_animationController.status != AnimationStatus.forward) {
                _animationController.forward();
              }
              _scaffoldKey.currentState.openDrawer();
            }
          },
        ),
        title: Container(
          child: Text('Drawer Demo'),
        ),
        actions: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: (layout == HomeLayout.wide)
                ? OutlineButton(
                    child: Text('Help'),
                    onPressed: () {},
                  )
                : IconButton(icon: const Icon(Icons.help), onPressed: () {}),
          ),
        ],
        automaticallyImplyLeading: false,
      ),
      body: HomeDrawer(body: Center(child: Text('Can not get callback Drawer Open and Close !'))),
    );
  }
}

class HomeDrawer extends StatelessWidget {
  HomeDrawer({Key key, @required this.body}) : super(key: key);

  final Widget body;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      drawer: Container(
        // width: 200,
        child: Drawer(
          child: ListView(
            children: <Widget>[
            ListTile(
              title: Text('Acount'),
              onTap: () {
                  showDialog<bool>(
                    context: context,
                    builder: (BuildContext context) {
                      return AlertDialog(
                      content: const Text('Do you want logout?'),
                      actions: <Widget>[
                        FlatButton(
                          child: const Text('No'),
                          onPressed: () {
                            Navigator.of(context).pop(false);
                          },
                        ),
                        FlatButton(
                          child: const Text('Yes'),
                          onPressed: () {
                            Navigator.of(context).pop(true);
                          },
                        ),
                      ],
                    );
                  },
                );
              },
            ),
              ListTile(
                title: Text('Terms of service'),
                onTap: () {
                  // Dummy Navigation
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('About'),
                onTap: () {
                  showAboutDialog(
                    context:context,
                    applicationName: 'Navigation Drawer',
                    applicationVersion: '1.0.0',
                  );
                },
              ),
            ],
          ),
        ),
      ),
      body: body,
    );
  }
}