flutter - 如何在 Flutter 包/插件开发中添加资产？

Question

我正在开发一个包含一些资产文件的颤振包。我像往常一样在 pubsepc.yaml 中提到了所需的资产

  assets:
    - assets/abc.xyz

之后，我创建了一个颤振应用程序并将我开发的包导入pubspec.yaml...

dependencies:
  flutter:
    sdk: flutter
  my_developed_package: ^0.0.1

现在一切正常，除了我的资产不存在。我在我的应用程序中放置了一些资产，但没有提及pubsepc.yaml它的工作原理。我无法理解，如何将这些资产添加到我的包中以便它们自动加载？

score 14 · Accepted Answer

引用自

如果在包的 pubspec.yaml 文件中指定了所需的资产，它会自动与应用程序捆绑在一起。特别是，包本身使用的资产必须在其 pubspec.yaml 中指定。

在 Flutter 中，您可以使用包中的资产，这应该不是问题。唯一的事情是，您需要指定您的包并导入它。例如，如果它是一个图像，你可以使用AssetImage类和它的package属性。

AssetImage('assets/abc.xyz', package: 'my_developed_package');

有关如何调用文本和其他内容的更多信息，请查看此处。

score 13 · Accepted Answer

以下方法帮助我在插件开发中包含资产（不仅是图像，还包括任何类型的文件）。

我把我的资产放在像这样的lib文件夹下，my_plugin/lib/assets像pubspec.yaml这样。

  assets:
    - packages/my_plugin/assets/asset_name
       
  # Be careful about indentation

必须将您的插件资产放在 lib 目录中，在其他目录中它将不起作用。

它已与插件一起添加，然后我使用这样的路径访问它们 packages/my_plugin/assets/asset_name，例如

File myAsset = File("packages/my_plugin/assets/asset_name");

通过这种方法，我能够从插件中获取资产，而不仅仅是图像。

有关完整示例，您可以在此处查看我的插件。

score 2 · Accepted Answer

要从package依赖项加载图像，必须将 package 参数提供给AssetImage.

例如，假设您的应用程序依赖于一个名为my_icons的包，该包具有以下目录结构：

.../pubspec.yaml
.../icons/heart.png
.../icons/1.5x/heart.png
.../icons/2.0x/heart.png
...etc.

要加载图像，请使用：

AssetImage('icons/heart.png', package: 'my_icons')

包本身使用的资产也应使用上述package参数获取。

score -1 · Accepted Answer

Pubspec yaml 对缩进敏感

有区别

 assets:
  - packages/my_plugin/assets/asset_name

VS

 assets:
   - packages/my_plugin/assets/asset_name

如果您仔细注意以上两个，您会发现 pubspec.yaml 非常敏感

总是写

assets:
  -asset/yourasset/example1

行首必须有两个空格。

将资产链接添加到 pubspec 后，您必须运行packages get 如果您正确放置资产，它将显示退出错误为 0，否则它将显示错误背后的原因。

一般来说，初学者都会面临这些类型的问题。随着时间的推移，您将破解解决此错误的方法

score -1 · Accepted Answer

将资产添加到 Flutter 包可能会很困难！
只需按照这些步骤，您就可以开始了...

第一步：在Package根目录下创建一个assets文件夹

第 2 步：将其添加到您的pubspec.yaml文件中

flutter:
  assets:
    - assets/asset_name

# Mind the indentation

第 3 步：使用资产，用于图像文件

AssetImage('assets/asset_name.png', package: 'your_package_name')

运行Pub.dev并使用 Package 对 Flutter 应用程序进行冷启动

5 回答 5