Flutter 应用程序，ListView.builder 首次运行时出现错误。需要重启应用（ListView.builder 和 image_picker）

Posted 2023-05-07

【中文标题】Flutter 应用程序，ListView.builder 首次运行时出现错误。需要重启应用（ListView.builder 和 image_picker）

【英文标题】：Flutter app, ListView.builder pictures errors at first run. Need restart app (ListView.builder and image_picker)

【发布时间】：2021-06-01 07:42:22

【问题描述】：

我发现了 Flutter，在我的应用开发过程中遇到了一个问题。

我在我的数据库中添加了一个杂项，以及通过 image_picker 拍摄的照片的数据和链接。 我使用 ListView.builder 在应用程序主页上显示这些杂项的列表。

第一次打开应用程序时，出现找不到图像的错误。 我必须重新启动应用程序以避免错误。

我一定是错过了什么，有人可以帮我吗？

这是处理图像捕获并保存它的函数。

Future getImage() async 
  final PickedFile pickedFile = await picker.getImage(source: ImageSource.camera);
  final Directory directory = await getExternalStorageDirectory();
  final String path = directory.path;
  final String filename = basename(pickedFile.path);
  final File newFile = await moveFile(File(pickedFile.path), '$path/$filename');
  setState(() 
    _image = newFile;
  );

这里显示列表。

ListView.builder(
  itemCount: widget.markers.length,
  itemBuilder: (BuildContext context, int index) 
    return ListTile(
      leading: CircleAvatar(
      backgroundImage: AssetImage(widget.markers[index].image),
    ),
    title: Text('title')
  );
)

第一次运行有错误：

**
════════ Exception caught by image resource service ════════════════════════════
The following assertion was thrown resolving an image codec:
Unable to load asset: /storage/emulated/0/android/data/com.example.flutter_locate_reminder/files/89d7c94f-072a-4308-88d7-2d24b8ca744f9044594904088454133.jpg

When the exception was thrown, this was the stack
#0      PlatformAssetBundle.load
package:flutter/…/services/asset_bundle.dart:225
<asynchronous suspension>
#1      AssetBundleImageProvider._loadAsync
package:flutter/…/painting/image_provider.dart:668
#2      AssetBundleImageProvider.load
package:flutter/…/painting/image_provider.dart:651
#3      ImageProvider.resolveStreamForKey.<anonymous closure>
package:flutter/…/painting/image_provider.dart:504
...
Image provider: AssetImage(bundle: null, name: "/storage/emulated/0/Android/data/com.example.flutter_locate_reminder/files/89d7c94f-072a-4308-88d7-2d24b8ca744f9044594904088454133.jpg")
Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#1fb35(), name: "/storage/emulated/0/Android/data/com.example.flutter_locate_reminder/files/89d7c94f-072a-4308-88d7-2d24b8ca744f9044594904088454133.jpg", scale: 1.0)
════════════════════════════════════════════════════════════════════════════════

它似乎没有立即找到图像。

感谢您的帮助；）

【参考方案1】：

获取图片

final image = await picker.getImage(source: ImageSource.camera);
setState(() 
  _image = File(image.path);
);

显示图片

backgroundImage: Image.file(_image),

我认为这足以获取并显示图像。

【讨论】：

感谢您的帮助！但我不能分配 backgroundImage: Image.file(_image) 与 image.file(File(_image)); 相同backrgoundImage 需要 ImageProvider 而不是文件。所以，我可以解决我的问题： backgroundImage: FileImage(File(_image)) 谢谢你兄弟的正确轨道;)

【参考方案2】：

使用Image.file(File file) 代替 AssetImage。

  itemCount: widget.markers.length,
  itemBuilder: (BuildContext context, int index) 
    return ListTile(
      leading: CircleAvatar(
      backgroundImage: Image.file(widget.markers[index].image),
    ),
    title: Text('title')
  );
)````