Flutter如何将Button Widget提取至单独文件并在主文件中引入使用

操作步骤 #

1. 新建单独的按钮组件文件
   在项目lib目录下新建custom_buttons.dart文件，写入以下代码：

import 'package:flutter/material.dart';

// 可配置的通用按钮组件，也可以根据需求新增更多可配置参数
class CustomTextButton extends StatelessWidget {
  // 可传入参数：点击事件、图标、按钮文字
  final VoidCallback onPressed;
  final IconData icon;
  final String labelText;

  const CustomTextButton({
    super.key,
    required this.onPressed,
    required this.icon,
    required this.labelText,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(0.0, 9.0, 0.0, 0.0),
      child: TextButton.icon(
        onPressed: onPressed,
        icon: Column(
          children: [
            Icon(
              icon,
              color: Colors.white,
              size: 75,
            ),
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: Text(
                labelText,
                style: const TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
          ],
        ),
        label: const Text(
          '',
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

// 如果需要固定样式的添加按钮，也可以直接写死参数快速调用
class CustomAddButton extends StatelessWidget {
  final VoidCallback? onPressed;
  const CustomAddButton({super.key, this.onPressed});

  @override
  Widget build(BuildContext context) {
    return CustomTextButton(
      onPressed: onPressed ?? () {},
      icon: Icons.add,
      labelText: 'Label',
    );
  }
}

2. 在主文件中导入组件
   在你的主页面dart文件顶部引入该文件，注意路径要和你存放的位置匹配：

// 若custom_buttons.dart和主文件同目录，写法如下
import 'custom_buttons.dart';
// 若放在lib/widgets目录下，则改为 import 'widgets/custom_buttons.dart';

3. 替换原有注释位置的代码
   把原来//buttons的位置替换为你需要的按钮组件即可，示例如下：

children: [
  // 直接调用封装好的按钮，可重复多次使用
  CustomAddButton(
    onPressed: () {
      // 写当前页面对应的点击逻辑
      print('点击了添加按钮');
    },
  ),
  CustomAddButton(),
  // 也可以调用通用组件自定义按钮样式
  CustomTextButton(
    onPressed: () {},
    icon: Icons.delete,
    labelText: '删除',
  )
],

如果不需要可配置参数，只需要完全复用你提供的固定样式按钮，直接把按钮对应的代码作为无参组件返回即可。

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