↔️
Flutterでのハンバーガーメニューの基礎
Flutterでハンバーガーメニュー(ドロワー、Drawer)を実装する際の基本的な知識をまとめました。
基本のハンバーガーメニュー
ハンバーガーメニューを表示するにはDrawer
を使います。Scaffold
のdrawer
に設定します。
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
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(
// ...
まとめ
Flutterでのハンバーガーメニュー実装の基礎をまとめました。ハンバーガーメニューはDrawer
を使えば実装でき、Scaffold
のdrawer
に設定します。右側に表示するにはendDrawer
に設定します。DrawerHeader
をSizedBox
で囲えばヘッダーの高さを変えられます。
Discussion