【Flutter】Drawerの使い方｜スライド式のサイドメニューを実装する

2024年1月30日

「スライド式のサイドメニューを実装したい」

こんな時に便利なのが Drawer ウィジェットです。

Drawerを使用することでスライド式のサイドメニューを実装できます。DrawerとListViewを組み合わせることで綺麗にメニューを表示できます。

それではDrawerの基本的な使い方とカスタマイズ方法について解説していきます！

基本的な使い方

Drawerの基本的な使い方について解説します。

左側からスライドするサイドメニューを表示するにはScaffoldのdrawerプロパティにDrawerを渡し、Drawerのchildプロパティにコンテンツとなるウィジェットを渡します。一般的に子ウィジェットにはListViewが使用されます。

ScaffoldにAppBarを実装している場合はAppBarの左側にハンバーガーアイコンが追加されボタンを押すとサイドメニューが表示されます。

Scaffold(
  appBar: AppBar(title: const Text('Flutter')),
  drawer: Drawer(
    child: MyWidget(),
  ),
),

画像のサンプルコード

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

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

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter')),
      drawer: Drawer(
        child: ListView(
          children: [
            ListTile(
              leading: const Icon(Icons.message),
              title: const Text(
                'Messages',
              ),
              onTap: () {},
            ),
            ListTile(
              leading: const Icon(Icons.account_circle),
              title: const Text('Profile'),
              onTap: () {},
            ),
            ListTile(
              leading: const Icon(Icons.settings),
              title: const Text('Settings'),
              onTap: () {},
            ),
          ],
        ),
      ),
    );
  }
}

カスタマイズ方法

続いてDrawerのカスタマイズ方法について解説します。

ヘッダーを付ける

ヘッダーを付けるにはListViewの最初の要素にDrawerHeaderウィジェットを追加します。

DrawerHeaderのchildプロパティにヘッダーコンテンツ、decorationプロパティにBoxDecorationウィジェットを渡してヘッダーの装飾ができます。

Drawer(
  child: ListView(
    children: [
      DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
        child: Text('Drawer Header'),
      ),
      MyWidgetA(),
      MyWidgetB(),
    ],
  ),
),

背景色

Drawerの背景色はbackgroundColorプロパティで設定できます。

Drawer(
  backgroundColor: Colors.blue,
  child: MyWidget()
),

横幅

Drawerの横幅はwidthプロパティで設定できます。

Drawer(
  width: 250,
  child: MyWidget()
),

角丸

Drawerを角丸にするにはshapeプロパティで設定できます。

まずはshapeプロパティにRoundedRectangleBorderを渡します。次にRoundedRectangleBorderのborderRadiusプロパティにBorderRadius.circularを渡し、BorderRadius.circularに数値を渡して角丸を調整します。

Drawer(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20),
  ),
  child: MyWidget()
),

右側に配置する

Drawerを右側に配置するにはScaffoldのendDrawerプロパティにDrawerを渡します。

Scaffold(
  appBar: AppBar(title: const Text('Flutter')),
  endDrawer: Drawer(),
),

サイドバーをボタンで非表示する

Drawerをボタンを押して非表示するにはNavigator.pop(context)を呼び出します。

ListTile(
  leading: const Icon(Icons.message),
  title: const Text('Messages'),
  onTap: () {
    Navigator.pop(context);
  },
),

まとめ

今回はDrawerの基本的な使い方とカスタマイズ方法について解説しました。

Drawerを使用することでスライド式のサイドメニューを実装できます。DrawerとListViewの相性が良いのでぜひ一緒に使ってみてください。

参考サイト