在Flutter App中从首选项显示图像

Question

我有问题。我在Flutter App中有一个抽屉，我想实现一个功能，您可以从画廊中挑选照片。那就是简单的部分。但是我想将此照片保存在首选项中，并在应用再次启动时加载。 imageFromPreferences变量必须是Future，才能在preferenceImage（）Future构建器中使用它。经过数小时的研究，我不知道如何去做。也许这是完全错误的方法，但您有不同的想法。

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<NoteList> {
  Future<File> 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<Image>(
      future: loadImageFromPreferences(),
      builder: (BuildContext context, AsyncSnapshot<Image> image) {
        print(image);
        if (image.connectionState == ConnectionState.done && image.hasData) {
          return image.data;
        } else {
          return Text("error");
        }
      },
    );
  }

  Widget imageFromGallery() {
    return FutureBuilder<File>(
      future: imageFile,
      builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
        if (snapshot.connectionState == ConnectionState.done &&
            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: <Widget>[
            UserAccountsDrawerHeader(
              accountEmail: Text('[email protected]'),
              accountName: Text('Max'),
              decoration: BoxDecoration(
                color: Theme.of(context).primaryColor,
              ),
              currentAccountPicture: GestureDetector(
                onTap: () {
                  pickImageFromGallery(ImageSource.gallery);
                },
                child: Column(
                  children: <Widget>[finalPicker()],
                ),
              ),
            ),
            Container(
              padding: EdgeInsets.all(20.0),
              child: Text("Locked files"),
              color: Theme.of(context).primaryColor,
            ),
          ],
        ),
  ),

这是我在首选项中将图像另存为字符串的方式。也许我可以将其保存在文件中？

import 'dart:async';
import 'dart:convert';

class Utility{

  static const String IMG_KEY = "IMAGE_KEY";

  static Future<bool> saveImageToPreferences(String value) async {
    final SharedPreferences preferences = await SharedPreferences.getInstance();
    return preferences.setString(IMG_KEY, value);
  }


  static Future<String> 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);
  }
}

Answer 1

// using your method of getting an image
final File image = await ImagePicker.pickImage(source: imageSource);

// getting a directory path for saving
final String path = await getApplicationDocumentsDirectory().path;

// copy the file to a new path
final File newImage = await image.copy('$path/image1.png');

setState(() {
_image = newImage;
});

您可以将此路径存储在您的共享首选项中。在这里，您在根目录中进行复制，然后存储该图像的路径。