1. ホーム
  2. flutter

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 .