how to convert an image to base64 image in flutter?
I just changed my code as follows,
import 'dart:convert';
List<int> imageBytes = widget.fileData.readAsBytesSync();
print(imageBytes);
String base64Image = base64Encode(imageBytes);
and this is working fine now.
It is better to read it asynchronously as the image can be very large which may cause blocking of the main thread
List<int> imageBytes = await widget.fileData.readAsBytes();
you can simply change the image to string :
final bytes = Io.File(imageBytes.path).readAsBytesSync();
String img64 = base64Encode(bytes);
In my case, i first selected the image using image_picker then use these line of code to convert the image to base64.
final bytes = File(image!.path).readAsBytesSync();
String base64Image = "data:image/png;base64,"+base64Encode(bytes);
print("img_pan : $base64Image");
image_picker code :
final ImagePicker _picker = ImagePicker();
XFile? image;
Container(
margin: const EdgeInsets.all(15.0),
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.all(Radius.circular(5.h))
),
child:InkWell(
onTap: () async {
image = await _picker.pickImage(
source: ImageSource.gallery);
setState(() {});
},
child: image != null
? Image.file(
File(image!.path),
height: 100.h,
width: 100.w,
)
: Image.asset(
'assets/image_icon.png',
height: 100.h,
width: 100.w,
fit: BoxFit.fill,
),
),),
In case you are trying to manage image/file uploads using Flutter Web, https://pub.dev/packages/file_picker is a better package to go with.
As we know, dart:io
is not supported on Flutter Web and throws Unsupported operation: _Namespace
error. Hence, using File
and reading file's bytes was not an option. Luckily, the package provides API to convert the uploaded image to Uint8List
. Here is my implementation:
import 'package:file_picker/file_picker.dart';
...
FilePickerResult? pickedFile;
...
void chooseImage() async {
pickedFile = await FilePicker.platform.pickFiles();
if (pickedFile != null) {
try {
setState(() {
logoBase64 = pickedFile!.files.first.bytes;
});
} catch (err) {
print(err);
}
} else {
print('No Image Selected');
}
}
In case you need to display the local image right away, use Image.memory
.
Image.memory(logoBase64!);