且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在 Flutter 中创建带有圆角的模态底页?

更新时间:2023-02-25 12:16:09

这是需要的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.