title: Display Image from preferences in Flutter App
body: <p>I am having a problem. I have a Drawer in Flutter App and I want to implement a feature where you can pick a photo from gallery. Thats the easy part. But i want to save this photo in the preferences and load it when the App starts again. The imageFromPreferences variable have to be an Future to use it in the preferenceImage() Future builder. I got not idea how to it after hours of research. Maybe its the total wrong approach and you got a different idea. </p>
  
  <pre><code>import 'dart:io';
  import 'dart:ui';
  import 'package:firstapp/database/database.dart';
  import 'package:firstapp/views/note.dart';
  import 'package:flutter/cupertino.dart';
  import 'package:flutter/material.dart';
  import 'package:flutter/painting.dart';
  import 'package:flutter/rendering.dart';
  import 'package:flutter/widgets.dart';
  import 'package:image_picker/image_picker.dart';
  import 'package:firstapp/Utility/Utility.dart';
  
  class NoteList extends StatefulWidget {
    @override
    NoteListState createState() {
      return new NoteListState();
    }
  }
  
  class NoteListState extends State&lt;NoteList&gt; {
    Future&lt;File&gt; imageFile;
    Image imageFromPreferences;
  
    pickImageFromGallery(ImageSource source) {
      setState(() {
        imageFile = ImagePicker.pickImage(source: source);
      });
    }
  
    loadImageFromPreferences() {
      Utility.getImageFromPreferences().then((img) {
        setState(() {
          imageFromPreferences = Utility.imageFromBase64String(img);
        });
      });
    }
  
    Widget preferenceImage() {
      return FutureBuilder&lt;Image&gt;(
        future: loadImageFromPreferences(),
        builder: (BuildContext context, AsyncSnapshot&lt;Image&gt; image) {
          print(image);
          if (image.connectionState == ConnectionState.done &amp;&amp; image.hasData) {
            return image.data;
          } else {
            return Text("error");
          }
        },
      );
    }
  
    Widget imageFromGallery() {
      return FutureBuilder&lt;File&gt;(
        future: imageFile,
        builder: (BuildContext context, AsyncSnapshot&lt;File&gt; snapshot) {
          if (snapshot.connectionState == ConnectionState.done &amp;&amp;
              snapshot.hasData) {
            Utility.saveImageToPreferences(
                Utility.base64String(snapshot.data.readAsBytesSync()));
            return Image.file(
              snapshot.data,
            );
          }
          return null;
        },
      );
    }
  
    finalPicker() {
      if (imageFromGallery() == null) {
        return preferenceImage();
      } else if (imageFromGallery() != null) {
        return imageFromGallery();
      }
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: Text('Taking Notes')),
        drawer: Drawer(
          child: ListView(
            children: &lt;Widget&gt;[
              UserAccountsDrawerHeader(
                accountEmail: Text('lala@web.de'),
                accountName: Text('Max'),
                decoration: BoxDecoration(
                  color: Theme.of(context).primaryColor,
                ),
                currentAccountPicture: GestureDetector(
                  onTap: () {
                    pickImageFromGallery(ImageSource.gallery);
                  },
                  child: Column(
                    children: &lt;Widget&gt;[finalPicker()],
                  ),
                ),
              ),
              Container(
                padding: EdgeInsets.all(20.0),
                child: Text("Locked files"),
                color: Theme.of(context).primaryColor,
              ),
            ],
          ),
    ),
  </code></pre>
  
  <p>This is how I save the Image as a String in the preferences. Maybe I could instead save it in a file?</p>
  
  <pre><code>import 'dart:async';
  import 'dart:convert';
  
  class Utility{
  
    static const String IMG_KEY = "IMAGE_KEY";
  
    static Future&lt;bool&gt; saveImageToPreferences(String value) async {
      final SharedPreferences preferences = await SharedPreferences.getInstance();
      return preferences.setString(IMG_KEY, value);
    }
  
  
    static Future&lt;String&gt; getImageFromPreferences() async{
      final SharedPreferences preferences = await SharedPreferences.getInstance();
      return preferences.getString(IMG_KEY);
    }
  
  
    static String base64String(Uint8List data) {
      return base64Encode(data);
    }
  
    static Image imageFromBase64String(String base64String){
      return Image.memory(base64Decode(base64String), fit: BoxFit.fill);
    }
  }
  </code></pre>