Flutter EndDrawerの初期アイコンを変更する方法

2024/03/06

DrawerやEndDrawerのアイコンはデフォルトが３本線のハンバーガーメニューになっているが、
このアイコンを変更する方法。

●対応方法（既にDrawerは準備されている前提）
１．Keyの削除と追加（Keyに関する理解が浅いのでまだ十分に説明できるレベルにない）

class MainScreen extends StatefulWidget {
  // const MainScreen({super.key});   // この行をコメントアウト

class _MainScreenState extends State<MainScreen> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();  // この行を追加

２．AppaBarにボタンを実装（下記の「Icon.setttings」を好きなボタンに設定する）
　　Drawerの場合は、leading、Enddrawerの場合は、actionsとなる。

    return Scaffold(
      key: _scaffoldKey,  　　　　　　　　　　　　　　　　　　　　  // ここに　Keyを設定。
      appBar: AppBar(
        title: const Text('Main'),
        actions: [　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
          IconButton(
            onPressed: () {
              _scaffoldKey.currentState!.openEndDrawer();
            },
            icon: const Icon(Icons.settings),
          ),
        ],
      ),
      drawer: Drawer(                    // これ以降は変更なし

●参考
https://api.flutter.dev/flutter/material/AppBar-class.html
https://www.youtube.com/watch?v=VObIUc5MeBY&ab_channel=OumSaokosal