Flutter Web图片无法上传至Firebase Storage问题求助

现状：可选择多张图片并展示 #

我能通过Image Picker Web选择多张图片并在应用中展示，代码如下：

Future _pickMultiImages() async {
    final images = await ImagePickerWeb.getMultiImagesAsWidget();

    _pickedImages.clear();
    if (images != null) _pickedImages.addAll(images);
    setState(() {
          _photo = _pickedImages;
    });
}

问题：无法上传至Firebase Storage #

但我无法将选中的图片列表（或单张图片）上传至Firebase Storage，始终出现异常。我尝试了官方示例代码：

void UploadImage(List<Image> pickedImages) async {
  Directory appDocDir = await getApplicationDocumentsDirectory();
  String appDocPath = appDocDir.path;
  print(appDocPath);
  final filePath = "${appDocPath}/path/to/mountains.jpg";
  final file = File(filePath);

// Create the file metadata
  final metadata = SettableMetadata(contentType: "image/jpeg");

// Create a reference to the Firebase Storage bucket
  final storageRef = FirebaseStorage.instance.ref();

// Upload file and metadata to the path 'images/mountains.jpg'
  final uploadTask =
      storageRef.child("images/mountains.jpg").putFile(file, metadata);
}

我知道上述代码还未适配我的应用，仅用于参考官方逻辑，但执行到appDocDir = await getApplicationDocumentsDirectory()时程序卡住，出现如下报错：

void _complete() {
     assert(_completed == null);
     _completed = true;
     _primaryCompleter.complete();
     _secondaryCompleter?.complete();
}

当前完整代码（存在展示和上传问题） #

以下是我当前无法正常展示图片的完整代码：

import 'package:file_selector/file_selector.dart';
import 'package:flutter/material.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'dart:async';
import 'package:image_picker_web/image_picker_web.dart';

class UploadImageTest extends StatefulWidget {
  const UploadImageTest({Key? key}) : super(key: key);

  @override
  State<UploadImageTest> createState() => _UploadImageTestState();
}

class _UploadImageTestState extends State<UploadImageTest> {
  ///////////////// VARIABLES ////////////////////////////////////////////////////////////////////

  List<XFile> images = [];

  var _pickedImages;

  var _photo;

////////////////// IMAGE PICKING AND UPLOADING FUNCTIONS ////////////////////////////////////////

  Future _pickMultiImages() async {
    final images = await ImagePickerWeb.getMultiImagesAsBytes();

    _pickedImages.clear();
    if (images != null) _pickedImages.addAll(images);
    setState(() {
      _photo = _pickedImages;
    });
    print('pickMultiImages');
  }

  Future<List<XFile>?> _pickWebImages() async {
    final typeGroup = XTypeGroup(label: 'images', extensions: ['jpg', 'png']);
    final images = await openFiles(acceptedTypeGroups: [typeGroup]);

    if (images == null) return null;

    return images;
  }

  Future<void> uploadWebImages(List<XFile> images) async {
    // Create the file metadata
    final metadata = SettableMetadata(contentType: 'image/jpeg');

    // Create a reference to the Firebase Storage bucket
    final storageRef = FirebaseStorage.instance.ref('images');

    // Upload files and metadata to the bucket
    for (final image in images) {
      final data = await image.readAsBytes();
      final uploadTask = storageRef.child(image.name).putData(
            data,
            metadata,
          );

      await uploadTask;
    }
  }

////////////////////////////////////////////////////////////////////////////////////////////////////

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Scaffold(
          body: SingleChildScrollView(
              child: Container(
                  child: Column(children: [
        Center(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Wrap(
                  // spacing: 15.0,
                  children: <Widget>[
                    AnimatedSwitcher(
                      duration: const Duration(milliseconds: 300),
                      switchInCurve: Curves.easeIn,
                      child: SizedBox(
                        width: 500,
                        height: 200,
                        child: ListView.builder(
                            scrollDirection: Axis.horizontal,
                            itemCount: 3,

                            /// length method not found
                            itemBuilder: (_, index) => _pickedImages[index]),
                      ),
                    ),
                  ],
                ),
                ButtonBar(
                    alignment: MainAxisAlignment.center,
                    children: <Widget>[
                      ElevatedButton(
                        onPressed: () {
                          _pickMultiImages();
                        },
                        child: const Text('Select Images'),
                      ),
                      ElevatedButton(
                        onPressed: () {
                          uploadWebImages(_pickedImages);
                        },
                        child: const Text('Upload Images'),
                      ),
                    ]),
              ]),
        ),
      ])))),
    );
  }
}

////////////////////////////////////////////////////////////////////////////////////////////////////

内容的提问来源于stack exchange，提问作者user40823