Image from widget not shown

[zjhiphop]

Hi, there

Recently i tried to use story book to present components and found there is a image assets issue.

There is a component Rating as:

class Rating extends StatelessWidget {
  double iconSize;
  double spacing;
  int rating;

  Rating(this.rating, {this.iconSize = 32, this.spacing = 4});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: List.generate(5, (index) {
        return SizedBox(
            width: iconSize.convert(),
            height: iconSize.convert(),
            child: Image.asset(
              index < rating
                  ? "assets/images/icon_star_selected.png"
                  : "assets/images/icon_star.png",
              fit: BoxFit.contain,
            ));
      }),
    );
  }
}

And i tried to present the rating inside story book as:

 Story(
              name: 'Widgets/Rating',
              description: 'Rating widget.',
              builder: (context) => Container(
                    child:  Rating(3) // all the images not shown
                  )
        )

All images inside Rating widget not shown.

My flutter env:

[✓] Flutter (Channel stable, 3.0.1, on macOS 12.1 21C52 darwin-x64, locale en-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[!] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    ! CocoaPods 1.10.1 out of date (1.11.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] IntelliJ IDEA Community Edition (version 2022.1.2)
[✓] VS Code (version 1.67.2)
[✓] Connected device (2 available)
    ! Error: 明棣的iPad is not connected. Xcode will continue when 明棣的iPad is connected. (code -13)
    ! Error: iPad-GG7DJ7P1Q16T is not connected. Xcode will continue when iPad-GG7DJ7P1Q16T is connected. (code -13)
    ! Error: 明棣’s iPad Air 4th is not connected. Xcode will continue when 明棣’s iPad Air 4th is connected. (code -13)
[✓] HTTP Host Availability

Please help to check this issue, tks!

[ookami-kb]

Hi,

I cannot reproduce it – it works for me. Are you sure that the images are shown in the main app, and are broken in storybook only?

[tenhobi]

Hey @zjhiphop, the package should not involve asset manipulation for local assets, so it should work. However, I had an issue with network images. For that, I had to update macos/Runner/DebugProfile.entitlements file with

<key>com.apple.security.network.client</key>
<true/>

So if you are having this issue, please try this approach.