Flutter开发天气APP：widget初始化访问报错与跨页传值求助

报错根因 #

你遇到的The instance member 'widget' can't be accessed in an initializer报错，来自三个叠加的代码问题：

• 你将存储子页面的screens列表作为State类的成员，直接在字段声明位置初始化。Dart执行类字段初始化的时机早于State对象和对应widget引用的挂载时机，这个阶段根本无法访问widget属性。你之前尝试在initState里写天气数据赋值，但没有把screens的初始化逻辑移到initState里，自然不生效。
• 代码存在参数名拼写错误：MainScreenNavigation组件声明的入参名为locationWeather，你初始化HomeScreen时写的是widget.weatherData，本身就是不存在的属性。
• 存在生命周期写法不规范问题：initState中super.initState()必须放在方法执行逻辑的最开头，你原来的写法把自定义逻辑放在了super.initState()前面，不符合Flutter生命周期规范。

修复方案 #

直接调整MainScreenNavigation页面的代码即可，其余页面（WelcomeScreen、HomeScreen）的传参、接参逻辑本身没有问题：

• 将screens列表改为late List<Widget>类型的延迟初始化字段，不要在声明时直接赋值页面实例
• 把screens的初始化逻辑移到initState中，且放在super.initState()调用之后
• 修正参数名，给HomeScreen传入正确的widget.locationWeather值

修复后可直接使用的MainScreenNavigation代码 #

import 'package:flutter/material.dart';
import 'package:weather_app/utilities/constants.dart';
import 'home_screen.dart';
import 'search_screen.dart';
import 'saved_screen.dart';
import 'forecast_screen.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';

class MainScreenNavigation extends StatefulWidget {
  MainScreenNavigation({required this.locationWeather});
  // 建议后续将dynamic替换为你自定义的WeatherData实体类型，提升代码健壮性
  final dynamic locationWeather;

  @override
  State<MainScreenNavigation> createState() => _MainScreenNavigationState();
}

class _MainScreenNavigationState extends State<MainScreenNavigation> {
  int page_number = 0;
  late List<Widget> screens;

  @override
  void initState() {
    super.initState();
    // 初始化子页面列表，此时widget已完成挂载可正常访问
    screens = [
      HomeScreen(locationWeather: widget.locationWeather),
      const SearchScreen(),
      const ForecastScreen(),
      const SavedScreen(),
    ];
  }

  final List<Icon> items = [
    const Icon(
      Icons.home,
      size: 30,
      color: Colors.white,
    ),
    const Icon(Icons.search, size: 30, color: Colors.white),
    const Icon(Icons.auto_graph, size: 30, color: Colors.white),
    const Icon(Icons.favorite, size: 30, color: Colors.white),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: CurvedNavigationBar(
        backgroundColor: kPrimaryColor,
        color: kPrimaryColor,
        buttonBackgroundColor: kSecondaryColor,
        animationCurve: Curves.fastOutSlowIn,
        height: 60,
        items: items,
        onTap: (index) {
          setState(() {
            page_number = index;
          });
        },
      ),
      body: screens[page_number],
    );
  }
}

可选优化建议 #

如果后续你的天气数据需要在多个底部导航子页共享、或者存在刷新更新数据的需求，不用多层级嵌套传构造参数，可以接入轻量状态管理方案（如Provider、Riverpod）做全局数据托管，降低传参维护成本。

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