Flutterでのハンバーガーメニューの基礎

Flutterでハンバーガーメニュー（ドロワー、Drawer）を実装する際の基本的な知識をまとめました。

基本のハンバーガーメニュー

ハンバーガーメニューを表示するにはDrawerを使います。Scaffoldのdrawerに設定します。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        drawer: Drawer(  // ハンバーガーメニューの本体
          child: ListView(
            children: [
              const DrawerHeader(  // メニューのヘッダー
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Text(
                  'Drawer Header',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                  ),
                ),
              ),
              ListTile(  // メニューの各項目
                title: const Text('Item 1'),
                onTap: () {
                  debugPrint('Item 1');
                },
              ),
            ],
          ),
        ),
        appBar: AppBar(  // ハンバーガーメニューのアイコン
          title: const Text('MyApp'),
        ),
        body: Container(),
      ),
    );
  }
}

ハンバーガーメニューアイコンはAppBarをつけると、勝手に表示されます。AppBarを記載しなくても、画面端からスワイプすると表示されます。

右側に表示

Drawerは標準では左側に表示されます。右側に表示するには、ScaffoldのendDrawerに設定します。ハンバーガーメニューのアイコンも自動で右側に表示されるようになります。

Scaffold(
    endDrawer: Drawer( // 右側に表示
// ...

ヘッダーの高さを変える

標準ではメニューのヘッダーが大きすぎるように見えます。これはDrawerHeaderをSizedBoxで囲えば任意の高さに変えられます。

      home: Scaffold(
        endDrawer: Drawer(
          child: ListView(
            children: [
              const SizedBox(  // SizedBoxで囲う
                height: 100,
                child: DrawerHeader(
// ...

https://stackoverflow.com/a/51769786/7390651

まとめ

Flutterでのハンバーガーメニュー実装の基礎をまとめました。ハンバーガーメニューはDrawerを使えば実装でき、Scaffoldのdrawerに設定します。右側に表示するにはendDrawerに設定します。DrawerHeaderをSizedBoxで囲えばヘッダーの高さを変えられます。