flutterflutter-drawer

How can i use flutter drawer menu in page routing?


i am new to flutter also coding.

what i want to do:

i created pages, routes, drawer; but i couldn't add drawer to pages and also in the Builder(main.dart), i think i have some mistakes.

main.dart is like this:

import 'package:flutter/material.dart';
import 'package:letter_app/screens/user/postbox.dart';
import 'package:letter_app/screens/user/unread.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  int selectedMenuItem = 0;
  final pageOptions = [
    PostBox(),
    Unread(),
  ];

  Widget buildDrawer(BuildContext context) {
    return Drawer(
      child: ListView(
        children: <Widget>[
          DrawerHeader(
            child: Text('Drawer Header'),
            decoration: BoxDecoration(),
          ),
          ListTile(
            title: Text('Unread'),
            onTap: () {
              Navigator.of(context)
                  .push(MaterialPageRoute(builder: (context) => new Unread()));
              Navigator.pop(context);
            },
          ),
          ListTile(
            title: Text('Post Box'),
            onTap: () {
              Navigator.of(context)
                  .push(MaterialPageRoute(builder: (context) => new PostBox()));
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'New App',
      theme: ThemeData.dark(),
      routes: <String, WidgetBuilder>{
        '/screens/user/unread.dart': (BuildContext context) => Unread(),
        '/screens/user/postbox.dart': (BuildContext context) => PostBox(),
      },
      home: Builder(
        builder: (context) => Scaffold(
          drawer: buildDrawer(context),
          body: Container(child: pageOptions[selectedMenuItem]),
        ),
      ),
    );
  }
}

unread.dart is like this:


import 'package:flutter/material.dart';

class Unread extends StatefulWidget {
  @override
  _UnreadState createState() => _UnreadState();
}

class _UnreadState extends State<Unread> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: ,
      appBar: AppBar(
        title: Text('Welcome to Flutter'),
      ),
      body: Center(
        child: Text('Unread'),
      ),
    );
  }
}


Solution

  • Just define the buildDrawer widget in a seperate dart file, import the file. Then, just assign it to every Scaffold.