我目前正在Flutter开发一个Android应用程序。我如何添加一个圆形按钮?
当前回答
这里有另一个解决方案:
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. 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
这里有另一个解决方案:
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');
},
),
试试这个:
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: () {},
),
),
你可以简单地使用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),),),
),
),
如果你想在InkWell小部件中使用splashColor和highlightColor属性,使用Material小部件作为InkWell小部件的父部件,而不是装饰容器(删除装饰属性)。在这里阅读原因。