77

showModalBottomSheetは、スタイリングや装飾を提供しません。Google タスクのボトムシートのようなものを作成したいと考えています。

Google タスク ボトムシート

4

14 に答える 14

105

これは必要な 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 を透明に設定することです。

return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Tasks',
      theme: new ThemeData(
        primarySwatch: Colors.teal,
        canvasColor: Colors.transparent,
      ),
      home: new TasksHomePage(),
    );
  }

私はコードをテストしましたが、githubでオープンソース化される Google Tasks アプリのクローンも作成していたため、正常に動作します。

于 2018-06-09T02:24:29.133 に答える
19

私はこのコードを持っていて、私にとってはうまくいきます。それをチェックして、あなたの意見を教えてください。

showBottomSheet(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(
              top: Radius.circular(20),
            ),
          ),
          context: context,
          builder: (context) => Container(
                height: 250,

                child: new Container(
                    decoration: new BoxDecoration(
                        color: Theme.of(context).primaryColor,
                        borderRadius: new BorderRadius.only(
                            topLeft: const Radius.circular(20.0),
                            topRight: const Radius.circular(20.0))),
                    child: new Center(
                      child: new Text("This is a modal sheet"),
                    )),
              ))
于 2020-02-26T21:57:38.987 に答える
3

RoundedRectangleBorder内にウィジェットを追加できますshowModalBottomSheet：

showModalBottomSheet<void>(
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10.0),
            topRight: Radius.circular(10.0)
        ),
    ),
)
于 2021-01-19T21:34:22.500 に答える