Flutter 渐变色按钮-带波纹点击效果

一、前言

初次使用Flutter开发应用，很多效果的实现都处于探索阶段，现将实现的渐变按钮效果做个记录，以备查阅。

二、效果

• 1、渐变色按钮，带波纹点击效果

// 渐变色按钮
Widget gradientButton() {
    return Container(
      margin: EdgeInsets.fromLTRB(30, 35, 30, 0),
      decoration: BoxDecoration(
          gradient: LinearGradient(colors: [Colors.blue, Colors.red]),// 渐变色
          borderRadius: BorderRadius.circular(25)
      ),
      child: RaisedButton(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(25)
        ),
        color: Colors.transparent, // 设为透明色
        elevation: 0, // 正常时阴影隐藏
        highlightElevation: 0, // 点击时阴影隐藏
        onPressed: (){},
        child: Container(
          alignment: Alignment.center,
          height: 50,
          child: Text('登 录', style: TextStyle(color: Colors.white, fontSize: 20),),
        ),
      ),
    );
  }

渐变色按钮效果图.gif