Convert List<XFile> to File in Dart / Flutter - flutter

I pick a picture using this library image_picker: 0.8.4+4. Then the image saved into List..
After that i want to show the image in next page and make it ready to edit using this library image_painter: 0.4.4+1.
ImagePainter.file(
// Need file,
key: _imageKey,
scalable: true,
initialStrokeWidth: 2,
initialColor: Colors.green,
initialPaintMode: PaintMode.line,
),
Actually i just need how to convert List<XFile> to File

One way to do it:
XFile has a property called path so the you can:
XFile xfile = ...;
File file = File(xfile.path);
If you have a list, you can use map or other way you prefer to create File using the path of a XFile.

Related

Flutter display package:image/image.dart:Image in UI Widget

We can work on images in Flutter using import 'package:image/image.dart' as ToolsImage; package to scale them with ToolsImage.copyResize() and manipulate individual pixels with ToolsImage.Image.getPixel(x,y)
To display image from memory bytes (ByteData/Uint8List/List<int>) we can use MemoryImage:
Container(child: Image(image: MemoryImage(image.data.buffer.asUint8List())))
I'm getting an exception:
Exception: Invalid image data
whichever List I use. What's wrong?
Remember to add HEADER to image bytes after format conversions!
ByteData imageByteData = await rootBundle.load('res/images/basic/dizzy-face.png');
List<int> values = imageByteData.buffer.asUint8List();
ToolsImage.Image? photo = ToolsImage.decodeImage(values);
photo = ToolsImage.copyResize(photo!, height: 32, width: 32);
removes header information (pixel-by-pixel manipulation removes header info).
Use:
List<int>? imageWithHeader = ToolsImage.encodeNamedImage(TEST_IMAGE, ".bmp");
and then:
Container(child: Image(image: MemoryImage(Uint8List.fromList(imageWithHeader))))
Last line enables us to convert package:image/image.dart to package:flutter/src/widgets/image.dart (UI Image Widget)

Flutter: save a generated PDF from preview page with a custom function

I'm using the pdf package (link to pub.dev page) to create documents inside my app.
How can I save the document from the preview page?
I know about the built-in print and share functions, but I need something else.
I need a function that does the following:
save the document to the device
upload it to Firebase Storage
delete the local file
I know how to do all of these steps, but I'm unable to access the Uint8List bytes of the pdf document that is being previewed... I've tried to add a PdfPreviewAction, but I still can't access the bytes of the document from it
all you have to do is call the save method in the Document() object
import "package:pdf/widgets.dart" as w;
final pdf = w.Document();
Future<Uint8List> getPDFData() async {
return await pdf.save();
}
you can do all the operations using the getPDFData() method
for example:
return PdfPreview(
build: (format) => getPdfData(),
actions: [
PdfPreviewAction(
icon: Icon(Icons.print),
onPressed: (context, fn, format) {
//if you call fn(format), you'll get Future<UInt8List>
}),
],
);

How to add File image in qr_flutter to generate QR code with that embedded image?

I want to do similar think like this ( How to generate QR CODE with logo in flutter ) but instead of using asset image, I want to user pick an image with image_picker package and then store that image in file and use it in QR code as an embedded image. Please anyone help me out.
Thank You
Well The Thing you want to achieve has some boilerplate code involved so I would break it down into 2 brief steps:
Step 1: Pick Image as a File using image picker plugin that is, simply store image as File you can achieve it using:
File image = await ImagePicker.pickImage(
source: ImageSource.camera, imageQuality: 50
);
You can follow this to perfectly get image
Step 2: Now if you see the type of embedded image is actually an ImageProvider so you can use FileImage() and do:
QrImage(
data: 'This QR code has an embedded image as well',
version: QrVersions.auto,
size: 320,
gapless: false,
//You can use image here, Note this image should be of type File
embeddedImage: FileImage(image),
embeddedImageStyle: QrEmbeddedImageStyle(
size: Size(80, 80),
),
),
Hope this is what you wanted to achieve.
You just have to make a variable of the image that you will use for QR :
var image = Image.asset('assets/ur_image.png',);
and then add it in here :
QrImage(
embeddedImage: image.image,
data: 'hello',
version: QrVersions.auto,
size: 100,
),

Image not updating on changing path read from a JSON file

I was trying to create an app using the flutter desktop implementation that would read the path to an image from a JSON file and display the image, and then when an Inkwell is hovered, it would change the path to another image. The following was the declaration of variables:
characterName = 'Elise';
var skill_1_icon_path =
characterData[characterName]['ability 1']['icon path'];
I was changing the characterName variable to switch to other image paths.
The following widget was being used:
Inkwell(
child: Image(
image : AssetImage(
skill_1_icon_path),
),
onHover: (value){setState(){characterName = "Jhon";}}
),
)
However, the image does not change despite changing the path. I have tried printing skill_1_icon_path in both before hovering and after, the path changes to it's correct value, but the image itself doesn't.
In your onHover, use setState to also change skill_1_icon_path to the desired new image path.

How to get property AssetName from Image.asset in Flutter?

From an AssetImage object i'm trying to get the file name in Flutter.
Image photo = Image.asset('assets/images/image-not-found.jpg');
print(photo.image); // AssetImage(bundle: null, name: "assets/images/image-not-found.jpg")
print(photo.image.assetName); // assetName not defined
print(photo.image.name); // name not defined
How to get this assetName property?
Something nicer without doing some regex on photo.image.toString();
EDIT:
the purpose here was to retrieve the image name in order to compare it.
So i just go for direct comparaison.
if(photo.image == AssetImage('assets/images/image-not-found.jpg')){
print("image was not found");
}
Try AssetImage for this.
var photo = AssetImage('assets/images/image-not-found.jpg');
print(photo.assetName);
//You can use split method like
`String toSplit = 'assets/images/image-not-found.jpg';
var imageName = toSplit.split("/");
print(var[2]);`
//You can get your image name stored in var[2].
First, add an asset folder in pubspec file like:
assets:
- specify a folder where is your assets are stored.
and use like this
Image.asset(
'assets/images/profile.png',
fit: BoxFit.fill,
),