How to Convert to Asset Image to File In Flutter ?

· 3 min read
How to Convert to Asset Image to File In Flutter
How to Convert to Asset Image to File In Flutter

When we use a third party plugin like an image_picker it will generally allow the user to pick up an image from a gallery or camera and keep it in a File Format. In this article, we will go through How to Convert to Asset Image to File In Flutter?

How to Convert to Asset Image to File In Flutter?

You can access the byte data via root bundle. Then, you can save it to the device’s temporary directory which is obtained by path_provider. Consider a code snippet like a below:

import 'dart:async';
import 'dart:io';

import 'package:flutter/services.dart' show rootBundle;
import 'package:path_provider/path_provider.dart';

Future<File> getImageFileFromAssets(String path) async {
  final byteData = await rootBundle.load('assets/$path');

  final file = File('${(await getTemporaryDirectory()).path}/$path');
  await file.writeAsBytes(byteData.buffer.asUint8List(byteData.offsetInBytes, byteData.lengthInBytes));

  return file;
}

In your example, you would call this function like this:

File f = await getImageFileFromAssets('images/myImage.jpg');

You will need to await the Future and in order to do that, make the function async:

RaisedButton(
   onPressed: () async => showDialog(
     context: context,
     builder: (_) => Container(child: Image.file(await getImageFileFromAssets('images/myImage.jpg')))),
   child: Text('Show Image'));

Make use of the flutter_absolute_path package. To convert file path from this format :

“content://media/external/images/media/5275”

to

"/storage/emulated/0/DCIM/Camera/IMG_00124.jpg”
List <File> fileImageArray = [];
assetArray.forEach((imageAsset) async {
final filePath = await FlutterAbsolutePath.getAbsolutePath(imageAsset.identifier);

File tempFile = File(filePath);
if (tempFile.existsSync()) {
    fileImageArray.add(tempFile);
}

Get File from Asset without providing a path.

import 'package:path_provider/path_provider.dart';

Future<File> getImageFileFromAssets(Asset asset) async {
    final byteData = await asset.getByteData();

    final tempFile =
        File("${(await getTemporaryDirectory()).path}/${asset.name}");
    final file = await tempFile.writeAsBytes(
      byteData.buffer
          .asUint8List(byteData.offsetInBytes, byteData.lengthInBytes),
    );
    return file;
  }

Conclusion:

In this article, we have been through How to solve the scroll controller could not attach to any scroll views in Flutter?

Thanks for Reading !!!

Keep Learning !!! Keep Fluttering !!!
Do share your valuable suggestion feedback for the same.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

2 comments

Leave a Reply