flutter / flutter/flutter

Image in the RawImage widget is failing to load in golden widget testing

Open
#152,601 10 comments 0 reactions 0 assignees View on GitHub
a: images a: tests found in release: 3.22 found in release: 3.24 framework has reproducible steps P2 team-framework triaged-framework
Dominant language
Dart
Stars
179k
Forks
31.1k
PR merge metrics
PR metrics pending

Description

### Description
I'm facing an issue with a golden widget test where an image displayed using the RawImage widget is not appearing in the screenshot. Despite using extended durations for pumpWidget, pump, and pumpAndSettle, the image does not render. I have attached the code for displaying the image and the test case for reference.

RawImage widget: https://api.flutter.dev/flutter/widgets/RawImage-class.html
pump method: https://api.flutter.dev/flutter/flutter_test/WidgetTester/pump.html
pumpWidget method: https://api.flutter.dev/flutter/flutter_test/WidgetTester/pumpWidget.html
pumpAndSettle method: https://api.flutter.dev/flutter/flutter_test/WidgetTester/pumpAndSettle.html

### Steps to reproduce

Create a method to generate raw bytes from an image:
1. Use the loadImageToRawBytes (the code is attached) function to load an image asset and convert it into raw bytes.

Create a StatefulWidget for Displaying Images:
1. Implement the ImagesToBytes (the code is attached) class to display an image using raw bytes.

Test Implementation:
1. Implement the attached test case and run flutter test --update-goldens command.
2. Use the following methods to ensure the image is fully loaded before taking the screenshot:
tester.pump with a 60-second duration.
tester.pumpAndSettle with a 60-second duration.

### Expected results

The image should be fully rendered and visible in the golden screenshot taken during the test.

### Actual results

Despite the long duration waits (60 seconds), the image does not appear in the screenshot. Only the surrounding UI elements are visible.

### Code sample

Code sample

```dart
// code for sample application
class ImagesToBytes extends StatefulWidget {
final Uint8List bytes ;
final int width;
final int height;
ImagesToBytes(
{required this.bytes, required this.width, required this.height});
@override
_ImagesToBytesState createState() => _ImagesToBytesState();
}

class _ImagesToBytesState extends State {
ui.Image? _image;

@override
void initState() {
super.initState();
_createImage(widget.bytes, widget.width, widget.height);
}

Future _createImage(Uint8List pixels, int width, int height) {
final Completer completer = Completer();
ui.decodeImageFromPixels(pixels, width, height, ui.PixelFormat.rgba8888,
(ui.Image image) {
setState(() {
_image = image;
});
completer.complete(image);
});
return completer.future;
}

@override
Widget build(BuildContext context) {
return _image != null
? RawImage(
image: _image,
width: widget.width.toDouble(),
height: widget.height.toDouble(),
)
: CircularProgressIndicator();
}
}
//code for generating raw bytes from the image (asset)
Future loadImageToRawBytes(String assetPath) async {
// Load image from assets
final ByteData data = await rootBundle.load(assetPath);
final Uint8List bytes = data.buffer.asUint8List();
// Decode image
final ui.Codec codec = await ui.instantiateImageCodec(bytes);
final ui.FrameInfo frameInfo = await codec.getNextFrame();
final ui.Image image = frameInfo.image;
// Convert image to raw bytes
final ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.rawRgba);
return byteData?.buffer.asUint8List();
}

//raw image golden testcase:
void main() {
testWidgets('Image to Bytes Golden Test', (WidgetTester tester) async {
await tester.runAsync(() async {
await tester.pumpWidget(
MaterialApp(
home: ImagesToBytes(bytes: rawImageData, width: 284, height: 177),
),
duration: Duration(seconds: 60));
//await tester.pump(Duration(seconds:60));
await tester.pumpAndSettle(Duration(seconds: 60));
});

await expectLater(
find.byType(ImagesToBytes),
matchesGoldenFile('goldens/rawimage_bytes_pumpandsettle.png'),
);
});
}
```

### Screenshots or Video

Screenshots / Video demonstration

![image](https://github.com/user-attachments/assets/2780a458-5c5f-487b-9115-c87531dfd56e)

### Logs

Logs

```console
[Paste your logs here]
```

### Flutter Doctor output

Doctor output

```console
[√] Flutter (Channel stable, 3.22.2, on Microsoft Windows [Version 10.0.22631.3880], locale en-US)
• Flutter version 3.22.2 on channel stable at D:\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 761747bfc5 (8 weeks ago), 2024-06-05 22:15:13 +0200
• Engine revision edd8546116
• Dart version 3.4.3
• DevTools version 2.34.3

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at D:\AndroidSDK
• Platform android-34, build-tools 34.0.0
• Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
• Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)
• All Android licenses accepted.

[√] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Professional 2022 17.9.7)
• Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Professional
• Visual Studio Professional 2022 version 17.9.34902.65
• Windows 10 SDK version 10.0.22621.0

[√] Android Studio (version 2023.2)
• Android Studio at C:\Program Files\Android\Android Studio
• 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 17.0.9+0--11185874)

[√] VS Code, 64-bit edition (version 1.91.1)
• VS Code at C:\Program Files\Microsoft VS Code
• Flutter extension version 3.92.0

[√] Connected device (3 available)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22631.3880]
• Chrome (web) • chrome • web-javascript • Google Chrome 127.0.6533.74
• Edge (web) • edge • web-javascript • Microsoft Edge 127.0.2651.74

[√] Network resources
• All expected network resources are available.

• No issues found!
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.