我目前正在Flutter开发一个Android应用程序。我如何添加一个圆形按钮?
当前回答
创建圆角按钮的不同方法如下:
用ElevatedButton. stylefrom
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
),
onPressed: () {},
child:
Text("Buy now".toUpperCase(), style: TextStyle(fontSize: 14)),
),
用ButtonStyle提升按钮
ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50.0),
))),
onPressed: () {},
child: Text("Submit".toUpperCase()),
),
圆形按钮的实际演示可以在下面的Dartpad链接中找到:
圆形按钮演示例子在达特pad
其他回答
试试这个:
SizedBox(
height: 40.0,
child: MaterialButton(
child: Text("Button"),
color: Colors.blue,
disabledColor: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0), // Change your border radius here
),
),
onPressed: () {},
),
),
在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"),
)
addButton() {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: SizedBox(
height: 45,
width: 200,
child: ElevatedButton.icon(
onPressed: () async {},
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
)),
elevation: MaterialStateProperty.all(1),
backgroundColor: MaterialStateProperty.all(Colors.blue),
),
icon: Icon(Icons.add, size: 18),
label: Text("Add question"),
),
),
),
],
);
}
圆边颜色容器:
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.red),
),
child: Text("Some Text"),
)
如果你想使用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"),
),