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',
                                          )),
                          ),
                        ),

CodePudding user response：

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