我目前正在Flutter开发一个Android应用程序。我如何添加一个圆形按钮?
当前回答
你可以使用这个样式为你的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),
),
其他回答
您可以使用下面的代码创建一个渐变颜色的圆形按钮。
Container(
width: 130.0,
height: 43.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
gradient: LinearGradient(
// Where the linear gradient begins and ends
begin: Alignment.topRight,
end: Alignment.bottomLeft,
// Add one stop for each color. Stops should increase from 0 to 1
stops: [0.1, 0.9],
colors: [
// Colors are easy thanks to Flutter's Colors class.
Color(0xff1d83ab),
Color(0xff0cbab8),
],
),
),
child: FlatButton(
child: Text(
'Sign In',
style: TextStyle(
fontSize: 16.0,
fontFamily: 'Righteous',
fontWeight: FontWeight.w600,
),
),
textColor: Colors.white,
color: Colors.transparent,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
onPressed: () {
},
),
);
创建圆角按钮的不同方法如下:
用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
在容器小部件中包装一个TextButton,如下所示:
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Colors.black),
),
child: TextButton(
onPressed: () {
// To do
},
child: Text("Go to Change Language Screen "),
),
)
使用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'),)
这里有另一个解决方案:
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)),
),
),
),
),