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!

[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
}