1分でできる、ExtensionTileを使ったアコーディオン付きDrawer

自分の力一つでアプリをリリースしたいな、と思い作り始めた自己管理アプリでドロワーについて少し復習になったので備忘録がてら書き記しておきます。

（アプリの機能詳細は決めきれていません笑）

プロダクトを作るにあたって、使いたい技術を先に決めてそれに沿わせるようにして実装する内容を決めていますので没になる可能性もあります

Drawerとは

appbarの左側にあるハンバーガーメニューを押すと右から｀ヌンッ｀と出てくるアレです。

実際のコード

class ManageDrawer extends StatelessWidget {
  const ManageDrawer({super.key});

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          DrawerHeader(
            decoration: BoxDecoration(
              color: Theme.of(context).colorScheme.secondary,
            ),
            child: const Text(
              'Manage Us',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
              ),
            ),
          ),
          ListTile(
            title: const Text('Top'),
            leading: const Icon(Icons.home),
            onTap: () {
              context.go('/top');
            },
          ),
          ExpansionTile(
            title: const Text("Private"),
            leading: const Icon(Icons.person),
            textColor: Colors.white,
            iconColor: Colors.white,
            backgroundColor: Theme.of(context).colorScheme.secondary,
            children: [
              ListTile(
                title: const Text('Home'),
                textColor: Colors.white,
                onTap: () {
                  context.go('/home');
                },
              ),
              ListTile(
                title: const Text('Profile'),
                textColor: Colors.white,
                onTap: () {
                  context.go('/profile');
                },
              ),
            ],
          ),
          ExpansionTile(
            title: const Text("Teams"),
            leading: const Icon(Icons.language_sharp),
            textColor: Colors.white,
            iconColor: Colors.white,
            backgroundColor: Theme.of(context).colorScheme.secondary,
            children: [
              ListTile(
                title: const Text('teams'),
                textColor: Colors.white,
                onTap: () {
                  context.go('/teams');
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

簡単なコードなのですか階層ちっくに説明すると

Drawer
	-ListView
		-ListTile
		-ExpansionTile
			-ListTile
			-ListTile
		-ExpansionTile
			-ListTile

みたいな構造になっています。

アコーディオンについて

その中でアコーディオンの役割を果たしているのが ExpansionTileで

ExpansionTile(
            title: const Text("Private"),
            leading: const Icon(Icons.person),
            textColor: Colors.white,
            iconColor: Colors.white,
            backgroundColor: Theme.of(context).colorScheme.secondary,
            children: [
              ListTile(
                title: const Text('Home'),
                textColor: Colors.white,
                onTap: () {
                  context.go('/home');
                },
              ),
              ListTile(
                title: const Text('Profile'),
                textColor: Colors.white,
                onTap: () {
                  context.go('/profile');
                },
              ),
            ],
          ),

このように書くことでDrawerの中に階層を作ることができます！色味などを自分好みに変えながら使ってもらえれば嬉しいです！

詳しい書き方は以下を参考
ExpansionTileのプロパティ