Flutter封装自定义按钮（过渡色、水波纹）

Flutter封装自定义按钮（过渡色、水波纹）

全局公用的按钮组件，用的时候不用写一大坨了，直接往里面传值就好了

注意！！！！
这里面的ScreenAdapter是我封装的适配方法，用的时候替换为自己的就好了

import 'package:flutter/material.dart';

typedef FnCallBack = void Function();

class CustomButton extends StatelessWidget {
  final String btnText; // 按钮文字
  final FnCallBack onFn; // 点击回调方法
  final Color? btnBg; // 按钮背景色
  final double textSize; // 文字大小
  final Color textColor; // 文字颜色
  final double btnW; // 按钮宽
  final double btnH; // 按钮高
  final bool gradient; // 是否有过渡
  final double gradientW; // 过渡按钮宽
  final double gradientH; // 过渡按钮高
  final List<Color>? gradientColor; // 过渡色

  CustomButton({
    super.key,
    required this.btnText,
    required this.onFn,
    this.textSize = 16,
    this.btnW = 161,
    this.btnH = 53,
    this.btnBg,
    this.textColor = Colors.white,
    this.gradient = false,
    this.gradientW = 100,
    this.gradientH = 30,
    this.gradientColor,
  });

  @override
  Widget build(BuildContext context) {
    return gradient
        ? gradientButtonText(
            gradientW: gradientW,
            gradientH: gradientH,
            gradientColor: gradientColor,
            btnWidget: Button(
              btnW: btnW,
              btnH: btnH,
              btnText: btnText,
              textSize: textSize,
              gradient: gradient,
              btnBg: btnBg,
              textColor: textColor,
              onFn: onFn,
            ))
        : Button(
            btnW: btnW,
            btnH: btnH,
            btnText: btnText,
            textSize: textSize,
            gradient: gradient,
            btnBg: btnBg,
            textColor: textColor,
            onFn: onFn,
          );
  }
}

// 按钮
class Button extends StatelessWidget {
  final String btnText;
  final FnCallBack onFn;
  final double textSize;
  final bool gradient;
  final Color textColor;
  final Color? btnBg; // 按钮背景色
  final double btnW; // 按钮宽
  final double btnH; // 按钮高
  Button(
      {super.key,
      required this.btnText,
      required this.textSize,
      required this.gradient,
      required this.btnBg,
      required this.textColor,
      required this.btnW,
      required this.btnH,
      required this.onFn});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: ScreenAdapter.w(btnW),
      height: ScreenAdapter.w(btnH),
      child: ElevatedButton(
          onPressed: onFn,
          style: ButtonStyle(
              //去除阴影
              elevation: MaterialStateProperty.all(0),
              //将按钮背景设置为透明
              backgroundColor: MaterialStateProperty.all(
                  gradient ? Colors.transparent : btnBg),
              shape: MaterialStateProperty.all(const StadiumBorder(
                  side: BorderSide(
                width: 28,
                style: BorderStyle.none,
              )))),
          clipBehavior: Clip.hardEdge,
          child: ButtonText(
              btnText: btnText, textSize: textSize, textColor: textColor)),
    );
  }
}

// 过渡效果
class gradientButtonText extends StatelessWidget {
  final Widget btnWidget;
  final double gradientW;
  final double gradientH;
  final List<Color>? gradientColor; // 过渡色
  gradientButtonText({
    super.key,
    required this.btnWidget,
    required this.gradientW,
    required this.gradientH,
    required this.gradientColor,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: ScreenAdapter.w(gradientW),
      height: ScreenAdapter.h(gradientH),
      decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: gradientColor!, // 保证不会为null
          ),
          borderRadius: const BorderRadius.all(Radius.circular(50.0))),
      child: btnWidget,
    );
  }
}

// 按钮文字
class ButtonText extends StatelessWidget {
  late String btnText;
  late double textSize;
  final Color textColor;
  ButtonText(
      {super.key,
      required this.btnText,
      required this.textSize,
      required this.textColor});

  @override
  Widget build(BuildContext context) {
    return Container(
        alignment: Alignment.center,
        child: Text(
          btnText,
          style: TextStyle(
              fontSize: ScreenAdapter.size(textSize), color: textColor),
        ));
  }
}

使用

CustomButton(
  btnText: 'Login',
  textSize: 14,
  gradient: true,
  gradientColor: [Colors.red, Colors.green],
  onFn: () {},
),

CustomButton(
  btnText: 'Sign up',
  textSize: 14,
  btnBg: const Color(0xffF5F6FA),
  btnH: 50,
  textColor: Colors.black,
  onFn: () {},
)