我目前正在Flutter开发一个Android应用程序。我如何添加一个圆形按钮?
当前回答
这里有另一个解决方案:
Container(
height: MediaQuery.of(context).size.height * 0.10,
width: MediaQuery.of(context).size.width,
child: ButtonTheme(
minWidth: MediaQuery.of(context).size.width * 0.75,
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(25.0),
side: BorderSide(color: Colors.blue)),
onPressed: () async {
// Do something
},
color: Colors.red[900],
textColor: Colors.white,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Button Text,
style: TextStyle(fontSize: 24)),
),
),
),
),
其他回答
如果你使用材质应用程序作为你的主小部件,你总是可以使用材质按钮。
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),),
),
),
)
如果你想使用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"),
),
你可以创建一个自定义的视图,并把它放在一个姿态检测器中,让它表现得像一个按钮。这样做的好处是,您可以为容器提供无尽的自定义装饰类型(包括使其具有指定半径的圆形)。
新的提升按钮
风格
customElevatedButton({radius, color}) => ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(radius == null ? 100 : radius),
),
primary: color,
);
Icon
Widget saveIcon() => iconsStyle1(
Icons.save,
);
// Common icon style
iconsStyle1(icon) => Icon(
icon,
color: white,
size: 15,
);
按钮使用
ElevatedButton.icon(
icon: saveIcon(),
style:
customElevatedButton(color: Colors.green[700]),
label: Text('Save',
style: TextStyle(color: Colors.white)),
onPressed: () {
},
),
通过将一个透明的颜色传递给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,
),
),
)
],
),
),
),
)