Repository: flutter
Issue: [flutter_svg] FittedBox and BoxFit.contain doesn't work as expected (PoC included)
Labels: package,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/768_

Original report by @eximius313 on Sep 6, 2022

Having such code:
```dart
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class TestFittedBox extends StatelessWidget {
  const TestFittedBox({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
      appBar: AppBar(),
      body: Container(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Expanded(
              flex: 2,
              child: Container(),
            ),
            Expanded(
              flex: 1,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Expanded(
                    flex: 1,
                    child: PoC(),
                  ),
                  Expanded(
                    flex: 6,
                    child: Container(),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
    );
  }
}

class PoC extends StatelessWidget {
  @override
  Widget build(final BuildContext context) => Container(
      decoration: BoxDecoration(border: Border.all(color: Colors.black,),),
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          mainAxisSize: MainAxisSize.max,
          children: [
            Flag(),
            Flag(),
            Flag(),
            Flag(),
          ],
        ),
      ),
    );
}

class Flag extends StatelessWidget {
  @override
  Widget build(BuildContext context) =>
    GestureDetector(
        onTapDown: null,
        child: Container(
            padding: EdgeInsets.only(left: 10, right: 10,),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(5),
              child: Image.asset("assets/flags/gb.png", fit: BoxFit.contain,), //works fine
              // child: FittedBox(child: SvgPicture.asset('assets/flags/gb.svg')), //looks fine, but throws exception
              // child: SvgPicture.asset('assets/flags/gb.svg', fit: BoxFit.contain,) //doesn't throw exception, but looks terrible
        ),
      ),
    );
  }
```

