Clash Royale CLAN TAG

How to use rootBundle in flutter to load images?

I use image plugin (image: ^2.0.4) so I can write something on to the image and later save it new image to device or send via mail. I try to load image using "new File" but got error on Flutter. I ask and search and got a hint that I can use rootBundle to load image in Flutter. I did, and I got this below error.

[ERROR:topaz/lib/tonic/logging/dart_error.cc(16)] Unhandled exception:
Unable to load asset: packages/myAppName/assets/images/ReceiptRaw_1.jpg

The plugin works when I create a simple dart console app, but couldn't load using flutter. Any help please,

This is the Flutter Code:

Future<bool> makeReceiptImage() async {

// UPDATE ****************************************

// load the receipt jpeg
var imageData = await rootBundle.load('packages/myAppName/dekonts/ReceiptRaw_1.jpg');
print("imageData: $imageData"); // Prints as imageData: Instance of
'_ByteDataView'

// UPDATE ****************************************

Image _receiptImage = await decodeImage(new File(imageData).readAsBytesSync());

drawString(_receiptImage, arial_48, 440, 30, “Customer Name”, color: 0xFF000000);

// Write it to disk as a different jpeg
var new_jpeg = await encodeJpg(_receiptImage);
String newImagePath = await rootBundle.loadString('packages/myAppName/assets/images/ReceiptRaw_2.jpg');
await new File(‘$newImagePath’).writeAsBytesSync(new_jpeg);
}


This is the Dart Console Code:

import 'dart:io';
import 'dart:convert';
import 'dart:async';
import 'package:image/image.dart';

void main() async {
// load the receipt jpeg
String mImagePath = 'images/ReceiptRaw_1.jpg';
Image _receiptImage = decodeImage(new File(mImagePath).readAsBytesSync());
drawString(_receiptImage, arial_48, 440, 30, “Customer Name”, color: 0xFF000000);

// Write it to disk as a different jpeg
var new_jpeg = encodeJpg(_receiptImage);
new File('images/ReceiptRaw_1.jpg').writeAsBytesSync(new_jpeg);
}


Update-1:
When I use below code I get en error as:

Error detected in pubspec.yaml:
No file or variants found for asset: packages/capitalbankmobile/assets/images/ReceiptRaw_1.jpg

String imageData = await rootBundle.loadString('packages/capitalbankmobile/assets/images/ReceiptRaw_1.jpg');
Image _receiptImage = await decodeImage(new File(imageData).readAsBytesSync());


Update-2:
if I use rootBundle.load I got below error.

Error: A value of type 'dart.typed_data::ByteData' can't be assigned to a variable of type 'dart.core::String'.

var imageData = await rootBundle.load('packages/capitalbankmobile/assets/images/ReceiptRaw_1.jpg');
Image _receiptImage = await decodeImage(new File(imageData).readAsBytesSync());


New Update:

Step 1:
Move to ReceiptRaw_1.jpg into lib/dekonts/ folder

Change to:
assets:
- packages/myAppName/dekonts/ReceiptRaw_1.jpg

Change to:
var imageData = await rootBundle.load('packages/myAppName/dekonts/ReceiptRaw_1.jpg');
print("imageData: $imageData");

Result: Prints as imageData: Instance of '_ByteDataView'

Step 2:
Move to /lib/assets/images/ReceiptRaw_1.jpg folder

Change to:
assets:
- packages/myAppName/lib/assets/images/ReceiptRaw_1.jpg

Change to:
var imageData = await rootBundle.load('packages/myAppName/lib/assets/images/ReceiptRaw_1.jpg');
print("imageData: $imageData");

Result: Got Error as:
Resolving dependencies...
Running 'gradlew assembleDebug'...
Error detected in pubspec.yaml:
No file or variants found for asset: packages/myAppName/lib/assets/images/CapitalBankDEKONT.jpg.

imageData

new File(...).readAsBytesSync()

1 Answer
1

The files of pub dependencies are not available as files. They are contained in an archive file.

Add the image to assets in pubspec.yaml

pubspec.yaml

flutter:
assets:
- packages/myAppName/assets/images/ReceiptRaw_1.jpg


then load it with

var imageData = await rootBundle.load('packages/myAppName/assets/images/ReceiptRaw_1.jpg');


For this to work the file ReceiptRaw_1.jpg needs to be in

ReceiptRaw_1.jpg

myAppName/lib/assets/images/ReceiptRaw_1.jpg


Where the lib/ part is mandatory.

lib/

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.