BLOG
マテリアルデザイン3(Material Design3)シリーズ Bottom App Bar
Material design 3
2024.06.19
2024.06.20
2024.06.19
2024.06.20
1. 今回のテーマ
今回のテーマは、BottomAppBarです。
BottomAppBarは、Material Design ComponentsのNavigationに分類される画面下部に表示できるナビゲーショングループです。最大4つのアイコンとFAB（Floating Action Button)を配置することができます。
詳細は、こちらを御覧ください。
https://m3.material.io/components/bottom-app-bar/overview
2. サンプルコード
この例は、画面下部にナビゲーションメニューを表示するサンプルです。
import 'package:flutter/material.dart';
class BottomAppBarScreen extends StatefulWidget {
const BottomAppBarScreen({super.key});
@override
State<BottomAppBarScreen> createState() => _BottomAppBarScreenState();
}
class _BottomAppBarScreenState extends State<BottomAppBarScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Bottom App Bar'),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: '追加',
child: const Icon(Icons.add),
),
bottomNavigationBar: BottomAppBar(
child: _buildBottomAppBar,
),
);
}
Widget get _buildBottomAppBar {
return Row(
children: [
IconButton(
tooltip: '検索',
icon: const Icon(Icons.search_rounded),
onPressed: () {},
),
IconButton(
tooltip: '削除',
icon: const Icon(Icons.delete_outline_rounded),
onPressed: () {},
),
IconButton(
tooltip: 'お気に入り',
icon: const Icon(Icons.favorite),
onPressed: () {},
),
],
);
}
}3. カスタマイズ
3.1. テーマの変更
背景色を変更する場合は、colorに所定の背景色を指定します。
BottomAppBar(
color: Colors.black,
child: _buildBottomAppBar,
),アイコンカラーを変更する場合は、IconThemeDataのdataに所定のアイコン色を指定します。
BottomAppBar(
color: Colors.black,
child: IconThemeData(
data: IconThemeData(
color: Theme.of(context).colorScheme.onPrimary,
),
child: _buildBottomAppBar,
),
)
3.2. 高さの変更
高さを変更する場合は、heightに所定の高さを指定します。デフォルトの高さは80です。
ただし、高さの変更は推奨されていないようです。
BottomAppBar(
height: 30,
child: _buildBottomAppBar,
),3.3. FABの設置
オプションで、FAB(Floating Action Button)をBottomAppBarに配置することができます。
また、FABがBottomAppBarにめり込むようなレイアウトを作ることができます。
FABを中央にめり込ませるときは、以下のように設定します。
- floatingActionButtonを設定する。
- floatingActionButtonLocationに「FloatingActionButtonLocation.centerDocked」を設定する。
さらに、BottomAppBarと重ならないようにしたい場合は、以下のように設定します。
- notchMarginを設定する。
- shapeにCircularNotchedRectangleを設定する。
Scaffold(
appBar: AppBar(
title: const Text('Bottom App Bar'),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: '追加',
child: const Icon(Icons.add),
),
bottomNavigationBar: BottomAppBar(
notchMargin: 20,
shape: const CircularNotchedRectangle()
child: _buildBottomAppBar,
),
);①FABを右に配置する場合
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
②FABを左に配置する場合
floatingActionButtonLocation: FloatingActionButtonLocation.startDocked,
3.4. スクロールイベント
下にスクロールすると、BottomAppBarを非表示、上にスクロールするとBottomAppBarを表示するように調整します。
final ScrollController _scrollController = ScrollController();
bool _isVisible = true;
@override
void initState() {
super.initState();
_scrollController.addListener(_scrollListener);
}
void _scrollListener() {
if (_scrollController.position.userScrollDirection ==
ScrollDirection.reverse) {
if (_isVisible) {
setState(() {
_isVisible = false;
});
}
} else if (_scrollController.position.userScrollDirection ==
ScrollDirection.forward) {
if (!_isVisible) {
setState(() {
_isVisible = true;
});
}
}
}
@override
void dispose() {
_scrollController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Bottom App Bar'),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: '追加',
child: const Icon(Icons.add),
),
body: ListView.builder(
controller: _scrollController,
itemBuilder: (_, index) => ListTile(
title: Text('$index'),
),
itemCount: 30,
),
bottomNavigationBar: AnimatedContainer(
duration: const Duration(milliseconds: 500),
height: _isVisible ? 80 : 0,
child: BottomAppBar(
child: _buildBottomAppBar,
),
),
);
}4. まとめ
今回は、Material Desin 3のBottomAppBarを紹介しました。BottomAppBarは、画面下部に表示できるナビゲーショングループです。
また、FABと併用することで、ユーザにオススメしたいアクションを誘導するためにも利用できそうです。
