custom drawer with flutter

custom_drawer.dart

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const CustomDrawer(),
    );
  }
}

class CustomDrawer extends StatefulWidget {
  const CustomDrawer({super.key});

  @override
  State<CustomDrawer> createState() => _CustomDrawerState();
}

class _CustomDrawerState extends State<CustomDrawer> {
  late double maxPosition;
  double position = 0.0;

  @override
  void initState() {
    super.initState();
    final mediaQuery = (context
            .getElementForInheritedWidgetOfExactType<MediaQuery>()!
            .widget as MediaQuery)
        .data;

    maxPosition = mediaQuery.size.width - 40;
    position = maxPosition;
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (details) {
        setState(() {
          position =
              (position + details.delta.dx * 1.5).clamp(0.0, maxPosition);
        });
      },
      onPanEnd: (_) {
        setState(() {
          position = (position < (maxPosition / 2)) ? 0.0 : maxPosition;
        });
      },
      child: Scaffold(
        backgroundColor: const Color(0xFFE6E6E6),
        body: Stack(
          children: <Widget>[
            Container(
              color: Colors.red,
              padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
            ),
            AnimatedPositioned(
              duration: const Duration(milliseconds: 200),
              curve: Curves.linear,
              top: 0,
              left: position,
              child: Container(
                color: Colors.blue,
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
              ),
            ),
          ],
        ),
      ),
    );
  }
}