ドローワーメニュ(Drawer)覚書

概要

アプリの左上に「三」ってある、あのメニューです。ハンバーガーボタンと呼ぶらしい。見えなくもないね。

サンプルコード

statefulWidgetの場合は、stateを継承したオブジェクトのScaffoldのappBarに、以下のようにdrawer:タグを追加する。

.......
   return Scaffold(
      appBar: AppBar(title: const Text("Calc Date")),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            DrawerHeader(
              child: Text('Drawer Header'),
              decoration: BoxDecoration(color: Colors.blue),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap: () {
                // Do something
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: () {
                // Do something
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
      body: Center(
.........

ドローワーメニューのアイコンの変え方

ドローワーメニューを開くボタンはデフォルトではハンバーガーボタンになっている。
このアイコンを変更するためには、AppBarを変更する必要がある。

AppBarを以下のように設定するとアイコンが変わる。

appBar:
  AppBar(
    leading:
      Builder(
        builder: (context) => IconButton(
          icon: Icon(Icons.settings),
          onPressed: (){
            Scaffold.of(context).openDrawer();
          }
        ), // IconButton
      ), // Builder
    title: Text('Drawer Menu'), // タイトル名
    centerTitle: true, // タイトルの表示位置
  ), //AppBar

敢えて変える必要はありません。😁