Failed assertion width > 0.0': is not true when placing single Image in Container in FittedBox

Question

When I place an Image.network in either a Row or Container which is the child of a FittedBox, viewing it causes errors/crashes.

The FittedBox actually uses a function as its child which returns a widget based on number of images. When there are two images it returns a Row which has each image as its children, which works without error, but when there is only one the error occurs whether I return either a Container with the image as its child or a Row with a Single child being the image.

            Container(
              child: FittedBox(child: status.statusFiles()),
            ),

statusFiles:

    return Container(
        child: 
          Image.network(
            this.files[0].thumbnailUrl,
            fit: BoxFit.contain,
          ),
        );

I expect a FittedBox containing the image in the largest size that fits the, instead I get the following error when the widget is rendered

I/flutter (26617): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (26617): The following assertion was thrown during performLayout():
I/flutter (26617): 'package:flutter/src/rendering/box.dart': Failed assertion: line 307 pos 12: 'width > 0.0': is not
I/flutter (26617): true.
...
I/flutter (26617): When the exception was thrown, this was the stack:
I/flutter (26617): #2      BoxConstraints.constrainSizeAndAttemptToPreserveAspectRatio (package:flutter/src/rendering/box.dart:307:12)
I/flutter (26617): #3      RenderFittedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:2275:26)
I/flutter (26617): #4      RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (26617): #5      RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:738:15)
I/flutter (26617): #6      RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (26617): #7      RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:798:17)
I/flutter (26617): #8      RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (26617): #9      RenderPadding.performLayout (package:flutter/src/rendering/shifted_box.dart:199:11)
...
I/flutter (26617): The following RenderObject was being processed when the exception was fired:
I/flutter (26617):   RenderFittedBox#d752c relayoutBoundary=up8 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (26617):   creator: FittedBox ← Container ← Column ← Expanded ← Row ← Padding ← Container ←
I/flutter (26617):   RepaintBoundary-[<16>] ← IndexedSemantics ← NotificationListener<KeepAliveNotification> ←
I/flutter (26617):   KeepAlive ← AutomaticKeepAlive ← ⋯
I/flutter (26617):   parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
I/flutter (26617):   constraints: BoxConstraints(0.0<=w<=339.4, 0.0<=h<=Infinity)
I/flutter (26617):   size: MISSING
I/flutter (26617):   fit: contain
I/flutter (26617):   alignment: center
I/flutter (26617):   textDirection: ltr
I/flutter (26617): This RenderObject had the following descendants (showing up to depth 5):
I/flutter (26617):   RenderSemanticsAnnotations#df6f3 relayoutBoundary=up9 NEEDS-PAINT
I/flutter (26617):     RenderImage#63da1 relayoutBoundary=up10 NEEDS-PAINT
I/flutter (26617): ════════════════════════════════════════════════════════════════════════════════════════════════════

Solution 1

Neither of the previous solutions worked for me because I used fit: Boxfit.fitWidth and I really needed the height of the ancestors to depend on the image width.

My solution was to wrap the image in a ConstrainedBox and manually apply a min. height and width of 1:

ConstrainedBox(
      constraints: BoxConstraints(maxHeight: maxHeight),
      child: Hero(
        tag: 'SettingsPic',
        child: Container(
          width: double.infinity,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.vertical(bottom: Radius.circular(25)),
              boxShadow: [BoxShadow(
                  color: Colors.black.withOpacity(0.2),
                  blurRadius: 10
              )]
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.vertical(bottom: Radius.circular(25)),
            child: FittedBox(
              fit: BoxFit.fitWidth,
              alignment: Alignment.bottomCenter,
              child: ConstrainedBox(
                constraints: BoxConstraints(minWidth: 1, minHeight: 1), // here
                child: Image.asset(
                  'resources/images/background.png',
                ),
              ),
            ),
          ),
        ),
      ),
    )

Solution 2

Sizebox.expand solved my problem

Container(
  width: 50,
  height: 50,
  decoration: BoxDecoration(
    border: Border.all(color: Colors.grey),
    borderRadius: BorderRadius.circular(3),
    color: color,
  ),
  child: SizedBox.expand(
    child: FittedBox(
      child: Image.file(File(path)),
      fit: BoxFit.fill,
    ),
  ),
)

Solution 3

The reason why this is not working is because it does not know the width of the image because the image has yet to be loaded at the point of laying out the component. It needs the width of the image to do the calculation. When you do a hot reload the image will have been retrieved by Flutter at that point.

What I did in this situation is go through all my images and find out the dimensions and I hardcoded them into the file. I don't like this solution but it did solve my error.

I assume that the assets are retrieved from the assets directory only when they are required for performance reasons (ie, it would cause a lag at phone startup time if you had many images)

    Expanded(
      child: Column(
        children: [
          FittedBox(
            fit: BoxFit.scaleDown,
            child: Image.asset("assets/foot.png", width: 100, height: 100,),
          ),
        ],
      ),
    ),

Comments

[gregory boero.teyssier]

What if you want the image to be scaled depending on the phone resolution? In that case you don't know the dimensions up front / can't just hard code them