Flutter开发中如何减少按钮组件的重复代码？

Flutter中针对这类重复UI组件，最佳实践是抽成独立的StatelessWidget，相比返回Widget的普通函数类型更安全，也更方便后续扩展功能。

步骤1：编写自定义渐变按钮组件 #

import 'package:flutter/material.dart';

class GradientStadiumButton extends StatelessWidget {
  // 可变参数
  final List<Color> gradientColors;
  final VoidCallback onTap;
  final IconData leadingIcon;
  final String buttonText;
  // 可选固定参数，可按需修改默认值
  final double height;
  final EdgeInsets padding;
  final Color textColor;
  final double fontSize;
  final Color iconColor;

  const GradientStadiumButton({
    super.key,
    // 原示例的渐变设为默认值，无需自定义时可以不传
    this.gradientColors = const [Colors.black, Colors.grey, Colors.white],
    required this.onTap,
    required this.leadingIcon,
    required this.buttonText,
    this.height = 60,
    this.padding = const EdgeInsets.all(8.0),
    this.textColor = Colors.white,
    this.fontSize = 20,
    this.iconColor = Colors.white,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: padding,
      child: Material(
        clipBehavior: Clip.antiAlias,
        shape: const StadiumBorder(),
        child: Ink(
          decoration: BoxDecoration(
            gradient: LinearGradient(colors: gradientColors),
          ),
          width: double.infinity,
          height: height,
          child: InkWell(
            onTap: onTap,
            child: ListTile(
              leading: Icon(leadingIcon, color: iconColor),
              title: Text(
                buttonText,
                style: TextStyle(color: textColor, fontSize: fontSize),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

步骤2：调用组件简化代码 #

原来的两个按钮可以直接简化为以下写法，新增10个以上按钮也仅需要传递对应可变参数即可，没有冗余代码：

// 马来语按钮（用默认渐变样式）
GradientStadiumButton(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const PrivacyRoute()),
    );
  },
  leadingIcon: Icons.menu_book,
  buttonText: 'Bahasa Melayu',
),
// 英语按钮（自定义渐变颜色）
GradientStadiumButton(
  gradientColors: const [Colors.blue, Colors.lightBlueAccent, Colors.white],
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const PrivacyRoute()),
    );
  },
  leadingIcon: Icons.menu_book,
  buttonText: 'English',
),

补充优化建议 #

• 如果按钮的点击逻辑大部分都是跳转页面，可以把onTap进一步封装成跳转路由的参数，直接传目标路由组件就能自动完成跳转，进一步减少重复代码
• 可以把常用的样式常量单独抽成一个常量文件，比如默认渐变颜色、默认高度、默认字体大小，统一管理方便后续全局修改

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