[英]Create a rounded button / button with border-radius in Flutter
I'm currently developing an Android app in Flutter. How can I add a rounded button?我目前正在Flutter开发一个Android的app,如何添加一个圆角按钮?
1. Solution Summary一、解决方案总结
FlatButton
and RaisedButton
are deprecated.不推荐使用
FlatButton
和RaisedButton
。
So, you can use shape
which placed in the style
property, for TextButton
and ElevatedButton
.因此,您可以使用放置在
style
属性中的shape
,用于TextButton
和ElevatedButton
。
There are some changes since Flutter 2.0:自 Flutter 2.0 以来有一些变化:
style
: the property type has changed toButtonStyle
style
: 属性类型已更改为ButtonStyle
shape
: the property type has changed to MaterialStateProperty<T>
shape
:属性类型已更改为MaterialStateProperty<T>
2. Rounded Button 2. 圆形按钮
Inside the style
property exists the shape
property:在
style
属性中存在shape
属性:
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red)
)
)
)
Square Button方形按钮
For a square button you can use ElevatedButton
or otherwise add:对于方形按钮,您可以使用
ElevatedButton
或以其他方式添加:
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.zero,
side: BorderSide(color: Colors.red)
)
)
)
Complete Example完整示例
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
)
]
)
You can use the RaisedButton Widget.您可以使用 RaisedButton 小部件。 The raised button widget has a shape property which you can use as shown in the below snippet.
凸起的按钮小部件有一个 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: () {},
),
Since, the left sides buttons are now deprecated, use the right sided ones.由于左侧按钮现已弃用,请使用右侧按钮。
Deprecated --> Recommended
RaisedButton --> ElevatedButton
OutlineButton --> OutlinedButton
FlatButton --> TextButton
ElevatedButton
Using StadiumBorder
使用
StadiumBorder
ElevatedButton( onPressed: () {}, child: Text('Button'), style: ElevatedButton.styleFrom(shape: StadiumBorder()), )
Using RoundedRectangleBorder
使用
RoundedRectangleBorder
ElevatedButton( onPressed: () {}, child: Text('Button'), style: ElevatedButton.styleFrom( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12), // <-- Radius ), ), )
Using CircleBorder
使用
CircleBorder
ElevatedButton( onPressed: () {}, child: Text('Button'), style: ElevatedButton.styleFrom( shape: CircleBorder(), padding: EdgeInsets.all(24), ), )
Using BeveledRectangleBorder
使用
BeveledRectangleBorder
ElevatedButton( onPressed: () {}, child: Text('Button'), style: ElevatedButton.styleFrom( shape: BeveledRectangleBorder( borderRadius: BorderRadius.circular(12) ), ), )
OutlinedButton
Using StadiumBorder
使用
StadiumBorder
OutlinedButton( onPressed: () {}, child: Text('Button'), style: OutlinedButton.styleFrom( shape: StadiumBorder(), ), )
Using RoundedRectangleBorder
使用
RoundedRectangleBorder
OutlinedButton( onPressed: () {}, child: Text('Button'), style: OutlinedButton.styleFrom( shape: BeveledRectangleBorder( borderRadius: BorderRadius.circular(12), ), ), )
Using CircleBorder
:使用
CircleBorder
:
OutlinedButton( onPressed: () {}, child: Text('Button'), style: OutlinedButton.styleFrom( shape: CircleBorder(), padding: EdgeInsets.all(24), ), )
Using BeveledRectangleBorder
使用
BeveledRectangleBorder
OutlinedButton( onPressed: () {}, child: Text('Button'), style: OutlinedButton.styleFrom( shape: BeveledRectangleBorder( borderRadius: BorderRadius.circular(12), ), ), )
TextButton
also works similar to ElevatedButton
and OutlinedButton
, however you can only see the shapes when the button is pressed. TextButton
工作TextButton
也类似于ElevatedButton
和OutlinedButton
,但是您只能在按下按钮时看到形状。
Since September 2020, Flutter 1.22.0:自 2020 年 9 月以来,Flutter 1.22.0:
Both "RaisedButton" and "FlatButton" are deprecated.
“RaisedButton”和“FlatButton”均已弃用。
ElevatedButton
: ElevatedButton
: Code:代码:
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),
),
),
)
Don't forget, there's also an .icon
constructor to add an icon easily:不要忘记,还有一个
.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),
),
),
)
OutlinedButton
: OutlinedButton
: Code:代码:
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),
),
),
)
TextButton
: TextButton
: You can always use TextButton
if you don't want an outline or color fill.如果您不想要轮廓或颜色填充,您可以随时使用
TextButton
。
You can simply use RaisedButton您可以简单地使用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),
),
),
)
Output:输出:
You can simply use RaisedButton
or you can use InkWell
to get a custom button and also properties like onDoubleTap
, onLongPress
, etc. :您可以简单地使用
RaisedButton
或者您可以使用InkWell
来获取自定义按钮以及onDoubleTap
、 onLongPress
等属性:
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),),),
),
),
If you want to use the splashColor
and highlightColor
properties in the InkWell
widget, use the Material
widget as the parent of the InkWell
widget instead of decorating the container (deleting the decoration property).如果要在
InkWell
小部件中使用splashColor
和highlightColor
属性,请使用Material
小部件作为InkWell
小部件的父级,而不是装饰容器(删除装饰属性)。 Read about why here . 在这里阅读原因。
You can use the below code to make a rounded button with a gradient color.您可以使用以下代码制作带有渐变颜色的圆形按钮。
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: () {
},
),
);
To use any shape in your button , make sure you perform all the code inside the Button widget:要在button 中使用任何形状,请确保执行Button小部件中的所有代码:
**shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red) ),**
If you want make it is square , use BorderRadius.circular(0.0)
It automatically makes it into a square .如果你想让它变成正方形,使用
BorderRadius.circular(0.0)
它会自动使它变成正方形。
The button is like this:按钮是这样的:
Here is the all source code for the give UI screen:这是给定 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),
),
],
),
),
),
);
You can use this code for a transparent rounded button by passing a transparent color to the color property inside BoxDecoration
.通过将透明颜色传递给
BoxDecoration
的 color 属性,您可以将此代码用于透明圆形按钮。 eg.例如。
color: Colors.transparent
. color: Colors.transparent
。 Also, take note that this button makes use of only the Container
and GestureDetector
widgets.另外,请注意此按钮仅使用
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,
),
),
)
],
),
),
),
)
you can use this code:您可以使用此代码:
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(borderRadius))),
),
child: Text("ok"),
)
If anybody is looking for complete circular button then I achieved it this way:如果有人正在寻找完整的圆形按钮,那么我是这样实现的:
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
],
),
),
),
),
),
)
Different ways to create a rounded button are as follows:创建圆形按钮的不同方法如下:
FlatButton Button with Shape RoundedRectangleBorder FlatButton 按钮,形状为 RoundedRectangleBorder
FlatButton(
minWidth: 260,
height: 60,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red)),
color: Colors.white,
textColor: Colors.red,
padding: EdgeInsets.all(8.0),
onPressed: () {},
child: Text(
"Add to Cart".toUpperCase(),
style: TextStyle(
fontSize: 14.0,
),
),
),
RaisedButton Button with Shape RoundedRectangleBorder形状为 RoundedRectangleBorder 的 RaisedButton 按钮
RaisedButton(
padding:
EdgeInsets.only(left: 100, right: 100, top: 20, bottom: 20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(28.0),
side: BorderSide(color: Colors.red)),
onPressed: () {},
color: Colors.red,
textColor: Colors.white,
child: Text("Buy now".toUpperCase(),
style: TextStyle(fontSize: 14)),
),
RaisedButton Button with Shape StadiumBorder()带有形状 StadiumBorder() 的 RaisedButton 按钮
RaisedButton(
padding:
EdgeInsets.only(left: 100, right: 100, top: 20, bottom: 20),
shape: StadiumBorder(),
onPressed: () {},
child: Text("Button"),
)
RaisedButton Button with ClipRRect带有 ClipRRect 的 RaisedButton 按钮
ClipRRect(
borderRadius: BorderRadius.circular(40),
child: RaisedButton(
padding: EdgeInsets.only(
left: 100, right: 100, top: 20, bottom: 20),
onPressed: () {},
child: Text("Button"),
),
)
RaisedButton Button with ClipOval带 ClipOval 的 RaisedButton 按钮
ClipOval(
child: RaisedButton(
onPressed: () {},
child: Text("Button"),
),
),
RaisedButton Button with ButtonTheme带有 ButtonTheme 的 RaisedButton 按钮
ButtonTheme(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
child: RaisedButton(
onPressed: () {},
child: Text("Button"),
),
)
A practical demonstration of a round button can be found in the below dartpad link:圆形按钮的实际演示可以在下面的 dartpad 链接中找到:
After the Null safety, use ElevatedButton not RaisedButton because RaisedButton is depreciated as the docs says.在 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),
),
),
),
),
You should probably familiarize yourself with this page of the docs in particular: rounding corners . 您可能应该熟悉这个文档的页面: 圆角 。
The docs show you how to change the styling of a component and the equivalent styling in css, if you are familiar with that already. 如果您已经熟悉,那么文档将向您展示如何更改组件的样式以及css中的等效样式。
RaisedButton(
child: Text("Button"),
onPressed: (){},
shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0),
side: BorderSide(color: Colors.red))
)
You can also use ButtonTheme()
:您还可以使用
ButtonTheme()
:
Here is example code -这是示例代码 -
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: () {},
),
),
One of the simplest ways to create a rounded button is to use a FlatButton
and then specify the roundness by setting its shape
property.创建圆形按钮的最简单方法之一是使用
FlatButton
,然后通过设置其shape
属性来指定圆度。 Follow the code below按照下面的代码
FlatButton( padding: EdgeInsets.all(30.0), color: Colors.black, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(20.0)), child: child: Text( "Button", style: TextStyle(color: Colors.white), ), onPressed: () { print('Button pressed'); }, ),
Note: In order to change the roundness adjust the value inside
BorderRadius.circular()
注意:为了改变圆度调整
BorderRadius.circular()
的值
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: () {
},
),
Here is the code for your problem.这是您的问题的代码。 You just have to take a simple container with a border radius in boxdecoration.
你只需要在 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,
),
),
),
],
),
),
Now we have an Icon button to achieve a rounded button click and overlay.现在我们有一个图标按钮来实现圆角按钮点击和覆盖。 However, the background color is not yet available, but the same can be achieved by the Circle avatar widget as follows:
但是,背景颜色尚不可用,但同样可以通过 Circle avatar 小部件实现,如下所示:
CircleAvatar(
backgroundColor: const Color(0xffF4F3FA),
child: IconButton(
onPressed: () => FlushbarHelper.createInformation(
message: 'Work in progress...')
.show(context),
icon: Icon(Icons.more_vert),
),
),
Here is another solution:这是另一个解决方案:
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)),
),
),
),
),
You can create a custom view and put it inside a GestureDetector for it to behave like a button.您可以创建一个自定义视图并将其放入 GestureDetector 中,使其表现得像一个按钮。 The benefit is that you can provide endless types of custom decoration (including making it round with specified radius) to the container.
好处是您可以为容器提供无限类型的自定义装饰(包括使其具有指定半径的圆形)。
Container(
width: yourWidth,
height: yourHeight ,
decoration: BoxDecoration(
borderRadius: radius,
gradient: yourGradient,
border: yourBorder),
child: FlatButton(
onPressed: {} (),
shape: RoundedRectangleBorder(borderRadius: radius),
.......
and use the same radius.并使用相同的半径。
Another cool solution that works in 2021:另一个适用于 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');
},
),
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"),
),
),
),
],
);
} }
you can use this style for your elevatedButton to make it circular您可以将这种样式用于提升的按钮以使其成为圆形
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),
),
With Flutter version 2, try this用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 with round border color:带有圆形边框颜色的容器:
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.red),
),
child: Text("Some Text"),
)
You can always use a material button if you are using the Material App as your main Widget.如果您使用 Material App 作为您的主要 Widget,您始终可以使用一个材质按钮。
Padding(
padding: EdgeInsets.symmetric(vertical: 16.0),
child: Material(
borderRadius: BorderRadius.circular(30.0),//Set this up for rounding corners.
shadowColor: Colors.lightBlueAccent.shade100,
child: MaterialButton(
minWidth: 200.0,
height: 42.0,
onPressed: (){//Actions here//},
color: Colors.lightBlueAccent,
child: Text('Log in', style: TextStyle(color: Colors.white),),
),
),
)
In Flutter, the
Container()
widget is used for styling your widget.在 Flutter 中,
Container()
小部件用于设置小部件的样式。 Using theContainer()
widget, you can set a border or rounded corner of any widget.使用
Container()
小部件,您可以设置任何小部件的边框或圆角。
If you want to set any type of styling and set the decoration, put that widget into the Container()
widget.如果您想设置任何类型的样式并设置装饰,请将该小部件放入
Container()
小部件中。 That provides many properties to the decoration.这为装饰提供了许多属性。
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"),
)
Wrap a TextButton in a Container widget like the below code snippet:将 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 "),
),
)
Use TextButton instead.请改用TextButton 。
Buttons like the FlatButton, RaisedButton and OutlineButton has been said to be deprecated since October 2020. This is one of the Flutter development team's effort to simplify and make the Flutter API consistent, you can customize its style by using style property.据说 FlatButton、RaisedButton 和 OutlineButton 等按钮自 2020 年 10 月起已被弃用。 这是 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');
},
),
MaterialButton
then,MaterialButton
那么,RoundedRectangleBorder
Given in Shape
Like this,Shape
添加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"),
),
There is another way to do this-Just use FloatingActionButton for Proper Rounded Button.还有另一种方法可以做到这一点 - 只需将 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),
),
)
Try this:尝试这个:
SizedBox(
height: 40.0,
child: MaterialButton(
child: Text("Button"),
color: Colors.blue,
disabledColor: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0), // Change your border radius here
),
),
onPressed: () {},
),
),
RawMaterialButton is better suited I think.我认为 RawMaterialButton 更适合。
RawMaterialButton(
onPressed: () {},
elevation: 2.0,
fillColor: Colors.white,
child: Icon(
Icons.pause,
size: 35.0,
),
padding: EdgeInsets.all(15.0),
shape: CircleBorder(),
)
In the new update flutter 3.0
flutter uses Material 3
guidelines.在新更新
flutter 3.0
flutter 中使用Material 3
指南。
According to which the default border of buttons are rounded .根据它,按钮的默认边框是圆形的。
Default Button
ElevatedButton(
onPressed: () {}, child: const Text("Default Button ")),
Button with Border Radius Zero
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.zero)),
onPressed: () {},
child: const Text("Border Radius Zero ")),
Button with custom border radius
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50))),
onPressed: () {},
child: const Text("Border Radius Custom ")),
FilledButton
, TextButton
and the like.FilledButton
、 TextButton
等使用相同的逻辑。 Refer https://m3.material.io/components/all-buttons for button style.按钮样式参考https://m3.material.io/components/all-buttons 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.