How to create a simple Drawer programmatically in flutter either from right or left (using drawer or endDrawer) || Raymond Idu

Below is a preview of what we are going to build. onTap of the button the drawer slides out.

Here is our Main.dart, talking to Home() where all our functionalities is written.

import 'package:flutter/material.dart';

import 'home.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: Home(),
    );
  }
}

Here is our Home() it returns a blank scaffold(); which we are going to style

import 'package:flutter/material.dart';

class Home extends StatelessWidget {

  Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

Adding a container to the body of the scaffold, with Color(0XFF0DE232D).withOpacity(0.2), added a listview with some children

import 'package:flutter/material.dart';

class Home extends StatelessWidget {

  Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Color(0XFF0DE232D).withOpacity(0.2),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: ListView(children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                CircleAvatar(
//add your own image and make sure you specify the image directory in the pubspec.yaml file
                  backgroundImage: AssetImage('lib/images/ray.png'),
                ),
               Icon(Icons.more_vert),
              ],
            ),
            SizedBox(
              height: 350,
            ),
            Center(
                child: Text(
              'Drawer Tutorials by: Raymond Idu',
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
            ))
          ]),
        ),
      ),
    );
  }
}

At this point your output should look like the above. Lets add the drawer and other functionalities. Also define GlobalKey<ScaffoldState> _globalKey = GlobalKey(); and add _globalkey as key to the scaffold to control the state of the drawer. upon tap of the button which is controlled by gesturedetector, _globalKey.currentState!.openEndDrawer(); is executed to open the drawer, if you decided to user drawer instead of endDrawer remember to replace openEndDrawer with openDrawer inorder to open from the left. Here is the full code on the Home();

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  GlobalKey<ScaffoldState> _globalKey = GlobalKey();
  Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _globalKey,
//we are using endDrawer to position the drawer at the right, if we use drawer, it will be positioned at the left.
      endDrawer: Container(
        height: 793,
        width: 300,
        decoration: BoxDecoration(
            color: Colors.red.shade100,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10), bottomLeft: Radius.circular(10))),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10),
          child:
              Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
            SizedBox(
              height: 10,
            ),
            TextButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: Icon(Icons.close)),
            SizedBox(
              height: 30,
            ),
            Row(
              children: [
                Icon(Icons.search),
                SizedBox(
                  width: 10,
                ),
                Text('Search the internet',
                    style: TextStyle(fontWeight: FontWeight.bold))
              ],
            ),
            SizedBox(
              height: 20,
            ),
            Row(
              children: [
                Icon(Icons.chat),
                SizedBox(
                  width: 10,
                ),
                Text(
                  'Chat with Ray',
                  style: TextStyle(fontWeight: FontWeight.bold),
                )
              ],
            ),
            SizedBox(
              height: 20,
            ),
            Row(
              children: [
                Icon(Icons.branding_watermark),
                SizedBox(
                  width: 10,
                ),
                Text(
                  'Become a master',
                  style: TextStyle(fontWeight: FontWeight.bold),
                )
              ],
            ),
          ]),
        ),
      ),
      body: Container(
        color: Color(0XFF0DE232D).withOpacity(0.2),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: ListView(children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                CircleAvatar(
                  backgroundImage: AssetImage('lib/images/ray.png'),
                ),
                GestureDetector(
                    onTap: () {
                      _globalKey.currentState!.openEndDrawer();
                    },
                    child: Icon(Icons.more_vert))
              ],
            ),
            SizedBox(
              height: 350,
            ),
            Center(
                child: Text(
              'Drawer Tutorials by: Raymond Idu',
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
            ))
          ]),
        ),
      ),
    );
  }
}

At this point you should have the full functionality of the drawer in example the endDrawer.. Also Note i used Container as parameter instead of Drawer, you can use any widget.

If you have any questions kindly leave a comment below. Thanks

Cheers