我目前正在Flutter开发一个Android应用程序。我如何添加一个圆形按钮?
当前回答
Container(
width: yourWidth,
height: yourHeight ,
decoration: BoxDecoration(
borderRadius: radius,
gradient: yourGradient,
border: yourBorder),
child: FlatButton(
onPressed: {} (),
shape: RoundedRectangleBorder(borderRadius: radius),
.......
用同样的半径。
其他回答
您可以使用ElevatedButton小部件。提升的按钮小部件有一个shape属性,您可以使用该属性,如下面的代码片段所示。
ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(
color: Colors.teal,
width: 2.0,
),
),
),
),
child: Text('Submit'),
onPressed: () {},
),
如果你使用材质应用程序作为你的主小部件,你总是可以使用材质按钮。
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),),
),
),
)
如果有人正在寻找完整的圆形按钮,那么我实现它的方式:
Center(
child: SizedBox.fromSize(
size: Size(80, 80), // Button width and height
child: ClipOval(
child: Material(
color: Colors.pink[300], // Button color
child: InkWell(
splashColor: Colors.yellow, // splash color
onTap: () {}, // Button pressed
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.linked_camera), // Icon
Text("Picture"), // Text
],
),
),
),
),
),
)
在新的更新颤振3.0颤振使用材料3指南。
根据它,按钮的默认边框被四舍五入。
默认按钮
ElevatedButton(
onPressed: () {}, child: const Text("Default Button ")),
边界半径为零的按钮
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.zero)),
onPressed: () {},
child: const Text("Border Radius Zero ")),
带有自定义边界半径的按钮
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50))),
onPressed: () {},
child: const Text("Border Radius Custom ")),
注意:你可以对FilledButton, TextButton等使用相同的逻辑。
按钮样式请参考https://m3.material.io/components/all-buttons。
通过将一个透明的颜色传递给BoxDecoration中的color属性,可以将此代码用于一个透明的圆形按钮。 如。颜色:Colors.transparent。 另外,请注意这个按钮只使用Container和GestureDetector小部件。
Container(
height: 50.0,
child: GestureDetector(
onTap: () {},
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xFFF05A22),
style: BorderStyle.solid,
width: 1.0,
),
color: Colors.transparent,
borderRadius: BorderRadius.circular(30.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: Text(
"BUTTON",
style: TextStyle(
color: Color(0xFFF05A22),
fontFamily: 'Montserrat',
fontSize: 16,
fontWeight: FontWeight.w600,
letterSpacing: 1,
),
),
)
],
),
),
),
)