如何在 Flutter 中创建带有圆角的模态底板? [英] How to create a modal bottomsheet with circular corners in Flutter?

问题描述

showModalBottomSheet 不提供任何样式或装饰.我想创建类似于 Google Tasks 底部表格的内容.

showModalBottomSheet does not provide any styling or decorations. I want to create something like the Google Tasks bottomsheet.

推荐答案

这是需要的modalBottomSheet函数.

This is the modalBottomSheet function needed.

    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 设置为透明，如下所示.

Also the most important part of this working properly is, in MaterialApp set canvasColor to transparent like the one shown below.

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

我已经测试了代码并且它运行良好，因为我还制作了 Google Tasks 应用程序的克隆，该应用程序将在我的 github.

I have tested the code and it works fine as I was also making a clone of the Google Tasks app which will be opensourced in my github.

这篇关于如何在 Flutter 中创建带有圆角的模态底板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！