Flutter & Shared Preference：如何将网络图像保存到本地内存？答案

【问题标题】：Flutter & Shared Preference : How do I save a network image to local memory?Flutter & Shared Preference：如何将网络图像保存到本地内存？
【发布时间】：2021-03-29 09:10:52
【问题描述】：

想使用 shared_preference 包将网络图像保存到我的本地内存中。

让我们使用下面的图片：

链接：https://user-images.githubusercontent.com/54469196/100627883-ef57f100-336a-11eb-9dac-fa3b910b8302.png

如何使用 shared_preference 做到这一点？

我期待收到您的来信。谢谢。

【问题讨论】：

标签： image flutter dart caching sharedpreferences

【解决方案1】：

对于以下方法，您的图像可能太大，因此我使用来自https://picsum.photos/200 的较小占位符图像，每次调用时都会返回一个随机图像。查看以下代码，首先检查图像是否保存在 Shared Preferences 中，如果没有，代码将下载图像，将图像转换为 base64 字符串并将图像 base64 字符串保存到 Shared Preferences。

import 'dart:async';
import 'dart:convert';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:shared_preferences/shared_preferences.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  String _base64;
  Future getImage;

  Future<String> _getImage() async {
    String base64;
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    base64 = prefs.getString("base64Image");
    if (base64 == null) {
      final http.Response response = await http.get(
        'https://picsum.photos/200',
      );
      base64 = base64Encode(response.bodyBytes);
      prefs.setString("base64Image", base64);
    }
    return base64;
  }

  @override
  void initState() {
    super.initState();
    getImage = _getImage();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Example App')),
      body: FutureBuilder<String>(
        future: getImage,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            _base64 = snapshot.data;
            final Uint8List bytes = base64Decode(_base64);
            return ListTile(
              leading: Image.memory(bytes),
              title: Text(_base64),
            );
          }
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

【讨论】：