Flutter应用启动时异步HTTP请求并在组件中存值的实现方案

问题根源 #

你在initState里调用的fetchData是异步方法，但initState本身是同步执行的——它不会等待fetchData里的HTTP请求完成，就会直接执行build方法。这时候weatherObject还是null，你用!强制非空就会触发null错误。

解决方案 #

不需要用Provider，两种简单方法就能解决：

方法一：用FutureBuilder（推荐） #

直接把异步请求的Future对象作为状态，用FutureBuilder自动处理加载、成功、错误三种状态：

修改_HomeScreenState的代码：

class _HomeScreenState extends State<HomeScreen> {
  late Future<CurrentWeatherInterface> weatherFuture;

  @override
  void initState() {
    super.initState();
    // 初始化请求Future
    weatherFuture = fetchCurrentWeather(dotenv.env['API_KEY']);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize:
            Size.fromHeight(MediaQuery.of(context).size.height * 0.075),
        child: AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0.0,
        ),
      ),
      drawer: const Drawer(),
      backgroundColor: const Color.fromRGBO(62, 149, 250, 1),
      body: SingleChildScrollView(
        child: Center(
          child: SizedBox(
            width: MediaQuery.of(context).size.width * 0.85,
            child: Column(
              children: [
                // 用FutureBuilder包裹子组件
                FutureBuilder<CurrentWeatherInterface>(
                  future: weatherFuture,
                  builder: (context, snapshot) {
                    if (snapshot.connectionState == ConnectionState.waiting) {
                      // 加载中显示的组件
                      return const CircularProgressIndicator(color: Colors.white);
                    } else if (snapshot.hasError) {
                      // 请求失败显示的组件
                      return Text('加载失败: ${snapshot.error}', style: const TextStyle(color: Colors.white));
                    } else if (snapshot.hasData) {
                      // 数据成功返回，渲染子组件
                      return MainWeatherCardWidget(
                        weatherObject: snapshot.data!,
                      );
                    } else {
                      // 其他异常情况
                      return const Text('无数据', style: TextStyle(color: Colors.white));
                    }
                  },
                ),
                const HourlyWeatherCardListWidget(),
                const DailyWeatherListCardWidget(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

方法二：手动管理状态并调用setState #

保留原来的weatherObject变量，在请求完成后调用setState更新UI，同时在build里判断状态：

修改_HomeScreenState的代码：

class _HomeScreenState extends State<HomeScreen> {
  CurrentWeatherInterface? weatherObject;
  bool isLoading = true;
  String? errorMessage;

  Future<void> fetchData() async {
    try {
      weatherObject = await fetchCurrentWeather(dotenv.env['API_KEY']);
    } catch (e) {
      errorMessage = e.toString();
    } finally {
      setState(() {
        isLoading = false;
      });
    }
  }

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize:
            Size.fromHeight(MediaQuery.of(context).size.height * 0.075),
        child: AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0.0,
        ),
      ),
      drawer: const Drawer(),
      backgroundColor: const Color.fromRGBO(62, 149, 250, 1),
      body: SingleChildScrollView(
        child: Center(
          child: SizedBox(
            width: MediaQuery.of(context).size.width * 0.85,
            child: Column(
              children: [
                if (isLoading)
                  const CircularProgressIndicator(color: Colors.white)
                else if (errorMessage != null)
                  Text('加载失败: $errorMessage', style: const TextStyle(color: Colors.white))
                else if (weatherObject != null)
                  MainWeatherCardWidget(
                    weatherObject: weatherObject!,
                  )
                else
                  const Text('无数据', style: TextStyle(color: Colors.white)),
                const HourlyWeatherCardListWidget(),
                const DailyWeatherListCardWidget(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

注意点 #

• 不要在build方法里直接发起HTTP请求，否则每次UI重建都会重复请求。
• FutureBuilder更简洁，适合单次异步请求的场景；手动管理状态的方式更灵活，适合需要自定义加载/错误逻辑的情况。

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