Abstraction and Navigation Drawer in Flutter-CodePudding

I would like to pull a 'drawer' out of my scaffold so it's not repeated.

I have multiple screens, and the drawer is in every scaffold and it doesn't do much apart from serving as the navigation. Naturally, I'd like to pull it out of the scaffold and put it into a new dart file and call it on the pages (within the scaffold).

drawer: Drawer(
        child: Material(
          color: Colors.cyan[100],
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              DrawerHeader(
                decoration: BoxDecoration(color: Colors.cyan[200]),
                child: Text('Profile Goes Here'),
              ),
              ListTile(
                  title: const Text('Main'),
                  onTap: () {
                    Navigator.pushNamed(context, '/landing');
                  }),
              ListTile(
                  title: const Text('Resume'),
                  onTap: () {
                    Navigator.pushNamed(context, '/resume');
                  }),
              ListTile(
                  title: const Text('Projects'),
                  onTap: () {
                    Navigator.pushNamed(context, '/projects');
                  }),
            ], // children of ListView
          ), // End of ListView
        ),
      ),

How could this be implemented?

CodePudding user response：

my_drawer.dart

class MyDrawer extends StatelessWidget {
  const MyDrawer ({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child:  Material(
        color: Colors.cyan[100],
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            DrawerHeader(
              decoration: BoxDecoration(color: Colors.cyan[200]),
              child: Text('Profile Goes Here'),
            ),
            ListTile(
                title: const Text('Main'),
                onTap: () {
                  Navigator.pushNamed(context, '/landing');
                }),
             //.......you can put others widget here

         ], // children of ListView
        ), // End of ListView
      ),
    );
  }
}

and now , MyDrawer is your component widget for drawer. you are free to use it in every Scaffold you have. no need to define every detail navigation, just set MyDrawer for drawer properties on scaffold.

eg:

landing.dart

import 'my_drawer.dart';

class landing extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF007B76),
      appBar: AppBar(),
      drawer: const MyDrawer(),  // just this , no need other
      body: Container()
    );
  }
}

repeat for another screen

resume.dart

import 'my_drawer.dart';

// better use Capital letters for every class name
class Resume extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF007B76),
      appBar: AppBar(),
      drawer: const MyDrawer(), // simple like this, 
      body: Text("this is Resume"),
    );
  }
}

component widget in flutter is reusable, you may call it if it match the type. just plug and play.