因为项目需要,需要使用flutter开发一个渐变色的按钮,flutter自带的按钮样式不太好调整,所以需要自定义实现,实现的思路就是使用GestureDetector嵌套Container,Container里面嵌套text实现。
实现的效果:
实现的代码:
GestureDetector(
child: Container(
width: 190,
height: 80,
decoration: BoxDecoration(
gradient: const LinearGradient(colors: [
Color.fromRGBO(73, 42, 229, 1),
Color.fromRGBO(111, 30, 155, 1),
Color.fromRGBO(225, 33, 67, 1)
], begin: Alignment.topLeft, end: Alignment.bottomRight),
borderRadius: BorderRadius.circular(15)),
child: const Center(
child: Text(
"点击连接",
style: TextStyle(color: Colors.white, fontSize: 26),
),
),
),
onTap: () {
print("点击按钮");
LoadingDialog.show();
Future.delayed(Duration(seconds: 2), () {
print("隐藏loading");
Get.back();
Get.toNamed("/");
});
},
)
文章来源地址https://www.toymoban.com/news/detail-809451.html文章来源:https://www.toymoban.com/news/detail-809451.html
到了这里,关于使用flutter开发一个渐变色按钮的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!