使用flutter开发一个渐变色按钮

因为项目需要,需要使用flutter开发一个渐变色的按钮,flutter自带的按钮样式不太好调整,所以需要自定义实现,实现的思路就是使用GestureDetector嵌套Container,Container里面嵌套text实现。

实现的效果:

使用flutter开发一个渐变色按钮_第1张图片

实现的代码:

            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("/");
                });
              },
            )

 

 

你可能感兴趣的:(多端开发,flutter)