Flutter 中圆角按钮,渐变色按钮

如图所示

Flutter 中圆角按钮,渐变色按钮_第1张图片

思路

ElevatedButton组件,我在网上没有找到直接设置的圆角和渐变色背景的属性。笔者的思路是,将按钮的背景色和阴影去除,在其外包裹Container,设置外层容器的圆角和背景色即可。

代码

Container(
   width: 340,
   height: 49,
   //在此设置
   decoration: BoxDecoration(
     borderRadius: BorderRadius.circular(9),
     gradient: const LinearGradient(colors: [
       Color(0xffde53fc),
       Color(0xff846dfc),
       Color(0xff30c1fd),
     ]),
   ),
   child: ElevatedButton(
     onPressed: onTap,
     child: const Text(
       '立即存款',
       style: TextStyle(fontSize: 17, color: Colors.white),
     ),
     style: ButtonStyle(
       //去除阴影
       elevation: MaterialStateProperty.all(0),
       //将按钮背景设置为透明
       backgroundColor: MaterialStateProperty.all(Colors.transparent),
     ),
   ),
 )

你可能感兴趣的:(flutter,flutter,button,前端)