我目前正在Flutter开发一个Android应用程序。我如何添加一个圆形按钮?
当前回答
如果有人正在寻找完整的圆形按钮,那么我实现它的方式:
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
],
),
),
),
),
),
)
其他回答
创建圆角按钮最简单的方法之一是使用FlatButton,然后通过设置其shape属性指定圆度。遵循下面的代码
FlatButton ( 填充:EdgeInsets.all (30.0), 颜色:Colors.black, 形状:RoundedRectangleBorder ( borderRadius: BorderRadius.circular (20.0)), child: child: Text( “按钮”, TextStyle(颜色:Colors.white), ), onPressed:() { 打印(“按钮按下”); }, ),
注意:为了改变圆度,调整BorderRadius.circular()中的值
你可以使用这个样式为你的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),
),
更新
由于左侧按钮现在已弃用,请使用右侧按钮。
Deprecated --> Recommended
RaisedButton --> ElevatedButton
OutlineButton --> OutlinedButton
FlatButton --> TextButton
ElevatedButton
Using 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 ), ), ) Using 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( shape: BeveledRectangleBorder( borderRadius: BorderRadius.circular(12) ), ), )
OutlinedButton
Using 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), ), ), ) Using 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( shape: BeveledRectangleBorder( borderRadius: BorderRadius.circular(12), ), ), )
TextButton
TextButton也类似于ElevatedButton和OutlinedButton,但是,你只能看到按钮按下的形状。
你也可以使用ButtonTheme():
下面是示例代码
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: () {},
),
),
您可以简单地使用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),
),
),
)
输出:
更多信息:RSCoder
推荐文章
- 在Flutter中Column的子元素之间的空间
- Visual Studio代码- URI的目标不存在" package:flutter/material.dart "
- Flutter:升级游戏商店的版本代码
- 在一个子树中有多个英雄共享相同的标签
- 如何检查Flutter应用程序是否正在调试中运行?
- 在Flutter中向有状态小部件传递数据
- 未处理异常:ServicesBinding.defaultBinaryMessenger在绑定初始化之前被访问
- 出现键盘时,Flutter小部件将调整大小。如何预防这种情况?
- 使用CSS创建圆角
- 颤振-换行文本
- 如何在Dart中四舍五入到小数点后的给定精度程度?
- 添加一个启动屏幕颤振应用程序
- 在flutter中等同于wrap_content和match_parent ?
- 多行文本字段在扑动
- 如何在颤振文本下划线