Flutter中如何制作带onPressed属性的可复用ElevatedButton？

你遇到的问题核心出在这几个细节上：

• StatelessWidget成员未加final修饰：onPressedData没有用final声明，而StatelessWidget的成员变量必须是不可变的，这会导致组件状态异常，进而引发路由初始化失败这类错误。
• 多余的must_be_immutable忽略注释：当前组件的成员本就应该是不可变的，这个注释完全没必要，反而会掩盖潜在的语法问题。
• 组件使用时的参数传递问题：开启required this.onPressedData后，如果在路由页面中使用PrimaryButton时没传递合法的VoidCallback（比如传了null），就会触发初始化错误，表现为路由异常。

修复后的完整代码 #

// ignore_for_file: public_member_api_docs, sort_constructors_first
import 'package:flutter/material.dart';

class PrimaryButton extends StatelessWidget {
  final VoidCallback onPressedData;
  final String textButtonData;
  
  PrimaryButton({
    super.key,
    required this.onPressedData,
    required this.textButtonData,
  });

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressedData,
      style: ButtonStyle(
        fixedSize: const WidgetStatePropertyAll(Size(368, 49)),
        backgroundColor: WidgetStatePropertyAll(
          Theme.of(context).colorScheme.primaryContainer
        ),
      ),
      child: Text(
        textButtonData,
        style: TextStyle(
          color: Theme.of(context).colorScheme.onPrimaryContainer,
          fontWeight: FontWeight.bold,
          fontSize: 18
        )
      ),
    );
  }
}

关键修改说明 #

1. 给onPressedData和textButtonData都加上final修饰符，符合StatelessWidget的不可变特性，同时移除// ignore: must_be_immutable注释。
2. 直接将ElevatedButton的onPressed赋值为onPressedData，不再用空占位回调。
3. 给WidgetStatePropertyAll(Size(368, 49))加上const修饰，优化组件性能。

使用时的注意点 #

确保在路由页面中使用PrimaryButton时，传递合法的VoidCallback类型参数，比如：

PrimaryButton(
  textButtonData: "跳转页面",
  onPressedData: () {
    Navigator.push(context, MaterialPageRoute(builder: (context) => const TargetPage()));
  },
)

如果需要支持可选回调（允许不传），可以去掉required并设置默认值：

final VoidCallback? onPressedData;

PrimaryButton({
  super.key,
  this.onPressedData,
  required this.textButtonData,
});

// 对应ElevatedButton的onPressed写法：
onPressed: onPressedData ?? () {},

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