Flutterでハンバーガーメニューを作成します。

まずは、AppBarを作成した画面を作成します。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
    );
  }
}

image2

appBarの下に、drawerを追加します。

drawerには、Drawerを設定します。

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(), drawer: Drawer());
  }
}

image3

ハンバーガーメニューのアイコンが表示されました。

アイコンをクリックすると、

image4

ハンバーガーメニューが表示されました。

ハンバーガーメニューの内容を作成するには、Drawerの中にListViewを設定します。

ListViewの中にDrawerHeaderを設定します。

Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(),
      drawer: Drawer(
        child: ListView(
          children: const [
            DrawerHeader(
                decoration: BoxDecoration(color: Colors.yellowAccent),
                child: Text("My Home Page")),
          ],
        ),
      ));
}

ブラウザで確認すると、

image5

ハンバーガーメニューのヘッダーが表示されました。

メニューを作成するには、ListTileを設定します。

drawer: Drawer(
  child: ListView(
    children: const [
      DrawerHeader(
          decoration: BoxDecoration(color: Colors.yellowAccent),
          child: Text("My Home Page")),
      ListTile(title: Text("menu1")),
      ListTile(title: Text("menu2")),
      ListTile(title: Text("menu3"))
    ],
  ),
)

ブラウザで確認すると、

image6

ハンバーガーメニューの中にリストが表示されました。

現在、AppBarにあるハンバーガーメニューアイコンが左にあります。

ハンバーガーメニューアイコンを右にしたい場合は、drawerendDrawerへ修正します。

endDrawer: Drawer(
  child: ListView(
    children: const [
      DrawerHeader(
          decoration: BoxDecoration(color: Colors.yellowAccent),
          child: Text("My Home Page")),
      ListTile(title: Text("menu1")),
      ListTile(title: Text("menu2")),
      ListTile(title: Text("menu3"))
    ],
  ),
)

ブラウザで確認してみましょう。

image7

image8

ハンバーガーメニューアイコンが右側になり、ハンバーガーメニューが右から出てきました。

ブログ一覧