Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to convert asset image to File?

Tags:

flutter

dart

Is there a way to use an asset image as a File. I need a File so it can be used for testing it over the internet using http. I've tried some answers from Stackoverflow.com (How to load images with image.file) but get an error 'Cannot open file, (OS Error: No such file or directory, errno = 2)'. The attached code line also gives an error.

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

Using Image.memory widget(works)

Future<Null> myGetByte() async {     _byteData = await rootBundle.load('images/myImage.jpg');   }    /// called inside build function   Future<File> fileByte = myGetByte();   /// Show Image  Container(child: fileByte != null  ? Image.memory(_byteData.buffer.asUint8List(_byteData.offsetInBytes, _   byteData.lengthInBytes))  : Text('No Image File'))), 
like image 231
Ant D Avatar asked Mar 22 '19 08:03

Ant D


People also ask

How pass an asset image as a file in flutter?

asset() widget, we need to pass the image path of String type. We have to simply use the _selectedImage. path that will convert the image file of File type to a valid Asset image path format.


2 Answers

You can access the byte data via rootBundle. Then, you can save it to the device's temporary directory which is obtained by path_provider (you need to add it as a dependency).

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'); 

For more information on writing the byte data, check out this answer.

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')); 
like image 89
creativecreatorormaybenot Avatar answered Sep 25 '22 15:09

creativecreatorormaybenot


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;   } 
like image 41
Prince Avatar answered Sep 23 '22 15:09

Prince