flutter - 如何获得像图像中的自定义底页?颤动的弯曲底板
问题描述
我试图在我的颤振应用程序中制作一些自定义底页。我试图在我的工作表中添加灰色背景,其中带有圆形矩形边框container
。但为什么它不起作用?这是我的代码和输出:
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),
],
),
),
),
);
}
);
}
我的输出:
预期输出:
弯曲的边缘在我的底页中不可见。
我在代码中犯了什么错误?
我怎样才能做到这一点?
提前致谢。
解决方案
您可以使用 的属性给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),
],
),
),
),
);
}
);
}
我希望这有帮助。
推荐阅读
- c# - 如果满足条件,从列表中删除行的方法
- python - .NoReverseMatch:未找到带有参数“(”,)“的“作者详细信息”的反向。尝试了 1 种模式:['catalog/author/(?P
[0-9]+)$'] - kubernetes - 在 kubernetes 中使用 traefik v2 添加基本身份验证未弹出登录表单
- sql - 使用 SAS 在同一列中进行条件减法
- java - java/JSON 未显示解析 JSON 所需的值
- docker - Fluentd 日志驱动程序标记设置不起作用
- python - python matplotlib如何绘制20个或所需的数字唯一和不同的颜色而不是渐变颜色
- c++ - 在 float[4] 和 qbytearray 之间转换
- javascript - 复制另一个页面中使用的组件
- javascript - React Storybook 无法识别故事