Docs : How to use assets from an external package

Flutter Gallery uses assets from an external package, it could be helpful to mention this and give an example in Assets and images article.

Posse has also asked for something like this (being able to provide resources from a dependent package and use them). I think there may even be another bug on file.

@eseidel

@eseidel do you mean use them, without adding them in the application yaml assets ? because we're already able to provide resources from a dependent package and use them !? What was not clear to me, is that assets from dependent package need to be declared in the app assets with packages/package_name/file.png syntax.

@rxlabz

@rxlabz either case. I'm not sure how to provide assets in a package? (placing images in lib? for example?) And then once they're provided in a dependent package, how do you depend on them? package/foo/file.png could work if you don't use flutter packages get which by default uses .packages files instead of packages/ directory symlinks? And yes, it would be nice to have more automatic management of assets w/o having to always edit the pubspec.yaml flutter/assets section but that's likely a larger task. Thoughts?

Put your assets into the lib/ of your package.

You can then access those assets with the Resource class from package:resource: https://pub.dartlang.org/packages/resource . This works with .packages file.

The question is, how does the Flutter build system ensure the assets from 3rd party packages are copied over into the apk/ipa ?

@eseidel

this is yet an another option :) !
what worked for me :

putting my image into the foo package lib/
add the path in the app yaml

flutter:
  assets:
    - packages/foo/file.png

use new Image.asset('packages/foo/file.png')

@eseidel Seems to me that my project uses default .packages. My dependent package is local, declared with path directive in the yaml, could it be broken with a published pub package ?

I'll try to use the package:resource with new Image.raw(). If it can remove the need of editing the yaml file, it will probably be enough for me.

@rxlabz

@rxlabz you are on the cutting edge so please report back :)

Note: package:resource doesn't solve the bundling problem. AFAIK there's no way currently for the flutter build process to pull over assets from a package into the APK and IPA.

@sethladd

@sethladd ah ok ! sorry I did not understand the bundling problem before. So all the bundled files need to be declared as assets in the application yaml file ? In that case, package:resource would only add another package dependency which is avoidable by using Image.asset ?

I just made a test, here's what I learned. tldr:

put assets to be shared into the lib/ of the package (example: https://github.com/sethladd/asset_test_flutter)
use packages/<PACKAGENAME>/<path to asset> in the assets: section of the pubspec.yaml. This works for .packages (the standard, supported dependency map for dart apps)

For example, in your app:

dependencies:
  flutter:
    sdk: flutter
  asset_test_flutter:
    git: https://github.com/sethladd/asset_test_flutter.git

flutter:
  uses-material-design: true

  assets:
    - packages/asset_test_flutter/Flutter-Mark-square-100.png

FWIW the logic to resolve the "packages/" path is at https://github.com/flutter/flutter/blob/master/packages/flutter_tools/lib/src/asset.dart#L404

Exactly, same conclusion ! thanks for clarifying, and pointing to the underlying source.This definitely could be a useful info to add to flutter.io :)
For now, in my use case, I'm using only few bundled assets, so the pubspec.yaml declaration phase is not a big pain.
But... I can easily imagine some more advanced use case, like maybe app/theme customization from external packages, which could definitely enjoy a more automatic way of doing that kind of bundling ! :)

I think we need to do two things:

Update the assets-and-images page
Update the sample pubspec.yaml

We'll leave this issue open until we add docs to at least those two places.

Thanks for your patience :)

Updating the starter pubspec.yaml: #9295

+1 to this issue -- was just trying to create a little library that other Flutter users could import and then immediately start using that includes Font assets.

From my Q on Gitter:
What I'm trying to do: Create a FontAwesome (fontawesome.io) Flutter library that can be imported by other Flutter projects. This lib would act exactly like the Icons class, but would expose a FontAwesomeIcons class instead. In order to do this, I need to not only export this class, but also the Font asset. However, when I put the Font asset in my pubspec.yml in the Font Awesome Flutter library, then try to import this lib in my actual Application project, the font does not come with it and I have to manually specify it.

Thanks!

@xster

I think @xster had talked about looking at making a sample package that includes an icon font (for iOS) and making sure everything to make that possible was nice and smooth.

@mit-mit

cc @mit-mit for tracking this user journey w.r.t. package assets for Flutter

I'd like to construct a GoogleSignInButton in the plugins package, but I don't know how to tell the Image.asset(..) image construction where the bundled image is specified in the plugins pubsec.yaml. It doesn't appear there is a proper way to specify the AssetBundle from the plugin.

Here's the branch I've been working on to try to construct this:
https://github.com/flutter/plugins/pull/118/files#diff-3db3b328384f332ceedf42a41fff16e7R23

const String imagePath = 'resources/google_signin_buttons/btn_google_dark_disabled.png';

Image image = new Image.asset(
 +      imagePath,
 +      fit: BoxFit.cover,
 +      bundle: DefaultAssetBundle.of(context), // TODO won't work
 +    );

transtive pubsec.yaml image registered as such

 assets:
 +    - resources/google_signin_buttons/btn_google_dark_disabled.png

Is this the same issue, I'm talking about?

Navigation Menu

Repository navigation

Docs : How to use assets from an external package #9249

1 remaining item

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Docs : How to use assets from an external package #9249

Description

Activity

eseidelGoogle commented on Apr 6, 2017

rxlabz commented on Apr 7, 2017

eseidelGoogle commented on Apr 7, 2017

sethladd commented on Apr 7, 2017

rxlabz commented on Apr 7, 2017

rxlabz commented on Apr 7, 2017

sethladd commented on Apr 7, 2017

rxlabz commented on Apr 7, 2017

sethladd commented on Apr 7, 2017

rxlabz commented on Apr 7, 2017

sethladd commented on Apr 7, 2017

sethladd commented on Apr 7, 2017

1 remaining item

brianegan commented on Jun 10, 2017

Hixie commented on Jun 10, 2017

sethladd commented on Jun 12, 2017

branflake2267 commented on Jun 14, 2017

eseidelGoogle commented on Jun 21, 2017

mit-mit commented on Sep 1, 2017

mit-mit commented on Sep 5, 2017

szakarias commented on Sep 5, 2017

szakarias commented on Sep 11, 2017

aakash1313 commented on Jul 18, 2020

github-actions commented on Aug 17, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions