Flutter实现图片转Base64字符串及Base64字符串还原为图片显示的方法

嘿，既然你已经搞定了把相机图片转成Base64字符串并保存的环节，那把它转回可显示的图片其实超简单～下面给你两种常用的实现方案，按需选就行：

方法1：使用Image.memory（本地解码首选） #

这是最直接的方式，核心就是把Base64字符串解码成Uint8List字节数组，再传给Image.memory组件渲染。

步骤： #

1. 先导入必要的依赖包：

import 'dart:convert'; // 用于Base64编解码
import 'dart:typed_data'; // 处理字节数组类型

2. 解码并生成图片：
   假设你从其他页面拿到的保存好的Base64字符串是savedBase64String，可以这样写：

// 把Base64字符串解码成字节数组
Uint8List decodedImageBytes = base64Decode(savedBase64String);

// 在Widget树中渲染图片
Image.memory(
  decodedImageBytes,
  fit: BoxFit.contain, // 可选：调整图片适配方式，比如cover/contain等
  height: 300, // 可选：自定义图片高度
  width: 300, // 可选：自定义图片宽度
)

方法2：使用Image.network（适用于带Data URI前缀的Base64） #

如果你的Base64字符串是带完整Data URI前缀的格式（比如data:image/jpeg;base64,xxxxxxxxxx），可以直接用Image.network加载，它天然支持这种格式：

Image.network(
  savedBase64StringWithPrefix,
  fit: BoxFit.cover,
  errorBuilder: (context, error, stackTrace) {
    return const Text('图片加载失败'); // 加载出错时的兜底提示
  },
)

完整页面示例 #

给你一个完整的StatefulWidget例子，展示如何从其他页面接收Base64字符串并异步解码显示：

import 'dart:convert';
import 'dart:typed_data';
import 'package:flutter/material.dart';

class RestoredImagePage extends StatefulWidget {
  final String base64Image;
  const RestoredImagePage({super.key, required this.base64Image});

  @override
  State<RestoredImagePage> createState() => _RestoredImagePageState();
}

class _RestoredImagePageState extends State<RestoredImagePage> {
  Uint8List? _decodedBytes;
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _decodeImageAsync(); // 异步解码避免阻塞UI
  }

  Future<void> _decodeImageAsync() async {
    try {
      Uint8List bytes = base64Decode(widget.base64Image);
      setState(() {
        _decodedBytes = bytes;
        _isLoading = false;
      });
    } catch (e) {
      setState(() {
        _isLoading = false;
      });
      debugPrint('Base64解码失败: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('还原的图片')),
      body: Center(
        child: _isLoading
            ? const CircularProgressIndicator()
            : _decodedBytes != null
                ? Image.memory(_decodedBytes!, fit: BoxFit.contain)
                : const Text('无法还原图片'),
      ),
    );
  }
}

小提醒： #

• 如果Base64字符串很长，一定要用异步解码（像示例里的_decodeImageAsync），防止UI卡顿。
• 记得捕获解码异常，给用户显示友好的错误提示哦～

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