我目前正在Flutter开发一个Android应用程序。我如何添加一个圆形按钮?
当前回答
您可以使用下面的代码创建一个渐变颜色的圆形按钮。
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: () {
},
),
);
其他回答
使用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'),)
通过将一个透明的颜色传递给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,
),
),
)
],
),
),
),
)
您可以使用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: () {},
),
试试这个:
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
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 ?
- 多行文本字段在扑动
- 如何在颤振文本下划线