BLOG
マテリアルデザイン3(Material Design3)シリーズ Side Sheets
Material design 3
2024.06.25
2024.06.26
1. 今回のテーマ
今回のテーマは、Material Design3のContainmentに属するSide Sheetsです。
Side Sheetsは、右から左に表示されるサイドメニューです。Side Sheetsと関連するコンポーネントとしてNavigation Drawerもあります。
2. サンプルコード
以下にSideSheetsnのサンプルコードを記載します。
SideSheetsは、ScaffoldのendDrawerにDrawerを指定します。
import 'package:flutter/material.dart';
class SideSheetsScreen extends StatefulWidget {
const SideSheetsScreen({super.key});
@override
State<SideSheetsScreen> createState() => _SideSheetsScreenState();
}
class _SideSheetsScreenState extends State<SideSheetsScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Side Sheets'),
),
endDrawer: const Drawer(),
);
}
}
3. カスタマイズ
3.1. アイコンの変更
アイコンの変更は、AppBarのactionsにアイコンを設定します。
import 'package:flutter/material.dart';
class SideSheetsScreen extends StatefulWidget {
const SideSheetsScreen({super.key});
@override
State<SideSheetsScreen> createState() => _SideSheetsScreenState();
}
class _SideSheetsScreenState extends State<SideSheetsScreen> {
final _scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: const Text('Side Sheets'),
),
actions: [
IconButton(
onPressed: () => _scaffoldKey.currentState?.openEndDrawer(),
icon: const Icon(Icons.more_vert),
),
],
endDrawer: const Drawer(),
);
}
}
3.2. メニューの作成
Side Sheetsのメニューを作成するには、DrawerのChildにウィジェットを作成します。
import 'package:flutter/material.dart';
class SideSheetsScreen extends StatefulWidget {
const SideSheetsScreen({super.key});
@override
State<SideSheetsScreen> createState() => _SideSheetsScreenState();
}
class _SideSheetsScreenState extends State<SideSheetsScreen> {
final _scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: const Text('Side Sheets'),
),
actions: [
IconButton(
onPressed: () => _scaffoldKey.currentState?.openEndDrawer(),
icon: const Icon(Icons.more_vert),
),
],
endDrawer: Drawer(
child: _buildSideSheets(),
),
);
}
Widget _buildSideSheets() {
return SafeArea(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ListView(
children: [
Row(
children: [
const Text(
'メニュー',
style: TextStyle(fontSize: 20),
),
const Spacer(),
IconButton(
onPressed: () => _scaffoldKey.currentState?.closeEndDrawer(),
icon: const Icon(Icons.close),
),
],
),
const Gap(16),
const Divider(),
const Gap(16),
ListTile(
title: const Text('メニュー1'),
onTap: () => _scaffoldKey.currentState?.closeEndDrawer(),
),
ListTile(
title: const Text('メニュー2'),
onTap: () => _scaffoldKey.currentState?.closeEndDrawer(),
),
const Divider(),
ListTile(
title: const Text('メニュー3'),
onTap: () => _scaffoldKey.currentState?.closeEndDrawer(),
),
ListTile(
title: const Text('メニュー4'),
onTap: () => _scaffoldKey.currentState?.closeEndDrawer(),
),
],
),
),
);
}
4. まとめ
今回のテーマは、Material Design3のContainmentに属するSide Sheetsについてご紹介しました。
基本的な実装は、Navigation Drawerと同じです。サイドメニューとして表示したい場合に活用できそうです。