Flutter中如何展示API请求返回的PNG格式二进制图片数据

1. 修改Dio请求代码，指定响应类型为二进制 #

你当前的请求默认会将响应内容解析为字符串，所以无法得到正确的PNG二进制数据，需要在请求配置中指定响应类型为字节格式，修改后的代码如下：

// 明确返回值为Uint8List，即二进制字节数组
Future<Uint8List?> PostToGetPostImages(String pic_id,String pic_type) async {
    try {
      var parms = {
        'code': pic_type+"_"+pic_id,
      };

      Response response = await _dio.post(_get_post_image,
          data: parms,
          options: Options(
            contentType: Headers.formUrlEncodedContentType,
            // 新增配置，指定响应为二进制字节
            responseType: ResponseType.bytes
          ),
          onSendProgress: (int sent, int total) {
            print('sent : $sent // total : $total');
          }, onReceiveProgress: (v, s) {
            print('v : $v // s : $s');
          });
      return response.data;
    } catch (error, stacktrace) {
      _handleError(error);
      print("Exception occured A: $error stackTrace: $stacktrace");
      return null;
    }
  }

2. 调整图片加载逻辑，使用MemoryImage加载内存字节 #

NetworkImage仅用于加载网络URL格式的图片，你拿到的是内存中的PNG二进制数据，需要换成MemoryImage加载，同时补充FutureBuilder的状态判断避免空值异常，修改后的代码如下：

FutureBuilder<Uint8List?>(
  future: aptProvider().PostToGetPostImages("1", "m"),
  builder: (context, snapshot) {
    // 加载中状态，可替换为自定义占位图
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircleAvatar(
        radius: 65.0,
        child: CircularProgressIndicator(strokeWidth: 2),
      );
    }
    // 加载成功、有数据的情况
    if (snapshot.hasData && snapshot.data != null) {
      return CircleAvatar(
        radius: 65.0,
        backgroundImage: MemoryImage(snapshot.data!),
      );
    }
    // 加载失败/无数据的情况，可替换为默认头像
    return const CircleAvatar(
      radius: 65.0,
      child: Icon(Icons.person),
    );
  }
)

注意事项 #

• 确保接口返回的是纯PNG二进制流，没有包裹JSON等其他格式数据
• 占位图和错误状态的UI可以根据业务需求自行调整

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