基于CupertinoButton创建带自定义构造函数的Flutter自定义按钮

要实现你想要的按钮调用方式，需要给类添加必要属性、通过工厂构造函数区分变体，并根据类型加载对应样式。以下是完整实现：

完整代码 #

import 'package:flutter/cupertino.dart';

// 定义按钮变体类型
enum MainButtonVariant { success, danger }

class MainCustomButton extends StatefulWidget {
  // 公共属性
  final String label;
  final VoidCallback? onPressed;
  final MainButtonVariant variant;

  // success变体工厂构造函数
  factory MainCustomButton.success({
    Key? key,
    required String label,
    required VoidCallback? onPressed,
  }) {
    return MainCustomButton._(
      key: key,
      label: label,
      onPressed: onPressed,
      variant: MainButtonVariant.success,
    );
  }

  // danger变体工厂构造函数
  factory MainCustomButton.danger({
    Key? key,
    required String label,
    required VoidCallback? onPressed,
  }) {
    return MainCustomButton._(
      key: key,
      label: label,
      onPressed: onPressed,
      variant: MainButtonVariant.danger,
    );
  }

  // 私有构造函数，统一初始化属性
  const MainCustomButton._({
    required Key? key,
    required this.label,
    required this.onPressed,
    required this.variant,
  }) : super(key: key);

  @override
  State<MainCustomButton> createState() => _MainCustomButtonState();
}

class _MainCustomButtonState extends State<MainCustomButton> {
  // 根据变体获取对应样式
  Map<String, dynamic> _getButtonStyle() {
    switch (widget.variant) {
      case MainButtonVariant.success:
        return {
          'bgColor': const Color(0xFF34C759),
          'textColor': CupertinoColors.white,
        };
      case MainButtonVariant.danger:
        return {
          'bgColor': const Color(0xFFFF3B30),
          'textColor': CupertinoColors.white,
        };
    }
  }

  @override
  Widget build(BuildContext context) {
    final style = _getButtonStyle();
    return CupertinoButton(
      color: style['bgColor'] as Color,
      onPressed: widget.onPressed,
      child: Text(
        widget.label,
        style: TextStyle(color: style['textColor'] as Color),
      ),
    );
  }
}

调用方式（完全匹配你的需求） #

MainCustomButton.success(
  label: 'ok',
  onPressed: () {
    // 处理成功按钮点击逻辑
  },
);

MainCustomButton.danger(
  label: 'delete',
  onPressed: () {
    // 处理危险按钮点击逻辑
  },
);

核心说明 #

• 用工厂构造函数封装不同变体的创建逻辑，对外提供简洁的调用入口
• 定义MainButtonVariant枚举明确区分按钮类型，避免传参错误
• 通过私有构造函数统一初始化所有属性，保证数据一致性
• 在State中根据widget.variant加载对应样式，后续可轻松扩展更多变体（如warning、primary等）

内容的提问来源于stack exchange，提问作者Thorvald