Assets

If you have a separate package for your design system with its assets, you can skip this guide, because the assets are already included in a separate package.

If your app have assets, and you want to display them in Widgetbook, you need to set the package parameter in the Image.asset constructor. But doing so will make the image not display in your app. To fix this, you need to convert your assets folder into a package as follows.

  1. Add a pubspec.yaml file in the root of your assets folder

    No dependencies are needed
    name: assets
    description: >
      Holds the assets for the app. The assets are included in a
      separate package, to be able to share it with Widgetbook app.
    
    version: 0.0.0
    publish_to: none
    
    environment:
      sdk: ">=3.1.0 <4.0.0"
    
    flutter:
      assets:
        - .
    
  2. Add the assets package to your app and widgetbook pubspec.yaml files

    pubspec.yaml
    dependencies:
      assets:
        path: assets
    
    widgetbook/pubspec.yaml
    dependencies:
      assets:
        path: ../assets
    
  3. Use the package parameter in the Image.asset constructor whenever you want to display an image asset in your app

    Image.asset(
      'assets/image.png',
      package: 'assets',
    )