web-dev-qa-db-ja.com

Flutterで円形の角を持つモーダルボトムシートを作成する方法は？

showModalBottomSheetは、スタイルや装飾を提供しません。 Googleタスクのボトムシートのようなものを作成したい。

google tasks bottomsheet

flutterflutter-layout
14
Herman

これは必要な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(),
    );
  }

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

24
Satyabrat Sahoo

2019年8月5日に更新

showModalBottomSheetとShapeBorderの追加をサポートするデフォルトのbackgroundColorメソッドを使用して、これを実行できるようになりました。

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

-

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

Pubで package を使用するか、同じコードを含む Gist を使用できます。適切なパッケージ/ファイルをインポートすることを忘れないでください。

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

これで、単にshape引数を設定できます。例：

showModalBottomSheet(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(10.0)),
  ),
  context: context,
  builder: (context) => MyBottomSheet(),
);
8
Sven

以前にすべての答えをまとめると、これに対して可能な限り最高の結果を得ることができました（私の意見では）。

showModalBottomSheet(
        context: context,
        backgroundColor: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(topLeft: Radius.circular(15.0), topRight: Radius.circular(15.0)),
        ),
        builder: (context) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[     
              ListTile(
                leading: Icon(Icons.email),
                title: Text('Send email'),
                onTap: () {
                  print('Send email');
                },
              ),
              ListTile(
                leading: Icon(Icons.phone),
                title: Text('Call phone'),
                 onTap: () {
                    print('Call phone');
                  },
               ),                  
            ],
          );
        });
0
Carlos Eugênio Torres