BottomSheet
BottomSheetは、画面下部からポップアップ表示されるウィジェットです。ただし、厳密にはBottomSheetというウィジェットはありません。表示するウィジェットは任意に作成し、showBottomSheetという関数から表示されるウィジェットがBottomSheetとして機能します。ダイアログと似ていますが、画面下部で表示されるため、全体の画面をできるだけ隠さず表示することが可能です。
リスト4がBottomSheetを利用する場合の簡単なコード例で、その実行結果が図3です。
Widget build(BuildContext context) {
return SafeArea(
child: Container(
color: Colors.white,
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
OutlinedButton(
child: Text("Bottom sheet"),
onPressed: (){
// (1) BottomSheetを表示する
showBottomSheet(
context: context,
builder: (context) {
return createBottomSheet(context);
});
}),
// : (省略)
]
)));
}
// (2) BottomSheetとして表示するウィジェット
Widget createBottomSheet(BuildContext context) {
return Container(
margin: EdgeInsets.only(top : 0, bottom : 48.0),
child: Wrap(
children: [
ListTile(
title: Text("以下から選択してください"),
tileColor: Colors.black,
textColor: Colors.white,
),
ListTile(
title: Text("選択肢(1)"),
),
// : (省略)
],
),
);
}
（1）のように表示するウィジェットはbuilderプロパティで指定します。実際に表示するウィジェットは（2）で作成しています。このようにウィジェットは自由に作成することが可能です。また、（1）のshowBottomSheetの代わりにshowModalBottomSheetを利用すると、図4のようにモーダルモードでBottomSheetを表示することができます。
SnackBar
SnackBarは主に処理の通知結果を表示するために使われるウィジェットです。また、直近の処理を取り消すといった操作ボタンを通知に含めたい場合のように、ちょっとした操作を含める場合にも利用可能です。
リスト5がSnackBarを利用する場合の簡単なコード例で、その実行結果が図5です。
Widget build(BuildContext context) {
return SafeArea(
child: Container(
width: double.infinity,
child:
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
OutlinedButton(
child: Text("Create snackbar(1)"),
onPressed: (){
// (1) 表示する
ScaffoldMessenger.of(context).showSnackBar(
createSnackBar1(context)
);
}
),
// : (省略)
])),
);
}
SnackBar createSnackBar1(BuildContext context){
// (2) SnackBarウィジェットの作成
return SnackBar(
content: Text("削除しました"),
action: SnackBarAction(
label: "取消",
onPressed: (){
// : (省略)
},
),
);
}
SnackBarウィジェットを表示するためには（1）のようにScaffoldMessengerを使って表示を行います。また、表示するSnackBarウィジェットはshowSnackBarメソッドで指定し、（2）で作成しています。表示する本文はcontentで指定し、アクションが必要な場合にはactionsプロパティに指定します。
また、図6で示すような表示方法にも変更することが可能で、その場合のコードがリスト6です。
SnackBar createSnackBar2(BuildContext context){
return SnackBar(
content: Text("削除しました"),
// (1) 表示方法
behavior: SnackBarBehavior.floating,
// (2) 表示する時間
duration: Duration(milliseconds: 2000),
backgroundColor: Colors.red,
action: SnackBarAction(
// : (省略)
),
);
}
（1）では、表示方法を画面下部とセットにせずに表示しています。そして、表示する時間も（2）のdurationプロパティで変更可能です。
まとめ
これまで、マテリアルデザインを用いたコンポーネントを紹介してきました。また、本連載で紹介できなかったコンポーネントも多数あります。
このようにFlutterにはさまざまなコンポーネントがあり、そして、カスタマイズするためのプロパティも多く提供されているために、実際にどこまでカスタマイズできるのかわかりにくいところもあります。しかし、多くの場合にはMaterial Designのコンポーネントで分かると思うので、実際にいろいろと試して覚えていくとよいでしょう。
次回は、5/12にリリースされたFlutter3について紹介します。これまで紹介してきたMaterial Designも新たにバージョン3となり変更が加わっていますので、その点にも着目したいと思います。
