如何解决Flutter报错LateInitializationError: 字段'weatherInfo'未初始化

错误原因 #

• 本质是异步执行顺序问题：weatherInfo的赋值依赖OpenWeatherMap接口的异步请求，而Flutter的UI渲染优先级高于异步任务，你在build方法中访问weatherInfo的时候，接口请求还未返回，变量还没有被赋值。
• late修饰符只是绕过了编译期的空安全检查，要求你手动保证变量在访问前完成赋值，异步场景下很容易触发未初始化异常。你把late换成强制解包!的操作也是同理，空的可空类型被强制解包同样会抛出运行时异常，二者都没有解决根本问题。
• 额外可能的触发点：接口请求本身失败（网络错误、API密钥错误、请求参数非法），你没有做异常捕获，导致始终走不到给weatherInfo赋值的分支。

修复方案 #

核心思路是放弃late和无判断的强制解包，主动维护异步请求的状态，UI层根据不同状态渲染对应内容：

1. 将weatherInfo声明为可空类型，不使用late修饰
2. 维护加载、错误、成功三种请求状态，UI层做对应分支判断
3. 完善接口请求的异常捕获逻辑，覆盖所有请求结果分支

修复后示例代码 #

数据请求层 #

import 'dart:convert';
import 'package:http/http.dart' as http;

// 你的数据模型类示例
class WeatherInfo {
  final String cityName;
  final double temp;
  final String weatherDesc;

  WeatherInfo({required this.cityName, required this.temp, required this.weatherDesc});

  factory WeatherInfo.fromJson(Map<String, dynamic> json) {
    return WeatherInfo(
      cityName: json['name'],
      temp: json['main']['temp'] - 273.15, // 开氏度转摄氏度
      weatherDesc: json['weather'][0]['description'],
    );
  }
}

// 接口请求方法
Future<WeatherInfo?> fetchWeather(String city, String apiKey) async {
  try {
    final url = Uri.parse(
      'https://api.openweathermap.org/data/2.5/weather?q=$city&appid=$apiKey'
    );
    final response = await http.get(url);
    if (response.statusCode == 200) {
      return WeatherInfo.fromJson(jsonDecode(response.body));
    }
    return null;
  } catch (e) {
    print('请求异常: $e');
    return null;
  }
}

UI层代码 #

import 'package:flutter/material.dart';

class WeatherPage extends StatefulWidget {
  const WeatherPage({super.key});

  @override
  State<WeatherPage> createState() => _WeatherPageState();
}

class _WeatherPageState extends State<WeatherPage> {
  WeatherInfo? weatherInfo;
  bool isLoading = true;
  String? errorMsg;

  // 替换为你自己的OpenWeatherMap API密钥和要查询的城市
  final String apiKey = '你的API密钥';
  final String targetCity = 'Beijing';

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

  Future<void> loadWeatherData() async {
    setState(() {
      isLoading = true;
      errorMsg = null;
    });
    final result = await fetchWeather(targetCity, apiKey);
    setState(() {
      isLoading = false;
      if (result != null) {
        weatherInfo = result;
      } else {
        errorMsg = '天气数据加载失败';
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('天气应用')),
      body: buildContent(),
    );
  }

  Widget buildContent() {
    if (isLoading) {
      return const Center(child: CircularProgressIndicator());
    }
    if (errorMsg != null) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(errorMsg!),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: loadWeatherData,
              child: const Text('重试'),
            ),
          ],
        ),
      );
    }
    // 走到此分支时weatherInfo一定非空，强制解包不会抛出异常
    final data = weatherInfo!;
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('城市：${data.cityName}', style: const TextStyle(fontSize: 20)),
          const SizedBox(height: 8),
          Text('温度：${data.temp.toStringAsFixed(1)}°C', style: const TextStyle(fontSize: 18)),
          const SizedBox(height: 8),
          Text('天气状况：${data.weatherDesc}', style: const TextStyle(fontSize: 18)),
        ],
      ),
    );
  }
}

补充说明 #

如果想简化状态管理，可以用FutureBuilder组件直接包裹异步请求，不用手动维护加载和错误状态，代码会更简洁。

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