mini button to open drawer-like panel in flutter

I wish to place a mini button on the left side of the body of the app screen to be used to open a mini drawer in Flutter. To be able to figure it out, I prepared the following image:

As seen, when the user taps on the mini button, a mini drawer-like panel comes in and when the user clicks again on the same button, it closes the panel.

Thank you

This code will allow you to use the endDrawer as your mini drawer, and your main drawer will be there as well.

You can look on the web to customize the end drawer's UI as per your needs.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: TwoDrawers(),
      ),
    );
  }
}

class TwoDrawers extends StatelessWidget {
  const TwoDrawers({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Mini Drawer"),
        actions: const [SizedBox()],
      ),
      drawer: Drawer(
        child: Container(
          color: Colors.blue,
          child: const Center(
            child: Text(
              "Main Drawer",
              style: TextStyle(color: Colors.white, fontSize: 30),
            ),
          ),
        ),
      ),
      endDrawer: SizedBox(
        height: 300,
        child: Drawer(
          elevation: 0,
          backgroundColor: Colors.indigo,
          child: Row(
            children: [
              IconButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                icon: const Icon(Icons.chevron_right),
                color: Colors.white,
              ),
              Container(
                width: 240,
                color: Colors.indigo,
                child: const Center(
                  child: Text(
                    "Mini Drawer",
                    style: TextStyle(color: Colors.white, fontSize: 30),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
      body: Stack(
        children: [
          Positioned(
            height: 40,
            top: 250,
            right: -30,
            child: SizedBox(
              child: Builder(
                builder: (context) {
                  return ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor:
                          const MaterialStatePropertyAll(Colors.indigo),
                      shape: MaterialStatePropertyAll(
                        RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10),
                        ),
                      ),
                      padding: const MaterialStatePropertyAll(
                        EdgeInsets.only(right: 30),
                      ),
                    ),
                    onPressed: () {
                      Scaffold.of(context).openEndDrawer();
                    },
                    child: const Icon(Icons.chevron_left),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Some snapshots:

Screen	Main Drawer	Mini Drawer