如何从服务器保存带image id的图片并在其他页面Container中展示

1. 选中图片时临时存储image id #

无需存储图片到本地图库，仅将对应image id存入本地临时缓存即可，不影响后续二次上传逻辑
依赖可使用官方推荐的shared_preferences做轻量临时存储，选中图片时执行逻辑如下：

import 'package:shared_preferences/shared_preferences.dart';

// 选中对应图片时执行
final prefs = await SharedPreferences.getInstance();
// 取出当前选中图片的image id
String selectedImageId = snapshot.data[i]["id_image"].toString();
// 存入临时缓存，多图场景可存储List<String>类型
await prefs.setString("temp_preview_image_id", selectedImageId);

// 跳转至其他预览页面
Navigator.push(context, MaterialPageRoute(builder: (context) => PreviewPage()));

2. 其他页面根据id加载展示图片 #

在目标页面的Container中直接拼接id加载对应图片即可，示例代码如下：

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

class PreviewPage extends StatefulWidget {
  const PreviewPage({super.key});

  @override
  State<PreviewPage> createState() => _PreviewPageState();
}

class _PreviewPageState extends State<PreviewPage> {
  String? tempImageId;

  @override
  void initState() {
    super.initState();
    _getTempImageId();
  }

  Future<void> _getTempImageId() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      tempImageId = prefs.getString("temp_preview_image_id");
      // 若不需要保留临时id，读取后可直接清除: prefs.remove("temp_preview_image_id");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("图片预览")),
      body: Center(
        child: tempImageId == null
            ? const CircularProgressIndicator()
            : Container(
                width: 350,
                height: 350,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                  image: DecorationImage(
                    image: NetworkImage("http://10.0.2.2/test/upload/$tempImageId"),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
      ),
    );
  }
}

补充说明 #

• 多图预览场景可将临时存储值改为List<String>格式，循环读取id拼接链接加载即可
• 临时存储的id可根据业务需求决定是否在读取后主动清除，避免后续出现旧数据干扰

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