how to save and read image got from gallery

In the previous article i've showed you how to get an image using image picker; For those who have missed it you can check it here!

I have changed a little bit our previous code, for example i have removed the var keyword to give space to a more precise type.

Now let's start by defining our function as follows.

Save image inside our device

Dart
void _uploadImage() async {
    
    ImagePicker picker = ImagePicker();
    PickedFile pickedImage = await picker.getImage(source: ImageSource.gallery);
    
    File file = File(pickedImage.path);
    
    final savedImage = await file.copy('$_getAppDir/test.jpg');
    
    setState(() => image = savedImage.path );

}

We define a file variable of type File where we will store a reference to our image inside the pickedImage by using the File class.

Now we use the copy method to copy the image into our App directory, we get the app directory by calling the getter _getAppDir

Dart
get _getAppDir async {

   final appDir = await getApplicationDocumentsDirectory();

   return appDir.path;

}

It's a simple getter that only returns the Application Directory.

After getting the app directory I name the file test.jpg to leave this tutorial the most easy to grasp possible; Now we have to store the new saved image path inside our image variable.

Load the image when loading

We need a way to know that our image has been saved into our device, so we will use the initState to get it.

Dart

void initState() {
    super.initState();

    _getAppDir.then( (value) {

        setState(() => image = '$value/test.jpg');

    });
    
}

We call our getter seen previously to get our AppDirectory, we use then since it's a Future and we don't have access to async await into the initState;

After getting bach our Application Directory inside the local variable value we update the state with setState to save our image inside the image variable.

If you have followe everything you will see the result in you screen.

This is the code of the main application:

Dart
import 'package:path_provider/path_provider.dart';
import 'package:flutter/material.dart';

import 'dart:io';
import 'package:image_picker/image_picker.dart';

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

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  var image;

  
  void initState() {
    super.initState();

    _getAppDir.then( (value) {

      setState(() => image = '$value/test.jpg');

    });
    
  }

  get _getAppDir async {

    final appDir = await getApplicationDocumentsDirectory();

    return appDir.path;

  }

  void _uploadImage() async {

    ImagePicker picker = ImagePicker();
    PickedFile pickedImage = await picker.getImage(source: ImageSource.gallery);

    File file = File(pickedImage.path);

    final savedImage = await file.copy('$_getAppDir/test.jpg');
    
    setState(() => image = savedImage.path );
    
  }

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: image != null ? Image.file(File(image)) : null
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _uploadImage,
        tooltip: 'Increment',
        child: Icon(Icons.image),
      ),
    );
  }
}
flutter image_picker save image from gallery flutter save image get image save image picked from gallerys save image from image_picker