I'm developing a Flutter web application where I need to display images selected by the user. The application uses the file picker package, which works flawlessly on mobile platforms. However, when running on the web, the console outputs the following error message:
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 166:15 <fn>
On web `path` is always `null`,
You should access `bytes` property instead,
Read more about it [here](https://github.com/miguelpruivo/flutter_file_picker/wiki/FAQ)
Below is the snippet of my code responsible for picking and attempting to display the images:
utils.dart:
Future<List<File>> pickImages() async {
List<File> images = [];
try {
var files = await FilePicker.platform
.pickFiles(type: FileType.image, allowMultiple: false);
if (files != null && files.files.isNotEmpty) {
for (int i = 0; i < files.files.length; i++) {
images.add(File(files.files[i].path!));
}
}
} catch (e) {
debugPrint(e.toString());
}
return images;
}
stack_all.dart:
class _StackePagesState extends State<StackePages> {
Offset? tapOffset;
List<File> images = [];
final ScrollController _horizontal = ScrollController();
void selectImages() async {
var res = await pickImages();
setState(() {
images = res;
});
}
...
@override
Widget build(BuildContext context) {
final user = Provider.of<UserProvider>(context).user;
...
PopupMenuItem(
child: ListTile(
title: Text(
'Update pic',
style: GoogleFonts.nunito(
color: const Color(0xff3B3B3B),
fontSize: 16.0,
fontWeight: FontWeight.w500,
),
),
trailing: const Icon(
Icons.photo_camera_outlined,
color: Color(0xff3B3B3B),
size: 20,
semanticLabel:
'Pomodoro timer Update pic',
),
contentPadding: EdgeInsets.zero,
onTap: selectImages
),
),
...
icon: Tooltip(
message: 'Profile',
child: Semantics(
label: 'Pomodoro timer More',
enabled: true,
readOnly: true,
child: SizedBox(
height: 24,
width: 24,
child: images.isNotEmpty
? CircleAvatar(
radius: 14,
backgroundColor: Colors.white,
child: CarouselSlider(
items: images.map(
(i) {
return Builder(
builder:
(BuildContext context) =>
Image.file(
i,
fit: BoxFit.cover,
height: 200,
),
);
},
).toList(),
options: CarouselOptions(
viewportFraction: 1,
height: 200,
)),
)
: const Icon(
Icons.account_circle_outlined,
color: Color(0xff3B3B3B),
size: 24,
semanticLabel:
'Pomodoro timer Profile',
)),
),
),
I've attempted to follow the advice in the error message regarding accessing the bytes property instead of the path, but I'm unsure how to properly implement this for displaying images.
Could anyone guide me on how to adjust my code to display images on Flutter web correctly, considering the error advice?
the error gives you the answer, in flutter web you cannot access the path The paths are not inaccessible from browsers.the documentation indicates it https://github.com/miguelpruivo/flutter_file_picker/wiki/FAQ If you want to save the image you must save as bytes here a small example
Future<List<Uint8List>> pickImages() async {
List<Uint8List> images = [];
try {
var files = await FilePicker.platform
.pickFiles(type: FileType.image, allowMultiple: false);
if (files != null && files.files.isNotEmpty) {
for (int i = 0; i < files.files.length; i++) {
images.add(files.files[i].first.bytes!);
}
}
} catch (e) {
debugPrint(e.toString());
}
return images;
}change image.assets to image.memory
return Builder(
builder:
(BuildContext context) =>
Image.memory(
i,
fit: BoxFit.cover,
height: 200,
),
Since you are running on a mobile app and also on the web you should use a flag to check what platform you are on.
import 'package:flutter/foundation.dart';
if (kIsWeb) {
// here code for web (bytes)
}else{
//here code for mobil (path)
}