FlutterFlow：如何在自定义代码中使用资产中的图像

Question

我需要使用自定义代码以编程方式显示资产中的图像：自定义小部件。

当我尝试在自定义代码中指定资产中的图像时，如下所示：“Image.asset('assets/image/image_name.png')”，控制台（在网络发布中）显示找不到图像。

当我尝试添加另一个使用图像资源类型的小部件图像并在自定义代码中使用相同的图像时，会显示图像，但是当我更改画布中的图像并在自定义代码中使用不同的图像时，图像不会显示向上。

当我们使用 Flutter 编写应用程序时，我们可以在 pubspec.yaml 文件中指定我们要在应用程序中使用的图像。如何使用FlutterFlow实现在自定义小部件中显示资产图像中的图像？

下图是屏幕UI的截图。我需要使用自定义小部件来随机显示图像。我在其下方添加了一个小部件图像以了解发生了什么。

这是我用来在自定义小部件中显示图像的代码。我在这里使用静态图像来了解代码中发生的情况：Image.asset('assets/images/game_letter_B.png')

如您所见，图像 C 没有显示。 B 仅显示，因为我使用画布中的图像小部件“资产”类型（自定义小部件下方的“B”）

这里A和C一定要显示，但是什么也没有显示。和控制台显示图像未找到

您能帮我看看发生了什么吗？我该找谁来解决这个问题？

Answer 1

您可以使用以下函数从应用程序资产加载图像

import 'package:flutter/services.dart' show rootBundle;

Future<Uint8List> loadImageAssetAsBytes(String assetPath) async {
  final ByteData data = await rootBundle.load(assetPath);
  final Uint8List bytes = data.buffer.asUint8List();
  return bytes;
}