Flutterでドローワーメニューの表示のさせ方を調べたのでまとめておきます。

ドローワーメニューを使ってみる

ドローワーメニューはScaffoldでDrawerのプロパティを設定することで使用することができます。

AppBarプロパティを定義していない場合、画面にヘッダが存在しないためドローワーメニューも表示されなくなるので注意が必要です。

サンプルコード

import 'package:flutter/material.dart';
void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  // 表示する Widget の一覧

  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,  // <- Debug の 表示を OFF
      home: Scaffold(
        appBar: AppBar(
          title: Text('Drawer Menu'), // タイトル名
          centerTitle: true, // タイトルの表示位置
        ),
        drawer: Drawer(
          child: ListView(
            children: <Widget>[
              DrawerHeader(
                child: Text('ヘッダー'),
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
              ),
              ListTile(

                title: Text("ボタン"),
                trailing: Icon(Icons.arrow_forward),
              ),
              ListTile(
                title: Text("hello"),
                subtitle: Text("あいさつ"),
                leading: Padding(
                  padding: const EdgeInsets.all(8.0), // マージンの設定
                  child: Icon(Icons.search), // アイコンの種類
                ),
                trailing: Icon(Icons.arrow_forward),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

ドローワーメニューに表示させる内容はListTileを変更することで簡単に変えることができました。

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

ドローワーメニューを開くボタンはデフォルトではハンバーガーボタンになっています。

このアイコンを変更するためには、AppBarを変更する必要があります。

先ほどのサンプルコードからAppBarを以下のように設定することでアイコンが変わります。

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

ちなみにドローワーメニューを右から表示させるEndDrawerを使用している場合は、openDrawerの部分をopenEndDrawerに変更することでアイコンを変更することができます。