我目前正在Flutter开发一个Android应用程序。我如何添加一个圆形按钮?
当前回答
你也可以使用ButtonTheme():
下面是示例代码
ButtonTheme(
minWidth: 200.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.green)),
child: RaisedButton(
elevation: 5.0,
hoverColor: Colors.green,
color: Colors.amber,
child: Text(
"Place Order",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
onPressed: () {},
),
),
其他回答
下面是解决问题的代码。你只需要在盒子装饰中取一个有边界半径的简单容器。
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,
),
),
),
],
),
),
创建圆角按钮的不同方法如下:
用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
如果你想使用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"),
),
还有另一种方法来做到这一点-只是使用FloatingActionButton适当的圆形按钮。
Scaffold(
appBar: AppBar(
title: const Text('Floating Action Button'),
),
body: const Center(child: Text('Press the button below!')),
floatingActionButton: FloatingActionButton(
onPressed: () {
// Add your onPressed code here!
},
backgroundColor: Colors.green,
child: const Icon(Icons.navigation),
),
)
在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"),
)