我目前正在Flutter开发一个Android应用程序。我如何添加一个圆形按钮?
当前回答
你可以简单地使用RaisedButton或你可以使用InkWell来获得一个自定义按钮和属性,如onDoubleTap, onLongPress等:
new InkWell(
onTap: () => print('hello'),
child: new Container(
//width: 100.0,
height: 50.0,
decoration: new BoxDecoration(
color: Colors.blueAccent,
border: new Border.all(color: Colors.white, width: 2.0),
borderRadius: new BorderRadius.circular(10.0),
),
child: new Center(child: new Text('Click Me', style: new TextStyle(fontSize: 18.0, color: Colors.white),),),
),
),
如果你想在InkWell小部件中使用splashColor和highlightColor属性,使用Material小部件作为InkWell小部件的父部件,而不是装饰容器(删除装饰属性)。在这里阅读原因。
其他回答
您可以简单地使用RaisedButton
Padding(
padding: EdgeInsets.only(left: 150.0, right: 0.0),
child: RaisedButton(
textColor: Colors.white,
color: Colors.black,
child: Text("Search"),
onPressed: () {},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
),
)
输出:
更多信息:RSCoder
如果你想使用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"),
),
你可以使用这个样式为你的elevatedButton使它成为圆形
style: ButtonStyle(
elevation: MaterialStateProperty.all(8.0),
backgroundColor:
MaterialStateProperty.all(Constants().orangeColor),
textStyle: MaterialStateProperty.all(
TextStyle(
fontSize: 16.0,
),
),
shape: MaterialStateProperty.all<CircleBorder>(
CircleBorder(),
),
shadowColor: MaterialStateProperty.all(Constants().orangeColor),
),
新的提升按钮
风格
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: () {
},
),
使用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'),)