How to display an image with flutter web? - flutter

Question

I have a problem because I'm using the file picker package, and in mobile works pretty well, but when I tried with flutter web show this error on the console:
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart
166:15
On web path is always null,
You should access bytes property instead,
Read more about it here
This is my code:
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',
)),
),
),

Answer 1

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)
}