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';

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

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

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

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

  /// 子组件
  final Widget child;

  /// 点击回调
  final VoidCallback onPressed;

  const GradientBtn({
    super.key,
    required this.colors,
    this.color,
    this.begin = Alignment.centerLeft,
    this.end = Alignment.centerRight,
    this.radius = 50,
    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 GestureDetector(
      onTap: () {
        onPressed();
      },
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 14.h),
        width: double.maxFinite,
        // 渐变背景
        decoration: decoration,
        child: Center(child: child),
      ),
    );
  }
}

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

  /// 按钮文字
  final String text;

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

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

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

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

  /// 点击回调
  final VoidCallback onPressed;

  const GradientTextBtn(
    this.text, {
    super.key,
    this.leftIcon,
    this.color,
    this.colors = const [ColorName.purpleGradient3, ColorName.purpleGradient4],
    this.begin = Alignment.centerLeft,
    this.end = Alignment.centerRight,
    this.radius = 50,
    required this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    return GradientBtn(
      color: color,
      colors: colors,
      radius: radius,
      onPressed: onPressed,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 左侧图标
          Visibility(
            visible: leftIcon != null,
            child: Container(
              margin: EdgeInsets.only(right: 4.w),
              child: leftIcon,
            ),
          ),
          Text(
            text,
            style: TextStyle(
              color: ColorName.white,
              fontSize: 16.sp,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    );
  }
}