Image is not drawn inside SingleChildScrollView but it's displayed after triggering Hot reload

d3im commented 2 months ago

Steps to reproduce

I have image asset in two stack ancestors and when I run app on connected device it doesn't display image. When I minimize and put to foreground app again, image appears. I found in Flutter Inspector when image is not displayed it have h=0.0 and w=0.0 whereas containing stack have h=505.4 and w=392.7 Image itself has set fit: BoxFit.fitWidth

Expected results

Drawn image on background.

Actual results

White place no image drawn.

Code sample

```dart Stack( alignment: AlignmentDirectional.topStart, children: [ Image.asset( 'assets/image.webp', fit: BoxFit.fitWidth, ), ... ```

Screenshots or Video

Screenshots / Video demonstration

Logs

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

Flutter Doctor output

Doctor output

```console /opt/flutter/bin/flutter doctor --verbose [✓] Flutter (Channel stable, 3.22.2, on Gentoo Linux 6.9.8-genbrd-rt5-systemd, locale cs_CZ.UTF-8) • Flutter version 3.22.2 on channel stable at /opt/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 761747bfc5 (6 weeks ago), 2024-06-05 22:15:13 +0200 • Engine revision edd8546116 • Dart version 3.4.3 • DevTools version 2.34.3 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /home/d/android/android • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /home/d/android/android • Java binary at: /opt/android-studio/jbr/bin/java • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314) • All Android licenses accepted. [✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome) ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable. [✓] Linux toolchain - develop for Linux desktop • clang version 18.1.8 • cmake version 3.30.0 • ninja version 1.11.1 • pkg-config version 2.2.0 [✓] Android Studio (version 2023.1) • Android Studio at /opt/android-studio • Flutter plugin version 78.2.1 • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314) [✓] Connected device (2 available) • Mi A2 (mobile) • 2373cc67 • android-arm64 • Android 13 (API 33) • Linux (desktop) • linux • linux-x64 • Gentoo Linux 6.9.8-genbrd-rt5-systemd [✓] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. Process finished with exit code 0 ```

huycozy commented 2 months ago

Hi @d3im I see there is only one Stack from your code sample. I tried using the complete one below but the image is displayed well:

Scaffold(
  body: Center(
    child: Stack(
      children: [
        Stack(
          children: [
            Image.asset(
              'assets/AppIcon.png',
              fit: BoxFit.fitWidth,
            ),
          ],
        )
      ],
    ),
  ),
)

Please provide a completed and minimal reproducible code sample so that we can verify the issue properly. Thanks!

d3im commented 2 months ago

I recreated (quite) minimal project where issue is still reproducible. bg_issue_project.zip

I open Android Emulator (or connect Android phone) and run from Android Studio. Background image is not shown (W/h=0.0)

Screenshot (Can't upload any supported format of images directly so zipped here:)

[issue.zip](https://github.com/user-attachments/files/16248081/issue.zip)

huycozy commented 2 months ago

This doesn't seem to be an issue with image assets but about another thing. When I remove ScrollMe ancestor widget (and only keep its child Graphics), both images display as desired.

I would suggest you narrow the sample code down until you find the cause of this (the related widget from Flutter framework that you think it causes the bug) and please provide the updated sample code.

Also, this is not related to flutter_svg package as I see the same result with another jpg image, so please remove it from the reproduction project. Thanks!

d3im commented 2 months ago

Got rid of unnecessary widgets and flutter_svg package: Problem is still observable. bg_issue_minimal.zip

danagbemava-nc commented 2 months ago

Hi @d3im, I noticed your sample doesn't have any platform folders. What platform(s) are you seeing this issue with? Also, there's a todo in there, what needs to be fixed in the code?

d3im commented 2 months ago

Hi @danagbemava-nc the code is intended to target iOS and Android. TODO FIX means this line causes problems reported as this issue. Issue is observed on Android (I'm not testing iOS actually).

huycozy commented 2 months ago

@d3im I narrowed your sample code down into this minimal one which doesn't include Stack widgets and the issue is still reproducible.

Some other tests:

The issue occurs with Image.network as well, so I will update the title accordingly.
If I remove the code block WidgetsBinding.instance.addPersistentFrameCallback, the issue doesn't happen (image can be displayed initially)
The issue is also reproduced on other platforms, I checked this on iOS, macOS and Web. So I think this is a framework issue.
The image can be displayed after triggering Hot reload or Devtools Show Guidelines.

Minimal sample code

```dart import 'package:flutter/material.dart'; void main() { runApp(const MaterialApp(home: IssueScreen())); } class IssueScreen extends StatefulWidget { const IssueScreen({super.key}); @override State createState() => _IssueScreen(); } class _IssueScreen extends State { @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: Column( children: [ Expanded( child: Container( color: Colors.green, child: const ScrollMe( child: Graphics(), ), // TODO FIX ), ), ], )), ); } } class Graphics extends StatelessWidget { const Graphics({super.key}); @override Widget build(BuildContext context) => Image.network( 'https://cdn.britannica.com/70/234870-050-D4D024BB/Orange-colored-cat-yawns-displaying-teeth.jpg', fit: BoxFit.fitWidth, ); } class ScrollMe extends StatefulWidget { const ScrollMe({super.key, this.child}); final Widget? child; @override State createState() => _ScrollMe(); } class _ScrollMe extends State { @override void initState() { super.initState(); _scrollController = ScrollController(); WidgetsBinding.instance.addPersistentFrameCallback((_) { debugPrint("WidgetsBinding"); setState(() { scrollable = _scrollController.position.extentAfter > 0.0; }); debugPrint("scrollable: $scrollable"); }); debugPrint("scrollable: $scrollable"); } bool scrollable = false; late final ScrollController _scrollController; @override Widget build(BuildContext context) => SingleChildScrollView( controller: _scrollController, child: widget.child, ); } ```

Verified on the latest Flutter stable 3.22.3 and master 3.24.0-1.0.pre.197.

flutter / flutter