Flutter页面自动调用API函数后UI不更新问题求助

问题根源 #

你代码里的API能正常拿到数据并打印，但UI没更新，是因为更新_quote后没有通知Flutter框架重建界面；另外API请求的Header还有个拼写小错误。

1. 修正API请求的Header拼写错误 #

原代码里Content-Type的值写错了，应该是application/json（不是application.json），修正后的API方法：

static Future<String?> getRandomQuote() async {
  Map<String, String> requestHeaders = {'Content-Type': 'application/json'};
  var url = Uri.https("api.quotable.io", "/random");
  var response = await client.get(url, headers: requestHeaders);
  if (response.statusCode == 200) {
    var data = jsonDecode(response.body);
    print(data["content"]);
    return data["content"].toString();
  } else {
    return "Sorry. Unable to Fetch Quote for you.";
  }
}

2. 触发UI更新 #

在gotQuote方法里，获取到名言后必须调用setState，让Flutter重新渲染界面：

void gotQuote() async {
  this._quote = await APIservice.getRandomQuote();
  setState(() {}); // 关键：通知框架UI需要更新
}

3. 避免空值异常 #

原代码里直接用_quote!强制解包，万一请求失败或还没返回时会报错，建议用空合并运算符设置默认值：

child: Center(
  child: AnimatedTextKit(
    animatedTexts: [
      TyperAnimatedText(
        _quote ?? "正在加载名言...", // 空值时显示加载提示
        textAlign: TextAlign.center,
        textStyle: const TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 25,
          fontFamily: '',
          wordSpacing: 2,
          color: Colors.blueGrey,
        ),
      )
    ],
  ),
),

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