Image.file() 加载太慢

问题描述

我实现了一项功能，允许用户将文件上传到服务器。

用户在设备上选择了一个文件。如果是图像，则在屏幕上显示预览。并将其上传到服务器。
显示预览时，使用 Image.file() 显示。

但是它太慢了。当我选择多个图像时，应用有时会在绘制预览时崩溃。

在我看来，从文件系统中检索图像似乎消耗了太多资源。
有什么办法吗？

下面的代码是完成工作的构建方法。

  @override
  Widget build(BuildContext context) {
    String mimeStr = lookupMimeType(widget.file.filePathInLoacl);
    String fileType = mimeStr.split('/').first;

    return Consumer<FileUploadController>(
      builder: (context,fileUploadController,child) => Container(
        margin: const EdgeInsets.all(5.0),padding: const EdgeInsets.all(3.0),decoration: Boxdecoration(
          border: Border.all(color: Colors.grey[300]),borderRadius: BorderRadius.circular(5),),child: Row(
          children: [
            if (fileType != 'image')
              Stack(
                children: [
                  CircularProgressIndicator(
                    value: widget.file.uploadPercentage,strokeWidth: widget.file.uploadPercentage == 1 ? 0 : 1,Positioned(
                    right: 3,left: 3,top: 3,bottom: 3,child: CircleAvatar(
                      maxRadius: 16,backgroundColor: Colors.white,child: Container(
                        width: 12,height: 13.33,child: getUploadFileIcon(fileType),],if (fileType == 'image')//problem...!!
              Container(
                width: 50,height: 50,child: ClipRRect(
                  borderRadius: BorderRadius.circular(10),child: Image.file(
                    File(widget.file.filePathInLoacl),fit: BoxFit.cover,SizedBox(
              width: 10,Container(
              width: MediaQuery.of(context).size.width * 0.65,child: Text(widget.fileName),Spacer(),IconButton(
              icon: Icon(Icons.close),onpressed: () {
                widget.removeWhenCloseButtonTap(widget.file);
              },);
  }
}

解决方法

您可以尝试使用 image_picker 包。我在一个项目中尝试过它，它没有任何问题。以及显示所选图像的预览。