Flutter：API获取的数据控制台可打印但UI的Text组件显示null如何解决

数据老陈

2026-10-4

问题原因

你在initState中调用的data()是异步函数，await定位、API请求的操作不会阻塞Flutter的渲染流程，框架会在异步任务执行的过程中先完成首次build渲染，此时datainstace.area还未被赋值，自然为null。
异步任务执行完成、控制台打印出正确的area值后，你没有调用setState()通知Flutter状态已变更，UI不会触发重绘，就会一直保留初始的null值。

修复代码

import 'package:api_practice/worker/data.dart';
import 'package:flutter/material.dart';

class WeatherHome extends StatefulWidget {
  @override
  _WeatherHomeState createState() => _WeatherHomeState();
}

class _WeatherHomeState extends State<WeatherHome> {
  TextEditingController searchcont = TextEditingController();
  DataClass datainstace = DataClass();
  // 增加加载状态标识优化体验
  bool isLoading = true;

  void data() async {
    await datainstace.getcurrentlocation();
    await datainstace.getdata();
    print(datainstace.area);
    // 状态更新后调用setState触发UI重绘
    setState(() {
      isLoading = false;
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        // 根据加载状态显示不同内容
        child: isLoading 
          ? const CircularProgressIndicator()
          : Text(
              datainstace.area ?? "未知区域",
              style: const TextStyle(fontSize: 25, color: Colors.black), // 原代码白色字体如果背景为白色会看不见，可按需调整
            ),
      ),
    );
  }
}