Flutter页面传参先返回Null再出现目标数据的问题求助

问题原因 #

接收页面的build方法会在路由跳转完成前执行第一次，此时ModalRoute.of(context)?.settings.arguments还未被赋值，因此输出{data: Null}；当路由参数传递完成后，页面会触发二次重建，此时才能拿到正确的Map数据，所以控制台会先后出现两次输出。

解决方案 #

方案1：利用didChangeDependencies生命周期获取参数

该方法会在路由依赖变化时触发，能确保路由参数已就绪：

Map? data;

@override
void didChangeDependencies() {
  super.didChangeDependencies();
  final routeArgs = ModalRoute.of(context)?.settings.arguments;
  // 仅在参数非空时赋值并打印
  if (routeArgs != null) {
    data = {'data': routeArgs as Map};
    print(data);
  }
}

@override
Widget build(BuildContext context) {
  // 根据data状态显示加载或内容
  return Scaffold(
    body: data == null 
        ? const Center(child: CircularProgressIndicator()) 
        : Center(child: Text(data.toString())),
  );
}

方案2：在build中判断参数状态，避免重复打印Null

Map? data;

@override
Widget build(BuildContext context) {
  final routeArgs = ModalRoute.of(context)?.settings.arguments;
  // 仅在首次获取到有效参数时处理
  if (routeArgs != null && data == null) {
    data = {'data': routeArgs as Map};
    print(data);
  }

  return Scaffold(
    body: data == null 
        ? const Center(child: CircularProgressIndicator()) 
        : Center(child: Text(data.toString())),
  );
}

关键注意点 #

• 不要直接用ModalRoute.of(context)?.settings.arguments as Map强制转换，因为参数未就绪时会为Null，触发类型转换错误，必须先判断参数非空再转换。
• 可以根据data是否为Null，在页面中显示加载状态，提升用户体验。

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