How to Save Image File In Flutter?

How to Save Image File In Flutter?

ImagePicker is a plugin library for both iOS and Android that is been used to pick an image from a mobile phone gallery. So in this article, we will go through How to Save Image File In Flutter ?.

How to Save Image File In Flutter?

Using await ImagePicker.pickImage(…), you are already on the right track because the function returns a File.

The File class has a copy method. You can use this method to copy the file which is already saved on a disk on either the camera or lying in the gallery. Then put it into your application documents directory:

// 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;
});

You should also note that you can get the path of the image file from ImagePicker using image.path. This will also contain the file ending that you might want to extract. Further, you can save the image path by using the newImage.path.

Saving Image

// Step 1: Retrieve image from picker 
final File image = await ImagePicker.pickImage(source: imageSource);

// Step 2: Check for valid file
if (image == null) return;

// Step 3: Get directory where we can duplicate selected file.
final String path = await getApplicationDocumentsDirectory().path;

// Step 4: Copy the file to a application document directory. 
final var fileName = basename(file.path);
final File localImage = await image.copy('$path/$fileName');

Moreover, you can retrieve the file name from the original file using basename(file.path). Make sure you import ‘package: path/path.dart’;

Retrieving/Loading Image

// Step 1: Save image/file path as string either db or shared pref
SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setString('test_image', localImage.path)

// Step 2: Loading image by using the path that we saved earlier. We can create a file using path 
//         and can use FileImage provider for loading image from file.
CircleAvatar(
          backgroundImage: FileImage(File(prefs.getString('test_image')),
          radius: 50,
          backgroundColor: Colors.white)

RepaintBoundary will help you

final GlobalKey _repaintKey = new GlobalKey();


//  Image Widget


Widget _buildQrImage() {
_avatar = RepaintBoundary(
  key: _repaintKey,
  child: Image.asset('assets/ifredom.jpg')
);

return Column(
  children: <Widget>[
    _avatar,
    (imageFile == null)
        ? Image.asset('assets/default.jpg')
        : Image.file(imageFile),
    FlatButton(
      child: Text("save"),
      onPressed: () {
        _saveScreenShot(context);
      },
    ),

  ],
);
}



void _saveScreenShot(BuildContext context) {
RenderRepaintBoundary boundary = _repaintKey.currentContext.findRenderObject();

// ScreenShot and save
saveScreenShot(boundary, success: () {
  saveScreenShot2SDCard(boundary, success: () {
    showToast('save ok');
  }, fail: () {
    showToast('save ok');
  });
}, fail: () {
  showToast('save fail!');
});
}

Conclusion:

Thanks for being with us on a Flutter Journey !!!

In this article, We have been through How to Save Image File In Flutter?

So, Keep Learning !!! Keep Fluttering !!!

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology. Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.