Flutter中如何获取JSON返回值并在Text Widget中显示

你需要通过状态管理更新UI，因为网络请求是异步操作，获取数据后需通知Flutter框架重新构建Widget。以下是修改后的完整代码：

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:http/http.dart' as http;

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  // 定义状态变量存储用户信息、加载状态和错误信息
  String? _userName;
  String? _userPic;
  bool _isLoading = true;
  String? _errorMessage;

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

  getStringValuesSF() async {
    try {
      SharedPreferences prefs = await SharedPreferences.getInstance();
      var stringValue = prefs.getString('currentUserId');

      if (stringValue == null) {
        setState(() {
          _errorMessage = "未找到用户ID";
          _isLoading = false;
        });
        return;
      }

      String apiurl = "http://192.168.161.144/api/dash.php";
      var response = await http.post(Uri.parse(apiurl), body: {
        "userid": stringValue,
      });

      if (response.statusCode == 200) {
        var data = json.decode(response.body);

        if (data["success"] == true) {
          setState(() {
            _userName = data["uname"];
            _userPic = data["upic"];
            _isLoading = false;
          });
        } else if (data["success"] == '10') {
          setState(() {
            _errorMessage = "数据库连接失败";
            _isLoading = false;
          });
        } else {
          setState(() {
            _errorMessage = "请求返回未知状态";
            _isLoading = false;
          });
        }
      } else {
        setState(() {
          _errorMessage = "网络连接失败";
          _isLoading = false;
        });
      }
    } catch (e) {
      setState(() {
        _errorMessage = "请求出错: $e";
        _isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("HomePage")),
      body: Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.all(16),
        child: _isLoading
            ? const CircularProgressIndicator() // 加载中显示进度圈
            : _errorMessage != null
                ? Text(_errorMessage!, style: const TextStyle(color: Colors.red)) // 显示错误信息
                : Text(
                    "Welcome $_userName",
                    style: const TextStyle(color: Colors.black, fontSize: 18),
                  ),
      ),
    );
  }
}

修改要点： #

1. 新增状态变量：在_HomeState中定义_userName、_userPic存储用户数据，_isLoading标记加载状态，_errorMessage处理异常情况
2. 触发UI更新：在网络请求的各个分支中，通过setState()更新变量值，通知Flutter重建UI
3. 动态渲染内容：在build方法中根据_isLoading和_errorMessage的状态，分别显示加载指示器、错误提示或包含用户名的欢迎文本

修改完成后，异步请求获取到user值时，Text Widget会自动更新显示用户名。

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