Flutter开发如何将ID参数从页面传递至自定义Dialog

问题根本原因 #

你之前通过ModalRoute.of(context).settings.arguments无法拿到参数的核心原因是：showDialog生成的弹窗属于当前页面路由之上的Overlay层，本身不会生成新的路由，所以获取到的始终是宿主页面的路由配置，无法拿到Dialog专属的传参。

最优解决方案：通过自定义Dialog构造参数传值 #

这是实现成本最低、逻辑最清晰的方案，具体修改步骤如下：

1. 给callDialog方法新增可选的appId传参，调用时传入对应ID，新增场景传null即可

// 新增appId参数
Future<dynamic> callDialog(BuildContext context, {String? appId}) {
  String label;

  if (appTitle == "Instagram") {
    label = "请输入你的用户名";
  } else if (appTitle == "Whatsapp") {
    label = "请输入你的手机号";
  } else if (appTitle == "LinkedIn") {
    label = "请输入你的URL";
  } else if (appTitle == "Mail") {
    label = "请输入你的邮箱地址";
  }

  return showDialog(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context) {
      return CustomDialogBox(
        title: appTitle,
        descriptions: label,
        button1: "取消",
        button2: "保存",
        img: appImage,
        // 把appId传递给Dialog构造函数
        appId: appId,
      );
    },
  );
}

2. 给CustomDialogBox类新增appId构造参数

class CustomDialogBox extends StatefulWidget {
  final String title;
  final String descriptions;
  final String button1;
  final String button2;
  final String img;
  // 新增appId接收参数
  final String? appId;

  const CustomDialogBox({
    Key? key,
    required this.title,
    required this.descriptions,
    required this.button1,
    required this.button2,
    required this.img,
    this.appId,
  }) : super(key: key);

  // 其余原有逻辑保持不变
}

3. 修改Dialog内部取值逻辑，直接从Widget属性拿ID即可

@override
void didChangeDependencies() {
  if (_isInit) {
    // 直接从widget属性获取传入的appId
    final appId = widget.appId;
    if (appId != null) {
      // 校验产品是否存在
      _editedApp = Provider.of<UserProfileLogic>(context, listen: false)
          .findByAppId(appId);
      _initValues = {
        "title": _editedApp.title,
        "urlLink": _editedApp.appLink,
        "imageUrl": _editedApp.appImage,
      };
    }
  }
  _isInit = false;
  super.didChangeDependencies();
}

4. 触发弹窗的位置传入对应ID

InkWell(
  onTap: () {
    // 传入当前条目的appId，新增场景不传或者传null
    callDialog(context, appId: 你当前条目的appId);
  },
  // 其余原有代码保持不变
)

备选方案：路由形式弹出Dialog #

如果你确实需要保持和页面传参完全一致的逻辑，可以把Dialog封装为PageRoute，通过Navigator.push弹出，此时就可以通过ModalRoute.of(context).settings.arguments拿到参数，不过该方案实现成本更高，没有特殊需求优先使用第一种方案。

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