我目前正在使用Flutter开发Android应用程序。如何添加一个圆角按钮?
我目前正在使用Flutter开发Android应用程序。如何添加一个圆角按钮?
customElevatedButton({radius, color}) => ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(radius == null ? 100 : radius),
),
primary: color,
);
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: () {
},
),
现在我们有一个图标按钮可以实现圆形按钮的点击和叠加效果。但是,背景颜色目前还不可用,但可以通过以下方式使用Circle Avatar小部件实现:
CircleAvatar(
backgroundColor: const Color(0xffF4F3FA),
child: IconButton(
onPressed: () => FlushbarHelper.createInformation(
message: 'Work in progress...')
.show(context),
icon: Icon(Icons.more_vert),
),
),
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'),)
另一个在2021年可行的酷炫解决方案:
TextButton(
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Text('Follow Us'.toUpperCase()),
),
style: TextButton.styleFrom(
backgroundColor: Colors.amber,
shadowColor: Colors.red,
elevation: 2,
textStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),)
),
onPressed: () {
print('Pressed');
},
),
您可以创建一个自定义视图,并将其放置在GestureDetector中,以使其像按钮一样运行。好处是您可以为容器提供无限类型的自定义装饰(包括使用指定半径使其变成圆形)。
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)),
),
),
),
),
您可以使用此样式来使您的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),
),
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"),
)
Container(
width: yourWidth,
height: yourHeight ,
decoration: BoxDecoration(
borderRadius: radius,
gradient: yourGradient,
border: yourBorder),
child: FlatButton(
onPressed: {} (),
shape: RoundedRectangleBorder(borderRadius: radius),
.......
并使用相同的半径。