Creare un hamburger menu in Flutter

Creare un hambruger menu in Flutter è veramente molto semplice.

Ma prima di tutto specifichiamo che in ambito Flutter viene più spesso identificato come drawer.

Cominciamo proprio con il creare il widget che ci farà da menu; io l'ho messo dentro ad una sotto cartella widgets:

import 'package:book_flutter/screens/authors_screen.dart';
import 'package:flutter/material.dart';

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

  Widget buildListTile(String title, IconData icon, VoidCallback tapHandler) {
    return ListTile(
      leading: Icon(
        icon,
        size: 26,
      ),
      title: Text(
        title,
      ),
      onTap: tapHandler,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          Container(
            height: 120,
            width: double.infinity,
            padding: const EdgeInsets.all(10),
            alignment: Alignment.centerLeft,
            child: Text(
              'Menu!',
              style: TextStyle(
                  fontWeight: FontWeight.w900,
                  fontSize: 20,
                  color: Theme.of(context).primaryColor),
            ),
          ),
          const SizedBox(
            height: 1,
          ),
          buildListTile(
            'Autori',
            Icons.person,
            () {
            },
          ),
        ],
      ),
    );
  }
}

Alla fine della fiera è una semplice lista.

Poi nella nostra schermata:

import 'package:book_flutter/widgets/main_menu_widget.dart';
import 'package:flutter/material.dart';

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

  @override
  State<BooksScreen> createState() => _BooksScreenState();
}

class _BooksScreenState extends State<BooksScreen> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('MP Book'),
      ),
      drawer: const MainMenu(),
      body: Column(),
    );
  }
}

Come vedete abbiamo impostato il parametro drawer; questo farà apparire il classico hamburger menu.

Infine il nostro "main":

import 'dart:core';
import 'package:book_flutter/screens/authors_screen.dart';
import 'package:book_flutter/screens/books_screen.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MP Book',
      home: const BooksScreen(),
    );
  }
}

Enjoy!