在 Flutter 中创建一个带边框半径的圆形按钮/按钮
我目前正在 Flutter 中开发一个 Android 应用程序。如何添加圆形按钮？
一、解决方案总结
FlatButton 和 RaisedButton 已弃用。
因此，您可以将 shape 放在 style 属性中，用于 TextButton 和 ElevatedButton。
自 Flutter 2.0 以来有一些变化：
style：属性类型已更改为 ButtonStyle
shape：属性类型已更改为 MaterialStateProperty
2.圆形按钮
在 style 属性中存在 shape 属性：
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red)
)
)
)
https://i.stack.imgur.com/RzQOi.jpg
方形按钮
对于方形按钮，您可以使用 ElevatedButton 或以其他方式添加：
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.zero,
side: BorderSide(color: Colors.red)
)
)
)
https://i.stack.imgur.com/Z4sd0.jpg
完整示例
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
child: Text(
"Add to cart".toUpperCase(),
style: TextStyle(fontSize: 14)
),
style: ButtonStyle(
padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(15)),
foregroundColor: MaterialStateProperty.all<Color>(Colors.red),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red)
)
)
),
onPressed: () => null
),
SizedBox(width: 10),
ElevatedButton(
child: Text(
"Buy now".toUpperCase(),
style: TextStyle(fontSize: 14)
),
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.zero,
side: BorderSide(color: Colors.red)
)
)
),
onPressed: () => null
)
]
)
您可以使用 ElevatedButton 小部件。提升的按钮小部件具有 shape 属性，您可以使用它，如以下代码段所示。
ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(
color: Colors.teal,
width: 2.0,
),
),
),
),
child: Text('Submit'),
onPressed: () {},
),
更新
由于左侧按钮现已弃用，请使用右侧按钮。
Deprecated --> Recommended
RaisedButton --> ElevatedButton
OutlineButton --> OutlinedButton
FlatButton --> TextButton
高架按钮
使用 StadiumBorder ElevatedButton( onPressed: () {}, child: Text('Button'), style: ElevatedButton.styleFrom(shape: StadiumBorder()), ) Using RoundedRectangleBorder ElevatedButton( onPressed: () {}, child: Text(' Button'), style: ElevatedButton.styleFrom( shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12), // <-- Radius ), ), ) 使用 CircleBorder ElevatedButton( onPressed: () {}, child: Text(' Button'), style: ElevatedButton.styleFrom( shape: CircleBorder(), padding: EdgeInsets.all(24), ), ) Using BeveledRectangleBorder ElevatedButton( onPressed: () {}, child: Text('Button'), style: ElevatedButton.styleFrom( 形状: BeveledRectangleBorder(borderRadius: BorderRadius.circular(12) ), ), )
轮廓按钮
使用 StadiumBorder OutlinedButton( onPressed: () {}, child: Text('Button'), style: OutlinedButton.styleFrom( shape: StadiumBorder(), ), ) Using RoundedRectangleBorder OutlinedButton( onPressed: () {}, child: Text( 'Button'), style: OutlinedButton.styleFrom( shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12), ), ), ) 使用 CircleBorder: OutlinedButton( onPressed: () {}, child: Text('Button'), style: OutlinedButton.styleFrom( shape: CircleBorder(), padding: EdgeInsets.all(24), ), ) Using BeveledRectangleBorder OutlinedButton( onPressed: () {}, child: Text('Button'), style: OutlinedButton.styleFrom(形状：BeveledRectangleBorder（borderRadius：BorderRadius.circular（12），），），）
文本按钮
TextButton 也与 ElevatedButton 和 OutlinedButton 类似，但是，您只能在按下按钮时看到形状。
自 2020 年 9 月起，Flutter 1.22.0：
“RaisedButton”和“FlatButton”都已弃用。
最新的解决方案是使用新按钮：
1. 提升按钮：
https://i.stack.imgur.com/7hsAr.png
https://i.stack.imgur.com/fEXRZ.png
代码：
ElevatedButton(
child: Text("ElevatedButton"),
onPressed: () => print("it's pressed"),
style: ElevatedButton.styleFrom(
primary: Colors.red,
onPrimary: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
)
不要忘记，还有一个 .icon 构造函数可以轻松添加图标：
ElevatedButton.icon(
icon: Icon(Icons.thumb_up),
label: Text("Like"),
onPressed: () => print("it's pressed"),
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
)
2.大纲按钮：
https://i.stack.imgur.com/16nuT.png
代码：
OutlinedButton.icon(
icon: Icon(Icons.star_outline),
label: Text("OutlinedButton"),
onPressed: () => print("it's pressed"),
style: ElevatedButton.styleFrom(
side: BorderSide(width: 2.0, color: Colors.blue),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
)
3.文本按钮：
如果您不想要轮廓或颜色填充，您可以随时使用 TextButton。
您可以简单地使用 RaisedButton
Padding(
padding: EdgeInsets.only(left: 150.0, right: 0.0),
child: RaisedButton(
textColor: Colors.white,
color: Colors.black,
child: Text("Search"),
onPressed: () {},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
),
)
输出：
https://i.stack.imgur.com/pw64z.png
更多信息：RSCoder
您可以简单地使用 RaisedButton 或使用 InkWell 来获取自定义按钮以及 onDoubleTap、onLongPress、etc. 等属性：
new InkWell(
onTap: () => print('hello'),
child: new Container(
//width: 100.0,
height: 50.0,
decoration: new BoxDecoration(
color: Colors.blueAccent,
border: new Border.all(color: Colors.white, width: 2.0),
borderRadius: new BorderRadius.circular(10.0),
),
child: new Center(child: new Text('Click Me', style: new TextStyle(fontSize: 18.0, color: Colors.white),),),
),
),
https://i.stack.imgur.com/8Hgn4.jpg
如果您想在 InkWell 小部件中使用 splashColor 和 highlightColor 属性，请将 Material 小部件用作 InkWell 小部件的父级，而不是装饰容器（删除装饰属性）。 Read about why here。
InkWell 剪辑到圆角，那么您还需要将 borderRadius: BorderRadius.circular(10.0) 添加到 InkWell 小部件，否则它将转到边界矩形的边缘。
创建圆形按钮的不同方法如下：
ElevatedButton 与 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
ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50.0),
))),
onPressed: () {},
child: Text("Submit".toUpperCase()),
),
圆形按钮的实际演示可以在下面的 Dartpad 链接中找到：
DartPad 上的圆形按钮演示示例
https://i.stack.imgur.com/yV3RJ.png
您可以使用以下代码制作带有渐变颜色的圆形按钮。
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: () {
},
),
);
https://i.stack.imgur.com/mYVmw.jpg
请改用 TextButton。
据说自 2020 年 10 月起，FlatButton、RaisedButton 和 OutlineButton 等按钮已被弃用。这是 Flutter 开发团队简化并使 Flutter API 保持一致的努力之一，您可以使用 style 属性自定义其样式。
TextButton(
child: Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
child: Text('Text here',
style: TextStyle(
color: Colors.teal,
fontSize: 14,
fontWeight: FontWeight.w500)),
),
style: TextButton.styleFrom(
primary: Colors.teal,
onSurface: Colors.yellow,
side: BorderSide(color: Colors.teal, width: 2),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(25))),
),
onPressed: () {
print('Pressed');
},
),
您可以使用以下代码：
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(borderRadius))),
),
child: Text("ok"),
)
要在按钮中使用任何形状，请确保执行 Button 小部件内的所有代码：
**shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red) ),**
如果你想让它变成square，使用BorderRadius.circular(0.0)它会自动把它变成square。
按钮是这样的：
https://i.stack.imgur.com/spGWP.png
以下是给出 UI 屏幕的所有源代码：
Scaffold(
backgroundColor: Color(0xFF8E44AD),
body: new Center(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(90, 10, 20, 0),
padding: new EdgeInsets.only(top: 92.0),
child: Text(
"Currency Converter",
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
Container(
margin: EdgeInsets.only(),
padding: EdgeInsets.all(25),
child: TextFormField(
decoration: new InputDecoration(
filled: true,
fillColor: Colors.white,
labelText: "Amount",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
),
Container(
padding: EdgeInsets.all(25),
child: TextFormField(
decoration: new InputDecoration(
filled: true,
fillColor: Colors.white,
labelText: "From",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
),
Container(
padding: EdgeInsets.all(25),
child: TextFormField(
decoration: new InputDecoration(
filled: true,
fillColor: Colors.white,
labelText: "To",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
)),
),
),
SizedBox(height: 20.0),
MaterialButton(
height: 58,
minWidth: 340,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(12)),
onPressed: () {},
child: Text(
"CONVERT",
style: TextStyle(
fontSize: 24,
color: Colors.black,
),
),
color: Color(0xFFF7CA18),
),
],
),
),
),
);
通过将透明颜色传递给 BoxDecoration 内的颜色属性，您可以将此代码用于透明圆形按钮。例如。 color: Colors.transparent。此外，请注意此按钮仅使用 Container 和 GestureDetector 小部件。
Container(
height: 50.0,
child: GestureDetector(
onTap: () {},
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xFFF05A22),
style: BorderStyle.solid,
width: 1.0,
),
color: Colors.transparent,
borderRadius: BorderRadius.circular(30.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: Text(
"BUTTON",
style: TextStyle(
color: Color(0xFFF05A22),
fontFamily: 'Montserrat',
fontSize: 16,
fontWeight: FontWeight.w600,
letterSpacing: 1,
),
),
)
],
),
),
),
)
https://i.stack.imgur.com/8KHhI.png
如果有人正在寻找完整的圆形按钮，那么我是这样实现的：
Center(
child: SizedBox.fromSize(
size: Size(80, 80), // Button width and height
child: ClipOval(
child: Material(
color: Colors.pink[300], // Button color
child: InkWell(
splashColor: Colors.yellow, // splash color
onTap: () {}, // Button pressed
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.linked_camera), // Icon
Text("Picture"), // Text
],
),
),
),
),
),
)
RaisedButton(
child: Text("Button"),
onPressed: (){},
shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0),
side: BorderSide(color: Colors.red))
)
创建圆形按钮的最简单方法之一是使用 FlatButton，然后通过设置其 shape 属性来指定圆度。按照下面的代码
FlatButton（填充：EdgeInsets.all（30.0），颜色：Colors.black，形状：RoundedRectangleBorder（borderRadius：BorderRadius.circular（20.0）），孩子：孩子：文本（“按钮”，样式：TextStyle（颜色：Colors.white ), ), onPressed: () { print('按钮按下'); }, ),
注意：为了改变圆度调整 BorderRadius.circular() 里面的值
您还可以使用 ButtonTheme()：
https://i.stack.imgur.com/EZzOi.jpg
这是示例代码 -
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: () {},
),
),
在 Null 安全之后，请使用 ElevatedButton 而不是 RaisedButton，因为 RaisedButton 如文档所述已贬值。
child: ElevatedButton(
onPressed: () {},
child: const Text('Add item to the list'),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Common.buttonColor),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
),
),
https://i.stack.imgur.com/vxqTx.png
这是您的问题的代码。你只需要在 boxdecoration 中使用一个带有边框半径的简单容器。
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,
),
),
),
],
),
),
现在我们有一个图标按钮来实现圆形按钮的点击和覆盖。但是，背景颜色尚不可用，但可以通过 Circle avatar 小部件实现相同的效果，如下所示：
CircleAvatar(
backgroundColor: const Color(0xffF4F3FA),
child: IconButton(
onPressed: () => FlushbarHelper.createInformation(
message: 'Work in progress...')
.show(context),
icon: Icon(Icons.more_vert),
),
),
新的提升按钮
风格
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: () {
},
),
如果你想使用 MaterialButton 那么，
您可以添加 RoundedRectangleBorder Given in Shape 像这样，
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"),
),
您可以创建一个自定义视图并将其放在 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)),
),
),
),
),
另一个在 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');
},
),
Container(
width: yourWidth,
height: yourHeight ,
decoration: BoxDecoration(
borderRadius: radius,
gradient: yourGradient,
border: yourBorder),
child: FlatButton(
onPressed: {} (),
shape: RoundedRectangleBorder(borderRadius: radius),
.......
并使用相同的半径。
在 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"),
),
),
),
],
);
}
您可以将这种样式用于您的提升按钮，使其成为圆形
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),
),
使用 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'),)
将 TextButton 包装在 Container 小部件中，如下面的代码片段：
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 "),
),
)
shape: MaterialStateProperty.all<RoundedRectangleBorder>(...)部分并直接将RoundedRectangleBorder(...)分配给shape属性吗？MaterialStateProperty让它工作，只能使用RoundedRectangleBorder(...)。否则我会收到错误消息，如下所示：The argument type 'MaterialStateProperty<RoundedRectangleBorder>' can't be assigned to the parameter type 'OutlinedBorder?'.