Advent Calendarに参加してみようかと思いましたが、なんかもう席が埋まっていたので1人でやることにしました。
25日間続けばいいけど。。。
FlutterのSnackbarはAndroidのSnackbarみたいなもんです。
両方ともMaterial Designといっているわけだし
https://material.io/components/snackbars/
の実装って感じです。
Android的なSnackBarだと表示できるものはCharSequenceだけなので、文字しか表示できません。
Spannableとかを利用すればiconを表示したりは出来ると思いますが、そこまでする必要ないだろうなとは思います。
Flutterの場合は、任意のWidgetがcontentとして指定することが出来ます。そのため、大きい画像を入れたり、好きなことが出来ます。
final snackBar = SnackBar(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
behavior: SnackBarBehavior.fixed,
content: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Image.asset('assets/image_1.jpeg'),
Text('Yay! A SnackBar!'),
],
),
action: SnackBarAction(
label: 'Undo',
onPressed: () {
// Some code to undo the change.
},
),
);
https://github.com/matsuhiro/snack_bar_test/blob/master/lib/main.dart#L60-L67
しかしながら、あまり自由なことをしないほうが無難でしょう。SnackBarのソースコードのコメントにも書かれていますし。
https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/snack_bar.dart#L187-L188
注意することがあるとするとScaffoldのtreeの下にしか存在できないということでしょうか。
Scaffold.of(context).showSnackBar(snackBar)を利用するので、Scaffoldの配下のWidgetから呼び出すことが前提です。
ですが、floatingActionButtonのonPressed内部でshowSnackBarを呼び出そうするのは、誰しもが踏むみたいですね。
解説の記事が至るところにあります。
そういった解説記事を読むのも良いですが、たぶん一番良いのはFlutterが出しているErrorの内容をちゃんとよく読むのが良いです。
エラーの内容に回避策が書かれていますので。
回避策の一例を、いちおう上げておきます。
https://github.com/matsuhiro/snack_bar_test/blob/master/lib/main.dart#L131-L138
0 件のコメント:
コメントを投稿