Flutterで円形のコーナーを持つモーダルボトムシートを作成するには?
2023-07-31 10:03:26
質問
showModalBottomSheet (ショーモーダルボトムシート) は、スタイルや装飾を提供しません。Google Tasksのボトムシートのようなものを作りたいのですが。
どのように解決するのですか?
modalBottomSheetの関数が必要です。
void _modalBottomSheetMenu(){
showModalBottomSheet(
context: context,
builder: (builder){
return new Container(
height: 350.0,
color: Colors.transparent, //could change this to Color(0xFF737373),
//so you don't have to change MaterialApp canvasColor
child: new Container(
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(10.0),
topRight: const Radius.circular(10.0))),
child: new Center(
child: new Text("This is a modal sheet"),
)),
);
}
);
}
また、これが正しく動作するための最も重要なポイントは、MaterialAppで以下のようにcanvasColorをtransparentに設定することです。
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Tasks',
theme: new ThemeData(
primarySwatch: Colors.teal,
canvasColor: Colors.transparent,
),
home: new TasksHomePage(),
);
}
このコードをテストしてみましたが、問題なく動作しました。 github .
関連
-
[解決済み] Flutterのデバッグバナーを削除するにはどうしたらいいですか?
-
[解決済み】Flutterで角丸画像を作成する方法
-
[解決済み】FlutterでToastを作成する方法
-
[解決済み] CircularProgressIndicatorにサイズを設定するには?
-
[解決済み] Flutter でプログラム的にモードなボトムシートを閉じる
-
[解決済み] TextFormFieldとTextFieldの違いは何ですか?
-
[解決済み] 親のサイズに基づいてウィジェットをレイアウトするには?
-
[解決済み] Flutter Layout Row / Column - 幅を共有し、高さを拡張する
-
[解決済み] フラッター 前の画面に戻ることなく、新しい画面に移動する。
-
[解決済み] Iosのステータスバーの文字色を変更する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Flutterを使ってローカルストレージに保存するには?
-
[解決済み] Navigatorを含まないコンテキストで要求されたNavigator操作
-
[解決済み] Flutter - Container onPressed?
-
[解決済み] flutterから.apkと.ipaファイルを取得する方法は?
-
[解決済み] フラッター 2つの日付の間の日数を計算する
-
[解決済み] 親のサイズに基づいてウィジェットをレイアウトするには?
-
[解決済み] flutterで丸みを帯びたTextFieldを作るには?
-
[解決済み] Flutter Columnで項目を下中央に配置しようとすると、左揃えになる
-
[解決済み] フラッター 前の画面に戻ることなく、新しい画面に移動する。
-
[解決済み] AnimationController 名前付きパラメータ 'vsync' が定義されていません。