1. Flag in PNG looks good and works fine (no exceptions) ![image](https://user-images.githubusercontent.com/5578017/188744258-157a15d7-1506-4260-9326-443ac06c27d8.png)
2. Flag in SvgPicture inside FittedBox looks good with hot-reload
![image](https://user-images.githubusercontent.com/5578017/188744532-a9e2ba8d-e119-4de2-ae91-d4d58990275f.png)
, but when you restart - it throws exception:
```
════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during performLayout():
'package:flutter/src/rendering/box.dart': Failed assertion: line 319 pos 12: 'width > 0.0': is not true.

Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=2_bug.md

The relevant error-causing widget was
FittedBox
When the exception was thrown, this was the stack
#2      BoxConstraints.constrainSizeAndAttemptToPreserveAspectRatio
#3      RenderFittedBox.performLayout
#4      RenderObject.layout
#5      RenderProxyBoxMixin.performLayout
#6      _RenderCustomClip.performLayout
#7      RenderObject.layout
#8      RenderPadding.performLayout
#9      RenderObject.layout
#10     RenderProxyBoxMixin.performLayout
#11     RenderObject.layout
#12     RenderProxyBoxMixin.performLayout
#13     RenderObject.layout
#14     ChildLayoutHelper.layoutChild
#15     RenderFlex._computeSizes
#16     RenderFlex.performLayout
#17     RenderObject.layout
#18     _RenderSingleChildViewport.performLayout
#19     RenderObject.layout
#20     RenderProxyBoxMixin.performLayout
#21     RenderObject.layout
#22     RenderProxyBoxMixin.performLayout
#23     RenderObject.layout
#24     RenderProxyBoxMixin.performLayout
#25     RenderObject.layout
#26     RenderProxyBoxMixin.performLayout
#27     RenderObject.layout
#28     RenderProxyBoxMixin.performLayout
#29     RenderObject.layout
#30     RenderProxyBoxMixin.performLayout
#31     RenderObject.layout
#32     RenderProxyBoxMixin.performLayout
#33     RenderObject.layout
#34     RenderProxyBoxMixin.performLayout
#35     RenderCustomPaint.performLayout
#36     RenderObject.layout
#37     RenderProxyBoxMixin.performLayout
#38     RenderObject.layout
#39     RenderPadding.performLayout
#40     RenderObject.layout
#41     RenderProxyBoxMixin.performLayout
#42     RenderObject.layout
#43     ChildLayoutHelper.layoutChild
#44     RenderFlex._computeSizes
#45     RenderFlex.performLayout
#46     RenderObject.layout
#47     ChildLayoutHelper.layoutChild
#48     RenderFlex._computeSizes
#49     RenderFlex.performLayout
#50     RenderObject.layout
#51     MultiChildLayoutDelegate.layoutChild
#52     _ScaffoldLayout.performLayout
#53     MultiChildLayoutDelegate._callPerformLayout
#54     RenderCustomMultiChildLayoutBox.performLayout
#55     RenderObject.layout
#56     RenderProxyBoxMixin.performLayout
#57     RenderObject.layout
#58     RenderProxyBoxMixin.performLayout
#59     _RenderCustomClip.performLayout
#60     RenderObject.layout
#61     RenderProxyBoxMixin.performLayout
#62     RenderObject.layout
#63     RenderProxyBoxMixin.performLayout
#64     RenderObject.layout
#65     RenderProxyBoxMixin.performLayout
#66     RenderObject.layout
#67     RenderProxyBoxMixin.performLayout
#68     RenderObject.layout
#69     RenderProxyBoxMixin.performLayout
#70     RenderObject.layout
#71     RenderProxyBoxMixin.performLayout
#72     RenderObject.layout
#73     RenderProxyBoxMixin.performLayout
#74     RenderObject.layout
#75     RenderProxyBoxMixin.performLayout
#76     RenderObject.layout
#77     RenderProxyBoxMixin.performLayout
#78     RenderObject.layout
#79     RenderProxyBoxMixin.performLayout
#80     RenderObject.layout
#81     RenderProxyBoxMixin.performLayout
#82     RenderObject.layout
#83     RenderProxyBoxMixin.performLayout
#84     RenderObject.layout
#85     RenderProxyBoxMixin.performLayout
#86     RenderObject.layout
#87     RenderProxyBoxMixin.performLayout
#88     RenderObject.layout
#89     RenderProxyBoxMixin.performLayout
#90     RenderObject.layout
#91     RenderProxyBoxMixin.performLayout
#92     RenderObject.layout
#93     RenderProxyBoxMixin.performLayout
#94     RenderOffstage.performLayout
#95     RenderObject.layout
#96     RenderProxyBoxMixin.performLayout
#97     RenderObject.layout
#98     _RenderTheatre.performLayout
#99     RenderObject.layout
#100    RenderProxyBoxMixin.performLayout
#101    RenderObject.layout
#102    RenderProxyBoxMixin.performLayout
#103    RenderObject.layout
#104    RenderProxyBoxMixin.performLayout
#105    RenderObject.layout
#106    RenderProxyBoxMixin.performLayout
#107    RenderCustomPaint.performLayout
#108    RenderObject.layout
#109    RenderProxyBoxMixin.performLayout
#110    RenderObject.layout
#111    RenderProxyBoxMixin.performLayout
#112    RenderObject.layout
#113    RenderProxyBoxMixin.performLayout
#114    RenderObject.layout
#115    RenderProxyBoxMixin.performLayout
#116    RenderObject.layout
#117    RenderView.performLayout
#118    RenderObject._layoutWithoutResize
#119    PipelineOwner.flushLayout
#120    RendererBinding.drawFrame
#121    WidgetsBinding.drawFrame
#122    RendererBinding._handlePersistentFrameCallback
#123    SchedulerBinding._invokeFrameCallback
#124    SchedulerBinding.handleDrawFrame
#125    SchedulerBinding.scheduleWarmUpFrame.<anonymous closure>
(elided 13 frames from class _AssertionError, class _RawReceivePortImpl, class _Timer, dart:async, and dart:async-patch)
The following RenderObject was being processed when the exception was fired: RenderFittedBox#fd977 relayoutBoundary=up6 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
RenderObject: RenderFittedBox#fd977 relayoutBoundary=up6 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    parentData: <none> (can use size)
    constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=67.1)
    size: MISSING
    fit: contain
    alignment: Alignment.center
    textDirection: ltr
    child: RenderSemanticsAnnotations#19efb relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
        parentData: <none> (can use size)
        constraints: BoxConstraints(unconstrained)
        size: Size(0.0, 0.0)
        child: RenderLimitedBox#6f94a relayoutBoundary=up8 NEEDS-PAINT
            parentData: <none> (can use size)
            constraints: BoxConstraints(unconstrained)
            size: Size(0.0, 0.0)
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderFittedBox#fd977 relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
ClipRRect
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderClipRRect#18b61 relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
Container
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderPadding#7610e relayoutBoundary=up4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
GestureDetector
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderPointerListener#c11e7 relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
GestureDetector
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderSemanticsGestureHandler#84e77 relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
Row
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderFlex#47c31 relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
SingleChildScrollView
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: _RenderSingleChildViewport#68fb4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
SingleChildScrollView
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderIgnorePointer#8b00a NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
SingleChildScrollView
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderSemanticsAnnotations#bb934 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
SingleChildScrollView
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderPointerListener#567d6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
SingleChildScrollView
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderSemanticsGestureHandler#2cb7d NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
SingleChildScrollView
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderPointerListener#d0a1b NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
SingleChildScrollView
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: _RenderScrollSemantics#49ecf NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
SingleChildScrollView
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderRepaintBoundary#f4b51 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
SingleChildScrollView
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderCustomPaint#dbee4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
SingleChildScrollView
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderRepaintBoundary#f5739 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
Container
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderPadding#00888 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
Container
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderDecoratedBox#f4a5e NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
Column
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderFlex#88b30 relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
Row
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderFlex#96dde relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
Scaffold
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderDecoratedBox#f4a5e
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
Container
════════════════════════════════════════════════════════════════════════════════
D/EGL_emulation( 7980): app_time_stats: avg=85030.66ms min=85030.66ms max=85030.66ms count=1
```
3. Flag in `SvgPicture` with `BoxFit.contain` doesn't throw exception, but behaves in unexpected manner: 
![image](https://user-images.githubusercontent.com/5578017/188745111-238c4ffa-d614-47a5-95ef-4165ceb83190.png)

Image files are attached here: [flags.zip](https://github.com/dnfield/flutter_svg/files/9501020/flags.zip)



---
Comment by @hit-flutter on Jan 11, 2024
Same issue here! Any update on this?

---
Comment by @Abdelazeem777 on Mar 7, 2024
Same Here as well!

---
Comment by @fullflash on Mar 13, 2024
same here. looks like tries to render before it is loaded properly.

---
Comment by @fullflash on Mar 13, 2024
my workaround for Assertion error width>0 is wrapping with container and provide minWidth via constraints property

```
return Container(
      constraints: BoxConstraints(minWidth: 20),
      child: buildAsset(context),
    );
```