如何获得像图像一样的自定义底页？弧形底片颤振

Question

我试图在Flutter应用中制作一些自定义底表。我试图在container中使用roundedrectangleborder在工作表中添加灰色背景。但是为什么它不起作用？这是我的代码和输出：

 void _modalBottomSheetMenu4(){
    showModalBottomSheet(
        context: context,
        builder: (builder){
          return new Container(
            height: 350.0,
            color: Colors.grey[350],
            child: new Container(
                decoration: new BoxDecoration(
                    color: Colors.white,
                    borderRadius: new BorderRadius.only(
                        topLeft: const Radius.circular(3.0),
                        topRight: const Radius.circular(3.0))),
                        //content starts
                child: new Container(
                  margin: EdgeInsets.only(right: 5.0,left: 5.0,top: 10.0),                 
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[

// rounded rectangle grey handle
                new Container(
                  width: 40.0,
                  height: 5.0,                 
        decoration:
                new BoxDecoration(
                  borderRadius: new BorderRadius.circular(10.0),
                  color: Colors.grey,
                ),
),


new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[

                 new SvgPicture.asset("assets/lang.svg", width: 80.0, height: 80.0, ),

          new Text("\nSelect Language\n",
          style: TextStyle(color: Colors.black,fontWeight: FontWeight.bold, fontSize:20.0 )),

           new Container(
             padding: EdgeInsets.all(5.0),
            child: new CupertinoButton(   //special button for ios on click fadecolor
              onPressed: () async{
                        Navigator.pop(context);
                       Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new GreetingPage())); 
                              },
                              child: new Text(" Tamil "),
                              color: CupertinoColors.activeBlue,
                              pressedOpacity: 0.4 ,          //opactiy default 0.1
                              minSize: 44.0,                //its has min length 

                            ),
                          ),


                           new Container(
                             padding: EdgeInsets.all(5.0),
            child: new CupertinoButton(   //special button for ios on click fadecolor
              onPressed: () async{
                      Navigator.pop(context);
                     Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new GreetingPageEng())); 
                              },
                              child: new Text("English"),
                              color: CupertinoColors.destructiveRed,
                              pressedOpacity: 0.4 ,          //opactiy default 0.1
                              minSize: 44.0,                //its has min length 

                            ),
                          ),


                              ],
                            ),
                             SizedBox(height: 30.0),
              ],
            ),
                                ),
                            ),
                          );
                        }
                    );
                  }

我的输出：

预期输出：

弯曲的边缘在我的底页中不可见。

我在代码中犯了什么错误？我该如何实现？

提前感谢。

Answer 1

您可以通过使用BottomSheet的shape属性为BottomSheet赋予圆角。

您将shape属性设置为RoundedRectangleBorder并为其赋予了borderRadius属性。

检查下面的代码：效果很好：

void _modalBottomSheetMenu4(){
  showModalBottomSheet(
      context: context,
      // use the shape border property to give it rounder corners
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20),
          topRight: Radius.circular(20),
        ),
      ),
      builder: (builder){
        return new Container(
          height: 350.0,
          color: Colors.grey[350],
          child: new Container(
            decoration: new BoxDecoration(
                color: Colors.white,
                borderRadius: new BorderRadius.only(
                    topLeft: const Radius.circular(3.0),
                    topRight: const Radius.circular(3.0))),
            //content starts
            child: new Container(
              margin: EdgeInsets.only(right: 5.0,left: 5.0,top: 10.0),
              child: new Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[

// rounded rectangle grey handle
                  new Container(
                    width: 40.0,
                    height: 5.0,
                    decoration:
                    new BoxDecoration(
                      borderRadius: new BorderRadius.circular(10.0),
                      color: Colors.grey,
                    ),
                  ),


                  new Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[

                      new SvgPicture.asset("assets/lang.svg", width: 80.0, height: 80.0, ),

                      new Text("\nSelect Language\n",
                          style: TextStyle(color: Colors.black,fontWeight: FontWeight.bold, fontSize:20.0 )),

                      new Container(
                        padding: EdgeInsets.all(5.0),
                        child: new CupertinoButton(   //special button for ios on click fadecolor
                          onPressed: () async{
                            Navigator.pop(context);
                            Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new GreetingPage()));
                          },
                          child: new Text(" Tamil "),
                          color: CupertinoColors.activeBlue,
                          pressedOpacity: 0.4 ,          //opactiy default 0.1
                          minSize: 44.0,                //its has min length 

                        ),
                      ),


                      new Container(
                        padding: EdgeInsets.all(5.0),
                        child: new CupertinoButton(   //special button for ios on click fadecolor
                          onPressed: () async{
                            Navigator.pop(context);
                            Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new GreetingPageEng()));
                          },
                          child: new Text("English"),
                          color: CupertinoColors.destructiveRed,
                          pressedOpacity: 0.4 ,          //opactiy default 0.1
                          minSize: 44.0,                //its has min length 

                        ),
                      ),


                    ],
                  ),
                  SizedBox(height: 30.0),
                ],
              ),
            ),
          ),
        );
      }
  );
}

我希望这会有所帮助。