Flutter: Specify and use an asset within a package

user_1320621 0
Viewed 802

What's the general approach specifying and referencing an asset within a Flutter/Dart package?

I have tried various approaches and I always get the error Unable to load asset: path/to/image when trying to create an image widget: Image(image: AssetImage('path/to/image')).

My goal is to create custom buttons library and some of them should come with custom icons (images).

I would like to use the images within my own package, not outside in an app and expose complete button widgets instead.

For example, let's say I'm creating a package called wolf:

  • wolf/
  • wolf/lib/wolf.dart
  • wolf/lib/src/Wolf.dart
  • wolf/pubspec.yaml

Where in the above directory structure do you put an asset, how do you define it in pubspec.yaml (if necessary) and how do you use it in wolf/lib/src/Wolf.dart?

dart-pub dart flutter
1 Answers

In your pubsec.yaml, you need to include the assets, like this-

flutter:
  assets:
    - assets/logos/google_light.png
    - assets/logos/google_dark.png

Create a Widget in your package and use it. Use the name of your package (assuming name of your package is flutter_mypackage_button) in the package attribute of AssetImage, like this-

Image(
    image: AssetImage(
        button == Buttons.Google
            ? 'assets/logos/google_light.png'
            : 'assets/logos/google_dark.png',
        package: 'flutter_mypackage_button',
    ),
    height: 36.0,
)

I hope this should do it.

user_122026170
Related