Flutter中如何用FutureBuilder从SQLite读取展示Uint8List图片

1. 完善DBHelper的图片读取方法 #

先在你的DBHelper类中添加异步读取方法，从数据库获取存储的图片文本数据：

import 'dart:convert'; // 后续转码需要用到

Future<String?> getStoredImage() async {
  final db = await database; // 假设你的DBHelper已有获取数据库实例的逻辑
  // 根据你的表名、字段名调整，示例中表名为images，存储图片的字段为image_data
  final queryResult = await db.query('images', limit: 1, columns: ['image_data']);
  if (queryResult.isNotEmpty) {
    return queryResult.first['image_data'] as String?;
  }
  return null;
}

2. 用FutureBuilder读取并展示图片 #

在页面Widget中，通过FutureBuilder异步获取数据，将文本转回Uint8List后，用Image.memory展示：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: FutureBuilder<String?>(
      future: DBHelper().getStoredImage(),
      builder: (context, snapshot) {
        // 加载中状态
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }

        // 错误处理
        if (snapshot.hasError) {
          return const Center(child: Text('图片加载失败'));
        }

        // 无数据处理
        final imageText = snapshot.data;
        if (imageText == null || imageText.isEmpty) {
          return const Center(child: Text('暂无图片'));
        }

        // 转码并展示图片
        final Uint8List imageBytes = base64Decode(imageText);
        return Center(
          child: Image.memory(
            imageBytes,
            fit: BoxFit.contain,
          ),
        );
      },
    ),
  );
}

关键注意点 #

• 存储图片时，你必须是用base64.encode(_image)将Uint8List转成字符串后存入TEXT字段的，否则读取后无法正确解析。如果之前的存储逻辑没这么做，需要先修正存储代码。
• 确保代码中导入了dart:convert包，才能使用base64Decode方法。
• 根据你的实际表结构、字段名，调整DBHelper中的查询语句。

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