我目前正在Flutter开发一个Android应用程序。我如何添加一个圆形按钮?
当前回答
创建圆角按钮最简单的方法之一是使用FlatButton,然后通过设置其shape属性指定圆度。遵循下面的代码
FlatButton ( 填充:EdgeInsets.all (30.0), 颜色:Colors.black, 形状:RoundedRectangleBorder ( borderRadius: BorderRadius.circular (20.0)), child: child: Text( “按钮”, TextStyle(颜色:Colors.white), ), onPressed:() { 打印(“按钮按下”); }, ),
注意:为了改变圆度,调整BorderRadius.circular()中的值
其他回答
现在我们有一个图标按钮来实现圆形按钮点击和覆盖。但是,背景颜色还不可用,但同样可以通过Circle头像小部件实现,如下所示:
CircleAvatar(
backgroundColor: const Color(0xffF4F3FA),
child: IconButton(
onPressed: () => FlushbarHelper.createInformation(
message: 'Work in progress...')
.show(context),
icon: Icon(Icons.more_vert),
),
),
您可以使用下面的代码创建一个渐变颜色的圆形按钮。
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: () {
},
),
);
在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"),
)
在新的更新颤振3.0颤振使用材料3指南。
根据它,按钮的默认边框被四舍五入。
默认按钮
ElevatedButton(
onPressed: () {}, child: const Text("Default Button ")),
边界半径为零的按钮
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.zero)),
onPressed: () {},
child: const Text("Border Radius Zero ")),
带有自定义边界半径的按钮
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50))),
onPressed: () {},
child: const Text("Border Radius Custom ")),
注意:你可以对FilledButton, TextButton等使用相同的逻辑。
按钮样式请参考https://m3.material.io/components/all-buttons。
使用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'),)