simple-drawer

readme.md

simple-drawer

Created with <3 with dartpad.dev.

main.dart

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(),
        drawer: const Drawer(child: MyDrawer()),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

enum MenuItem {
  font("Change Font",
      ['Commic Sans', 'Product Sans', 'Monserrat', 'ubuntu', 'unbounded']),
  theme("Change Theme", ['dark', 'light']),
  metrics("Change Metrics", ['small', 'medium', 'large']);

  final String label;
  final List<String> items;

  const MenuItem(this.label, this.items);
}

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

  @override
  State<MyDrawer> createState() => _MyDrawerState();
}

class _MyDrawerState extends State<MyDrawer> {
  MenuItem? selectedMenu;
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child:
                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
              const SizedBox(height: 20),
              Text(
                'Settings',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
              const SizedBox(height: 60),
              Container(height: 1.0, color: Colors.grey),
              const SizedBox(height: 60),
              if (selectedMenu != null)
               Column(
                 crossAxisAlignment: CrossAxisAlignment.start, 
               children: [
                 BackButton(onPressed: (){
                    setState(() {
                          selectedMenu = null;
                        });
                 },),
                 
                  for (var item in selectedMenu!.items)
                  InkWell(
                      onTap: () {
                        print(item);
                        Navigator.pop(context);
                      },
                      child: Padding(
                          padding: const EdgeInsets.all(10),
                          child: Text(
                            item,
                            style: Theme.of(context).textTheme.bodySmall,
                          )))
               ])
              else
                for (var item in MenuItem.values)
                  InkWell(
                      onTap: () {
                        setState(() {
                          selectedMenu = item;
                        });
                      },
                      child: Padding(
                          padding: const EdgeInsets.all(10),
                          child: Text(
                            item.label,
                            style: Theme.of(context).textTheme.bodySmall,
                          )))
            ])));
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      'Hello, World!',
      style: Theme.of(context).textTheme.headlineSmall,
    );
  }
}