参考
1 圆角矩形边框
Container(
margin: EdgeInsets.only(left: 40, top: 40),
alignment: Alignment(0, 0),
height: 50,
width: 300,
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(4.0)),
border: new Border.all(width: 1, color: Colors.red),
),
child: Text("Container 的圆角边框"),
),
2 圆角矩形边框
Container(
margin: EdgeInsets.only(left: 40, top: 40),
alignment: Alignment(0, 0),
height: 50,
width: 300,
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(25.0)),
border: new Border.all(width: 1, color: Colors.red),
),
child: Text("Container 的圆角边框"),
),
3 可点击的圆角矩形边框(会有水波纹效果)
Container(
margin: EdgeInsets.only(left: 40, top: 40),
child: new Material(
child: new Ink(
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(25.0)),
border: new Border.all(width: 1, color: Colors.red),
),
child: new InkWell(
borderRadius: new BorderRadius.circular(25.0),
onTap: () {},
child: Container(
alignment: Alignment(0, 0),
height: 50,
width: 300,
child: Text("点击 Container 圆角边框"),
)),
),
),
),
4 可点击的圆角矩形边框(水波纹效果)
Container(
margin: EdgeInsets.only(left: 40, top: 40),
child: new Material(
child: new Ink(
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(25.0)),
border: new Border.all(width: 1, color: Colors.red),
),
child: new InkResponse(
borderRadius: new BorderRadius.all(new Radius.circular(25.0)),
highlightShape: BoxShape.rectangle,
radius: 300.0,
splashColor: Colors.yellow,
containedInkWell: true,
onTap: () {
print("click");
},
child: Container(
alignment: Alignment(0, 0),
height: 50,
width: 300,
child: Text("点击 Container 圆角边框"),
),
),
),
),
),