如何为外部调用的Flutter自定义弹窗（CustomDialog）设置按钮点击事件，实现跳转（Push）或关闭（Pop）的参数化控制

我来帮你搞定这个自定义弹窗的点击事件参数化需求，咱们一步步调整代码：

1. 修正pressedAction的类型声明 #

你当前的final void pressedAction;类型声明是错误的，因为我们需要传递的是一个可执行的函数，而不是void类型。考虑到你在按钮中用了await，我们应该声明为异步函数类型：

final Future<void> Function() pressedAction;

如果你的点击逻辑不需要异步操作，也可以用Flutter内置的VoidCallback（本质是void Function()）：

final VoidCallback pressedAction;

2. 更新CustomDialog的构造函数 #

注意现在Flutter已经推荐使用required关键字（替代旧的@required注解，适配空安全），所以更新后的构造函数如下：

CustomDialog({
  required this.title,
  required this.type,
  required this.description,
  required this.buttonText,
  required this.pressedAction,
});

3. 优化FlatButton的onPressed逻辑 #

你可以直接把pressedAction赋值给onPressed，如果是异步函数，await也能正常工作：

FlatButton(
  minWidth: double.infinity,
  color: kAzureDarkColor,
  textColor: Colors.white,
  disabledColor: Colors.grey,
  disabledTextColor: Colors.black,
  padding: EdgeInsets.all(22.0),
  splashColor: Colors.blueAccent,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(50.0),
  ),
  // 直接绑定pressedAction，如果是异步函数，await会自动处理
  onPressed: pressedAction,
  child: Text(
    buttonText,
    style: TextStyle(fontSize: 20),
  )
)

如果你的pressedAction是同步函数，这样写也完全没问题。

4. 调用时传递不同的点击逻辑 #

现在你可以根据需求，在调用弹窗时传入pop（关闭弹窗）或者push（页面跳转）的逻辑：

传递关闭弹窗的逻辑： #

onPressed: () {
  showDialog(
    context: context,
    builder: (BuildContext context) => CustomDialog(
      // 点击按钮关闭当前弹窗
      pressedAction: () => Navigator.of(context).pop(),
      type: 'w',
      title: "Success",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      buttonText: "Continue",
    ),
  );
}

传递页面跳转的逻辑： #

假设你要跳转到NextScreen页面：

onPressed: () {
  showDialog(
    context: context,
    builder: (BuildContext context) => CustomDialog(
      // 点击按钮关闭弹窗并跳转到下一页
      pressedAction: () async {
        Navigator.of(context).pop(); // 先关闭弹窗
        await Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => NextScreen()
        ));
      },
      type: 'w',
      title: "Success",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      buttonText: "Continue",
    ),
  );
}

这样你的CustomDialog就可以灵活接收不同的点击逻辑，满足关闭弹窗或页面跳转的需求了。

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