☰

Flutterで円形のコーナーを持つモーダルボトムシートを作成するにはどうすればいいですか? 質問する

tag-icon • tag-icon flutter flutter-layout
Flutterで円形のコーナーを持つモーダルボトムシートを作成するにはどうすればいいですか? 質問する

表示モーダルボトムシートスタイルや装飾は提供されません。Google Tasks のボトムシートのようなものを作成したいと考えています。

Google タスク ボトムシート

ベストアンサー1

2019年8月5日更新

および のshowModalBottomSheet追加もサポートされるようになったデフォルトのメソッドを使用して、これを実行できるようになりました。ShapeBorderbackgroundColor

showModalBottomSheet(
  shape: RoundedRectangleBorder(
     borderRadius: BorderRadius.vertical(top: Radius.circular(10.0)),
  ),
  backgroundColor: Colors.white,
  ...
);

--

他の回答で提案されているように、アプリのテーマ全体をオーバーライドする (アプリのさまざまな部分で問題が発生する) 代わりに、実装を調べてshowModalBottomSheet自分で問題を見つけることにしました。必要なのは、トリックThemeを含むウィジェットでモーダルのメイン コードをラップすることだけであることがわかりましたcanvasColor: Colors.transparent。また、半径とモーダル自体の色を簡単にカスタマイズできるようにしました。

どちらかを使用することができますパッケージパブや要旨同じコードが含まれています。適切なパッケージ/ファイルをインポートすることを忘れないでください。

showRoundedModalBottomSheet(
    context: context,
    radius: 20.0,  // This is the default
    color: Colors.white,  // Also default
    builder: (context) => ???,
);

おすすめ記事