[Flutter/dart] ModalBottomSheet内でスクロールする
概要
スマホアプリでは、メニューを選択してもらう時にメニューが画面下から現れる場合がありますが、これはFlutterではshowModalBottomSheetで作成できます。
しかし、表示したいメニューが多いと、ModalBottomSheetの中に入りきりません。このような場合、ModalBottomSheetの中でスクロールする方法をご紹介します。
方法
DraggableScrollableSheetを使います。
以下のように、showModalBottomSheetのbuilderでDraggableScrollableSheetを作成し、その子に表示したいWidgetを指定します。
@override
Widget build(BuildContext context) {
List<String> menues=List.generate(20, (index) => "メニュー${index}");
return Scaffold(
appBar: AppBar(
title: Text('demo'),
),
body: Container(
padding: const EdgeInsets.all(16),
child: RaisedButton(
child: Text('show menu'),
onPressed: ()async{
int t=await showModalBottomSheet(
context: context,
builder: (context)=> DraggableScrollableSheet( //これ!
initialChildSize: 1,
builder: (BuildContext context, ScrollController
scrollController)=>
Container(
child: ListView(
shrinkWrap: true,
children: menues.map((e) =>
ListTile(
title: Text(
e,
style: TextStyle(
fontSize: 18
),
),
)
).toList(),
),
)
)
);
},
)
)
);
}
initialChildSizeは親Widgetに占める割合を設定します。
以下の動画のようにスクロールできるようになります!
最新記事
すべて表示現象 アプリ内にAdmobを追加して、アプリを起動すると、下記のエラーが発生 java.lang.RuntimeException: Unable to get provider com.google.android.gms.ads.MobileAdsInitProvider 原因 AndroidManifestの書き方が誤っていた。 <meta-data>はactivityと同じ階層にある必要が
概要 Uriを持っていて、Urlに変換したい場合の方法で少し手惑ったので共有します 方法 String url = uri.toString(); これだけです。 最後に ページを開くだけだとUriでもUrlでもいいんですが、WebViewはUrlを要求してくるんですよね。
問題 以前、日本語を含むURLを開くためには、エンコーディングしてやる必要がある、という記事を書きました。 しかし、すでにエンコーディングされているURLを再度エンコーディングしてしまうと、別のURLになってしまいます。 つまり、URLを開く処理の前に、 ・エンコーディングが必要なURLか ・すでにエンコーディングがされているか を判定しないといけないことになります。これは中々煩雑な処理です。 発