Flutter中Snapshot data为null但FutureBuilder返回数据报错排查

出现空值报错是两个代码逻辑错误叠加导致的：

• 异步请求方法返回值和渲染逻辑预期类型完全不匹配：getcategoryimage()方法最终返回的是Uint8List单张图片的字节数组，但你在FutureBuilder里把snapshot.data强转为List列表类型；且你没有对接口返回的响应做JSON解码，直接把整个响应体字符串当base64编码转成了字节流，和你要渲染分类图片列表的需求完全相悖。
• FutureBuilder状态判断顺序错误：你在判断snapshot.hasData之前就直接读取snapshot.data做强制类型转换，FutureBuilder首次构建、等待请求返回的阶段snapshot.data默认就是null，这行代码会优先于hasData判断执行，必然触发空值错误。
• 额外笔误：代码中把响应对象response拼写为reponse，虽然不直接触发本次报错，但属于容易引发后续问题的低级错误。

1. 修正异步请求逻辑：拿到HTTP响应后先做JSON解码，转换为分类列表结构返回，不要直接把整个响应内容当图片base64转码
2. 调整FutureBuilder代码执行顺序：先判断错误状态、加载状态，确认数据非空后再读取snapshot.data做业务处理
3. 给FutureBuilder添加明确的泛型声明，避免隐式类型转换导致的类型不匹配问题

异步请求方法 #

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

// 明确指定返回值为分类列表类型
Future<List<dynamic>> getcategoryimage() async {
  var url = "http://172.17.40.225/shoplacviet/getcategoryimage.php";
  // 修正拼写错误
  var response = await http.get(Uri.parse(url));
  // 先将响应体解码为JSON列表，不要直接做base64转码
  List<dynamic> categoryList = jsonDecode(response.body);
  return categoryList;
}

FutureBuilder渲染逻辑 #

// 明确指定泛型和异步方法返回值对应
FutureBuilder<List<dynamic>>(
  future: getcategoryimage(),
  builder: (context, snapshot) {
    // 优先判断错误状态
    if (snapshot.hasError) {
      print(snapshot.error);
      return const Center(child: Text("分类加载失败"));
    }
    // 未拿到数据时显示加载状态
    if (!snapshot.hasData) {
      return const Center(child: CircularProgressIndicator());
    }
    // 走到此处data必然非空，再取值不会触发空错误
    List lista = snapshot.data!;
    return ListView.builder(
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      itemCount: lista.length,
      itemBuilder: (context, index) {
        var blob = lista[index]['categoryimage'];
        Uint8List bytesImage = const Base64Decoder().convert(blob);
        return Container(
          child: Image.memory(bytesImage),
        );
      }
    );
  },
)

调试注意：安卓9及以上版本默认拦截HTTP明文请求，如果用安卓真机/模拟器调试本地接口，需要在AndroidManifest.xml的application标签下添加android:usesCleartextTraffic="true"配置，否则会出现网络请求失败的问题。

内容的提问来源于stack exchange，提问作者Phạm Nam Khánh