cannot render widget with image inside

[razfazz]

images inside widgets are ignored when snapshotting the widget

[Surio89]

same here for Flutter Web - Android works for me Flutter (Channel stable, 3.0.1, on Microsoft Windows [Version 10.0.19044.1706], locale de-DE)

i use --web-renderer canvaskit and i also tried --dart-define=BROWSER_IMAGE_DECODING_ENABLED=false

[mirkancal]

Same here. --dart-define=BROWSER_IMAGE_DECODING_ENABLED=false work on desktop chrome but on mobile safari it doesn't work.

[ritheshSalyan]

Can we get info for debugging. Can you add result of flutter doctor -v here. Because when we tried in flutter 3.0.1 capturing image works fine.

[mirkancal]

@ritheshSalyan I can give.

[✓] Flutter (Channel stable, 3.0.1, on macOS 12.3.1 21E258 darwin-arm, locale en-TR)
    • Flutter version 3.0.1 at /Users/mirkan/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision fb57da5f94 (3 weeks ago), 2022-05-19 15:50:29 -0700
    • Engine revision caaafc5604
    • Dart version 2.17.1
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/mirkan/Library/Android/sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • ANDROID_HOME = /Users/mirkan/Library/Android/sdk
    • ANDROID_SDK_ROOT = /Users/mirkan/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)

[✓] IntelliJ IDEA Ultimate Edition (version 2021.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 67.1.3
    • Dart plugin version 213.7371

[✓] VS Code (version 1.67.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.42.0

[✓] VS Code (version 1.67.2)
    • VS Code at /Applications/Rosetta VSCode.app/Contents
    • Flutter extension version 3.42.0

[✓] VS Code (version 1.67.1)
    • VS Code at /Users/mirkan/Downloads/Visual Studio Code.app/Contents
    • Flutter extension version 3.42.0

[✓] Connected device (3 available)
    • iPhone 8 (mobile) • 2104CA2C-6EE7-46D3-B212-6C66B098A9BD • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-15-5 (simulator)
    • macOS (desktop)   • macos                                • darwin-arm64   • macOS 12.3.1 21E258 darwin-arm
    • Chrome (web)      • chrome                               • web-javascript • Google Chrome 102.0.5005.61
    ! Error: Mirkan’s iPhone is not connected. Xcode will continue when Mirkan’s iPhone is connected. (code -13)
    ! Error: iPhone is not connected. Xcode will continue when iPhone is connected. (code -13)

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[marcellocamara]

I don't know if its related, but I noticed that when I had updated to flutter 3.0.1, with dart 2.17.1 this lib stoped to send the media file into the whatsapp (my case) only for iOS...

Android are still sending the image media file as attach

[1057437122]

same here, for me android and ios both work fine, on web it just render an empty place for the images.

[per-activote]

Based on my testing, this is related to the Flutter engine itself, not this particular package, so you might have better luck reporting this on the Flutter GitHub.

[anubhavbagri]

same here for Flutter Web - Android works for me Flutter (Channel stable, 3.0.1, on Microsoft Windows [Version 10.0.19044.1706], locale de-DE)

i use --web-renderer canvaskit and i also tried --dart-define=BROWSER_IMAGE_DECODING_ENABLED=false

hi @Surio89 did you find any workaround for this? I'm facing the exact same issue for flutter web 😓

[MingSern]

Any plans on how to solve this?

[ritheshSalyan]

This Issue is related to CanvasKit

Current Walkaround is adding option --dart-define=BROWSER_IMAGE_DECODING_ENABLED=false while running in release mode.

Please Note: This will work only in release mode

So if you are running flutter Web please Use Following Command to run

 flutter run -d chrome --web-renderer canvaskit --dart-define=BROWSER_IMAGE_DECODING_ENABLED=false --release

[jdde]

Update from my side - we do have the problen on macOS. And it appears just sometimes, 20% of the cases - sounds like somewhere the library doesnt wait for the image to be loaded oO The rate is higher in release builds.

[jdde]

By the way, there's a dumb workaround - I detected that it's not working for the first time when the application was started => take widget photo => blank.

The second photo was always working.

So just take the photo twice... then its working

[MarceloDiefenbach]

im facing this issue too

This Issue is related to CanvasKit

Current Walkaround is adding option --dart-define=BROWSER_IMAGE_DECODING_ENABLED=false while running in release mode.

Please Note: This will work only in release mode

So if you are running flutter Web please Use Following Command to run

 flutter run -d chrome --web-renderer canvaskit --dart-define=BROWSER_IMAGE_DECODING_ENABLED=false --release

this works to test, but when i build to share with users on my host/server this not work and the images dont appear on screenshor

[avatarKaran]

yeah im having the same issue. it wont capture the image inside the image you are taking a screenshot of

[edwardcahyadi]

Just like @jdde said, capturing the widget multiple times seem to help get the image more consistently.

Future<void> captureWidgetAndShareImage({
  required Widget widget,
}) async {
  ScreenshotController screenshotController = ScreenshotController();

  await screenshotController.captureFromWidget(
    widget,
    delay: Duration.zero,
  ); // first dummy capture
  await screenshotController.captureFromWidget(
    widget,
    delay: Duration.zero,
  ); // second dummy capture

  Uint8List image = await screenshotController.captureFromWidget(
    widget,
    delay: Duration.zero,
  ); // third capture - the actual image used

  shareImage(image); // whatever function to process the image
}