我目前正在Flutter开发一个Android应用程序。我如何添加一个圆形按钮?
当前回答
Container(
width: yourWidth,
height: yourHeight ,
decoration: BoxDecoration(
borderRadius: radius,
gradient: yourGradient,
border: yourBorder),
child: FlatButton(
onPressed: {} (),
shape: RoundedRectangleBorder(borderRadius: radius),
.......
用同样的半径。
其他回答
如果你使用材质应用程序作为你的主小部件,你总是可以使用材质按钮。
Padding(
padding: EdgeInsets.symmetric(vertical: 16.0),
child: Material(
borderRadius: BorderRadius.circular(30.0),//Set this up for rounding corners.
shadowColor: Colors.lightBlueAccent.shade100,
child: MaterialButton(
minWidth: 200.0,
height: 42.0,
onPressed: (){//Actions here//},
color: Colors.lightBlueAccent,
child: Text('Log in', style: TextStyle(color: Colors.white),),
),
),
)
下面是解决问题的代码。你只需要在盒子装饰中取一个有边界半径的简单容器。
new Container(
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15.0)),
color: Colors.blue,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10.0),
child: new Text(
"Next",
style: new TextStyle(
fontWeight: FontWeight.w500,
color: Colors.white,
fontSize: 15.0,
),
),
),
],
),
),
如果你想使用MaterialButton,
=======================================
你可以添加RoundedRectangleBorder,就像这样,
MaterialButton(
onPressed: () {},
minWidth: MediaQuery.of(context).size.width * 0.4,
height: 34,
color: colorWhite,
highlightColor: colorSplash,
splashColor: colorSplash,
visualDensity: VisualDensity.compact,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4),
side: BorderSide(
color: colorGrey,
width: 0.6,
),
),
child: Text("CANCEL"),
),
在Flutter中,Container()小部件用于设置小部件的样式。使用Container()小部件,您可以设置任何小部件的边框或圆角。
如果您想设置任何类型的样式和装饰,请将该小部件放到Container()小部件中。这为装饰提供了许多属性。
Container(
width: 100,
padding: EdgeInsets.all(10),
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(30)), // Make rounded corner
child: Text("Click"),
)
使用Flutter版本2,请尝试以下操作
ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<OutlinedBorder>(
RoundedRectangleBorder(
side:
BorderSide(width: 1.0, color: Colors.red,
borderRadius:
BorderRadius.circular(5.0),),),
backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
foregroundColor: MaterialStateProperty.all<Color>(Colors.green),
elevation:
MaterialStateProperty.all<double>(8.0),
padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
const EdgeInsets.symmetric(
horizontal: 15.0,
vertical: 10.0),),),
onPressed: (){},
child: Text('Button'),)