Flutter Drawer when menu icon is tapped

You can copy paste run two full code below
Step 1: _DrawerScreenState remove Scaffold
Step 2: For drawer background color, you can wrap with Theme

class _DrawerScreenState extends State<DrawerScreen> {
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        canvasColor: Colors.blue[50],
      ),
      child: Drawer(

Step 3: Use DrawerScreen() in main.dart

SafeArea(
    child: Scaffold(
        drawer: DrawerScreen(),

Step 4: wrap Icons.menu with Builder and open with openDrawer()

Builder(
        builder: (context) => GestureDetector(
            onTap: () {
              Scaffold.of(context).openDrawer();
            },
            child: Icon(Icons.menu)),
      ),

working demo

full code main.dart

import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';
import 'drawer.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            drawer: DrawerScreen(),
            appBar: PreferredSize(
                child: Container(
                  color: Colors.white,
                  padding:
                      EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Builder(
                        builder: (context) => GestureDetector(
                            onTap: () {
                              Scaffold.of(context).openDrawer();
                            },
                            child: Icon(Icons.menu)),
                      ),
                      Text(
                        'Appbar',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      Icon(Icons.search)
                    ],
                  ),
                ),
                preferredSize: Size.fromHeight(40)),
            backgroundColor: Hexcolor('#e9f1fe'),
            body: Center(
              child: Text('Experimenting drawer'),
            )));
  }
}

full code drawer.dart

import 'package:flutter/material.dart';

class DrawerScreen extends StatefulWidget {
  @override
  _DrawerScreenState createState() => _DrawerScreenState();
}

class _DrawerScreenState extends State<DrawerScreen> {
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        canvasColor: Colors.blue[50],
      ),
      child: Drawer(
          child: Column(
            children: [
              ListTile(
                leading: CircleAvatar(
                  radius: 28,
                  backgroundColor: Colors.blueGrey,
                  child: CircleAvatar(
                    radius: 50,
                    backgroundImage: AssetImage('assets/images/joker.jpg'),
                  ),
                ),
                title: Text(
                  'Joaquin Phoenix',
                  style: TextStyle(
                    color: Colors.black,
                    fontFamily: 'Roboto',
                    fontWeight: FontWeight.bold,
                    fontSize: 14,
                  ),
                ),
                subtitle: Text(
                  "You wouldn't get it",
                  style: TextStyle(
                      color: Colors.black,
                      fontFamily: 'Roboto',
                      fontWeight: FontWeight.w400,
                      fontSize: 10.0),
                ),
              )
            ],
          )),
    );
  }
}