Cajón de aleteo cuando se toca el ícono del menú

Question

Actualmente estoy probando el widget de cajón. He creado una barra de aplicaciones con un icono de menú de hamburguesa, texto de título y un icono de búsqueda. Aquí está mi código:

import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.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(
            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>[
                      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'),
            )));
  }
}

'

Aquí está la salida:

,

También tengo un archivo de dardos separado para un cajón personalizado que quiero que se muestre cuando se toca el icono del menú de hamburguesas. ¿Cómo puedo hacer eso posible?

Aquí está el código para el cajón personalizado:

    import 'package:flutter/material.dart';

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

class _DrawerScreenState extends State<DrawerScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: 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),
            ),
          )
        ],
      )),
      backgroundColor: Colors.blue[50],
    );
  }
}

Answer 1

Puede copiar y pegar ejecutar dos códigos completos a continuación
Paso 1: _DrawerScreenStateeliminar Scaffold
Paso 2: Para el drawercolor de fondo, puede envolver conTheme

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

Paso 3: usar DrawerScreen()enmain.dart

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

Paso 4: envoltura Icons.menucon Buildery abierto conopenDrawer()

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

demostración de trabajo

código completo 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'),
            )));
  }
}

código completo 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),
                ),
              )
            ],
          )),
    );
  }
}