AiKeyboard2025/lib/widget/gradient_btn.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../resource/assets.gen.dart';
import '../resource/colors.gen.dart';
import '../resource/string.gen.dart';

/// 渐变色按钮
class GradientBtn extends StatelessWidget {
  /// 纯色颜色
  final Color? color;

  /// 是否启用
  final bool enable;

  /// 渐变颜色参数
  final List<Color> colors;

  /// 渐变方向
  final AlignmentGeometry begin;
  final AlignmentGeometry end;

  /// 按钮圆角半径
  final double radius;

  /// 内边距
  final EdgeInsetsGeometry? padding;

  /// 子组件
  final Widget child;

  /// 点击回调
  final VoidCallback onPressed;

  const GradientBtn({
    super.key,
    required this.colors,
    this.color,
    this.enable = true,
    this.begin = Alignment.centerLeft,
    this.end = Alignment.centerRight,
    this.radius = 50,
    this.padding = const EdgeInsets.symmetric(vertical: 14),
    required this.child,
    required this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    Decoration decoration;
    // 优先使用纯色，如果没有纯色，则使用渐变色
    if (color != null) {
      decoration = BoxDecoration(
        color: color,
        borderRadius: BorderRadius.all(Radius.circular(radius)),
      );
    } else {
      // 渐变色
      decoration = ShapeDecoration(
        gradient: LinearGradient(colors: colors, begin: begin, end: end),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(radius),
        ),
      );
    }
    return Center(
      child: GestureDetector(
        onTap: () {
          onPressed();
        },
        child: Stack(
          children: [
            Container(
              padding: padding,
              width: double.maxFinite,
              // 渐变背景
              decoration: decoration,
              child: child,
            ),
            // 禁用状态的蒙层
            Positioned(
              left: 0,
              top: 0,
              right: 0,
              bottom: 0,
              child: !enable ? _buildDisableMask() : SizedBox.shrink(),
            ),
          ],
        ),
      ),
    );
  }

  /// 禁用状态的蒙层
  Widget _buildDisableMask() {
    return Container(
      // 宽和高，都匹配父组件
      width: double.infinity,
      height: double.infinity,
      decoration: BoxDecoration(
        color: ColorName.white.withOpacity(0.8),
        borderRadius: BorderRadius.all(Radius.circular(radius)),
      ),
    );
  }
}

/// 渐变按钮，中间为文字，文字左边是一个图标
class GradientTextBtn extends StatelessWidget {
  /// 文字左边的图标
  final Image? leftIcon;

  /// 文字左边的图标的边距
  final EdgeInsetsGeometry? leftIconMargin;

  /// 按钮文字
  final String text;

  /// 是否启用
  final bool enable;

  /// 描述文字
  final String? desc;

  /// 纯色颜色
  final Color? color;

  /// 渐变颜色参数
  final List<Color> colors;

  /// 渐变方向
  final AlignmentGeometry begin;
  final AlignmentGeometry end;

  /// 按钮圆角半径
  final double radius;

  /// 内边距
  final EdgeInsetsGeometry? padding;

  /// 点击回调
  final VoidCallback onPressed;

  /// 操作按钮，带解锁按钮
  /// [isUnlock] 是否已解锁
  static GradientTextBtn withUnlock(
    bool isUnlock, {
    Image? leftIcon,
    EdgeInsetsGeometry? leftIconMargin = const EdgeInsets.only(right: 4),
    String? text,
    List<Color>? colors,
    Color? color,
    String? desc,
    double radius = 50,
    EdgeInsetsGeometry? padding = const EdgeInsets.symmetric(vertical: 14),
    required VoidCallback onPressed,
  }) {
    String btnText = text ?? "";
    if (btnText.isEmpty) {
      btnText = StringName.intimacyUnlockAnalyse;
    }
    // 解锁图标，非VIP会员时，才显示锁图标
    if (!isUnlock) {
      leftIcon ??= Assets.images.iconIntimacyAnalyseUnlock.image(
        width: 22,
        height: 22,
      );
    }
    // 渐变色
    if (colors != null) {
      return GradientTextBtn(
        btnText,
        desc: desc,
        colors: colors,
        leftIcon: leftIcon,
        leftIconMargin: leftIconMargin,
        radius: radius,
        padding: padding,
        onPressed: onPressed,
      );
    } else {
      // 纯色
      return GradientTextBtn(
        btnText,
        desc: desc,
        color: color ?? ColorName.colorBrand,
        leftIcon: leftIcon,
        leftIconMargin: leftIconMargin,
        radius: radius,
        padding: padding,
        onPressed: onPressed,
      );
    }
  }

  const GradientTextBtn(
    this.text, {
    super.key,
    this.leftIcon,
    this.leftIconMargin,
    this.desc,
    this.color,
    this.enable = true,
    this.colors = const [ColorName.purpleGradient3, ColorName.purpleGradient4],
    this.begin = Alignment.centerLeft,
    this.end = Alignment.centerRight,
    this.radius = 50,
    this.padding = const EdgeInsets.symmetric(vertical: 14),
    required this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    String descStr = desc ?? "";
    return GradientBtn(
      color: color,
      colors: colors,
      radius: radius,
      onPressed: onPressed,
      padding: padding,
      enable: enable,
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 左侧图标
              Visibility(
                visible: leftIcon != null,
                child: Container(margin: leftIconMargin, child: leftIcon),
              ),
              // 文字
              Text(
                text,
                style: TextStyle(
                  color: ColorName.white,
                  fontSize: 16.sp,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
          // 描述
          Visibility(
            visible: descStr.isNotEmpty,
            child: Container(
              margin: EdgeInsets.only(top: 3.h),
              child: Text(
                descStr,
                style: TextStyle(
                  color: ColorName.white,
                  fontSize: 10.sp,
                  fontWeight: FontWeight.w400,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}