centerSlice throws exception when scaling down #27827

Activity

1. zoechi commented on Feb 12, 2019

   

   zoechi

   on Feb 12, 2019

   Contributor

   More actions

   To investigate we would need a minimal runnable reproduction
   ideally published as a GitHub repo.
2. zoechi

   added

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on Feb 12, 2019
3. Herohtar commented on Feb 13, 2019

   

   Herohtar

   on Feb 13, 2019

   Last edited by Herohtar

   Author

   More actions

   @zoechi Sure. I didn't have time to put one together until this evening, but here you go: https://github.com/Herohtar/center_slice

   I've included a screenshot of the main window as well as the exception thrown by Flutter from this code. The higher resolution image is a different color to show that it is being picked up by Flutter as intended.

   As an additional note, you can get rid of the exception by setting the height to 79 or higher (the actual height of the higher-res image is 80). However, that makes it impossible to use resolution-aware images with centerSlice in cases where the desired dimensions are less than the auto-selected image.

   

   I/flutter ( 7544): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
   I/flutter ( 7544): The following assertion was thrown during paint():
   I/flutter ( 7544): centerSlice was used with a BoxFit that does not guarantee that the image is fully
   visible.
   I/flutter ( 7544): 'package:flutter/src/painting/decoration_image.dart': Failed assertion: line 406 pos 12: 'sourceSize
   I/flutter ( 7544): == inputSize'
   I/flutter ( 7544):
   I/flutter ( 7544): Either the assertion indicates an error in the framework itself, or we should provide substantially
   I/flutter ( 7544): more information in this error message to help you determine and fix the underlying cause.
   I/flutter ( 7544): In either case, please report this assertion by filing a bug on GitHub:
   I/flutter ( 7544):   https://github.com/flutter/flutter/issues/new?template=BUG.md
   I/flutter ( 7544):
   I/flutter ( 7544): When the exception was thrown, this was the stack:
   I/flutter ( 7544): #2      paintImage (package:flutter/src/painting/decoration_image.dart:406:12)
   I/flutter ( 7544): #3      RenderImage.paint (package:flutter/src/rendering/image.dart:357:5)
   I/flutter ( 7544): #4      RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2094:7)
   I/flutter ( 7544): #5      PaintingContext.paintChild (package:flutter/src/rendering/object.dart:173:13)
   I/flutter ( 7544): #6      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:122:15)
   I/flutter ( 7544): #7      RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2094:7)
   I/flutter ( 7544): #8      PaintingContext.paintChild (package:flutter/src/rendering/object.dart:173:13)
   I/flutter ( 7544): #9      _RenderFlex&RenderBox&ContainerRenderObjectMixin&RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2273:15)
   I/flutter ( 7544): #10     PaintingContext.pushClipRect.<anonymous closure> (package:flutter/src/rendering/object.dart:396:83)
   I/flutter ( 7544): #11     ClipContext._clipAndPaint (package:flutter/src/painting/clip.dart:29:12)
   I/flutter ( 7544): #12     ClipContext.clipRectAndPaint (package:flutter/src/painting/clip.dart:57:5)
   I/flutter ( 7544): #13     PaintingContext.pushClipRect (package:flutter/src/rendering/object.dart:396:7)
   I/flutter ( 7544): #14     RenderFlex.paint (package:flutter/src/rendering/flex.dart:940:13)
   I/flutter ( 7544): #15     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2094:7)
   I/flutter ( 7544): #16     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:173:13)
   I/flutter ( 7544): #17     RenderShiftedBox.paint (package:flutter/src/rendering/shifted_box.dart:70:15)
   I/flutter ( 7544): #18     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2094:7)
   I/flutter ( 7544): #19     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:173:13)
   I/flutter ( 7544): #20     _RenderCustomMultiChildLayoutBox&RenderBox&ContainerRenderObjectMixin&RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2273:15)
   I/flutter ( 7544): #21     RenderCustomMultiChildLayoutBox.paint (package:flutter/src/rendering/custom_layout.dart:361:5)
   I/flutter ( 7544): #22     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2094:7)
   I/flutter ( 7544): #23     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:173:13)
   I/flutter ( 7544): #24     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:122:15)
   I/flutter ( 7544): #25     _RenderInkFeatures.paint (package:flutter/src/material/material.dart:491:11)
   I/flutter ( 7544): #26     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2094:7)
   I/flutter ( 7544): #27     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:173:13)
   I/flutter ( 7544): #28     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:122:15)
   I/flutter ( 7544): #29     PaintingContext.pushLayer (package:flutter/src/rendering/object.dart:370:12)
   I/flutter ( 7544): #30     RenderPhysicalModel.paint (package:flutter/src/rendering/proxy_box.dart:1704:17)
   I/flutter ( 7544): #31     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2094:7)
   I/flutter ( 7544): #32     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:173:13)
   I/flutter ( 7544): #33     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:122:15)
   I/flutter ( 7544): #34     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2094:7)
   I/flutter ( 7544): #35     PaintingContext.paintChild (package:flutter/src/rendering/object.dart:173:13)
   I/flutter ( 7544): #36     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:122:15)
   I/flutter ( 7544): #37     RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2094:7)
   I/flutter ( 7544): #38     PaintingContext._repaintCompositedChild (package:flutter/src/rendering/object.dart:128:11)
   I/flutter ( 7544): #39     PaintingContext.repaintCompositedChild (package:flutter/src/rendering/object.dart:96:5)
   I/flutter ( 7544): #40     PipelineOwner.flushPaint (package:flutter/src/rendering/object.dart:855:29)I/flutter ( 7544): #41     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:283:19)
   I/flutter ( 7544): #42     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:686:13)
   I/flutter ( 7544): #43     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:219:5)
   I/flutter ( 7544): #44     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15)
   I/flutter ( 7544): #45     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9)
   I/flutter ( 7544): #46     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:842:5)
   I/flutter ( 7544): #47     _invoke (dart:ui/hooks.dart:159:13)
   I/flutter ( 7544): #48     _drawFrame (dart:ui/hooks.dart:148:3)
   I/flutter ( 7544): (elided 2 frames from class _AssertionError)
   I/flutter ( 7544):
   I/flutter ( 7544): The following RenderObject was being processed when the exception was fired:
   I/flutter ( 7544):   RenderImage#460e1 relayoutBoundary=up4
   I/flutter ( 7544):   creator: RawImage ← Semantics ← Image ← Column ← Center ← MediaQuery ←
   I/flutter ( 7544):   LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ←
   I/flutter ( 7544):   AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#7871d ink renderer] ← ⋯
   I/flutter ( 7544):   parentData: <none> (can use size)
   I/flutter ( 7544):   constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=Infinity)
   I/flutter ( 7544):   size: Size(300.0, 60.0)
   I/flutter ( 7544):   image: [80×80]
   I/flutter ( 7544):   width: 300.0
   I/flutter ( 7544):   height: 60.0
   I/flutter ( 7544):   scale: 2.0
   I/flutter ( 7544):   fit: fill
   I/flutter ( 7544):   alignment: center
   I/flutter ( 7544):   centerSlice: Rect.fromLTRB(19.0, 19.0, 21.0, 21.0)
   I/flutter ( 7544):   invertColors: false
   I/flutter ( 7544):   filterQuality: low
   I/flutter ( 7544): This RenderObject has no descendants.
   I/flutter ( 7544): ════════════════════════════════════════════════════════════════════════════════════════════════════
   

   👍React with 👍9Reacted by Luong Do Minh Hung, Günter Zöchbauer, 代码Gou, Serhiy Shkatulo, NikitaZhelonkin, Sebastian Roth, Aladdin, Evan Fang and Alexander Belokon
4. no-response

   removed

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on Feb 13, 2019
5. zoechi

   added

   c: crashStack traces logged to the consoleStack traces logged to the console

   frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.

   a: assetsPackaging, accessing, or using assetsPackaging, accessing, or using assets

   on Feb 13, 2019
6. zoechi

   added this to the GoalsThis milestone has been deleted milestone on Feb 13, 2019
7. Herohtar commented on Feb 19, 2019

   

   Herohtar

   on Feb 19, 2019

   Author

   More actions

   After looking into this a bit more, it seems this isn't really about resolution-aware images at all. The problem is that Flutter throws an error if either the destination height or width are less than the corresponding dimension in the source image and the centerSlice is proportionately small. For example, with the 40x40 source image, if I try to use centerSlice: Rect.fromLTRB(19, 19, 21, 21) with height: 30 it will fail. Alternatively, centerSlice: Rect.fromLTRB(5, 5, 35, 35) works fine with the same height (30).

   I believe the root of the problem is within this section of the image drawing function:

   flutter/packages/flutter/lib/src/painting/decoration_image.dart

   Lines 385 to 407 in 7aeb539

   	Size outputSize = rect.size;
   	Size inputSize = Size(image.width.toDouble(), image.height.toDouble());
   	Offset sliceBorder;
   	if (centerSlice != null) {
   	sliceBorder = Offset(
   	centerSlice.left + inputSize.width - centerSlice.right,
   	centerSlice.top + inputSize.height - centerSlice.bottom
   	);
   	outputSize -= sliceBorder;
   	inputSize -= sliceBorder;
   	}
   	fit ??= centerSlice == null ? BoxFit.scaleDown : BoxFit.fill;
   	assert(centerSlice == null || (fit != BoxFit.none && fit != BoxFit.cover));
   	final FittedSizes fittedSizes = applyBoxFit(fit, inputSize / scale, outputSize);
   	final Size sourceSize = fittedSizes.source * scale;
   	Size destinationSize = fittedSizes.destination;
   	if (centerSlice != null) {
   	outputSize += sliceBorder;
   	destinationSize += sliceBorder;
   	// We don't have the ability to draw a subset of the image at the same time
   	// as we apply a nine-patch stretch.
   	assert(sourceSize == inputSize, 'centerSlice was used with a BoxFit that does not guarantee that the image is fully visible.');
   	}

   Specifically, when centerSlice defines a very small center rectangle it will result in a large sliceBorder. Then, when any part of the outputSize is smaller than the inputSize, the following outputSize -= sliceBorder will result in some negative values, which are then fed into applyBoxFit, which immediately spits out all zeros for both source and destination. Obviously, since zero doesn't match the initial input size, the assert fails.

   This problem seems to come from the (mistaken) idea that the corners of centerSlice'd images are never scaled, as the comments state that the corner pieces are drawn without scaling; however, the documentation for the underlying drawImageNine function indicates that scaling down is a potential valid behavior:

   Corners are unmodified or scaled down proportionately if their sides are larger than dst. center and four sides are scaled to fit remaining space, if any.

   I'm not entirely certain how this needs to be modified, but it seems it needs to allow for scaling down when using centerSlice, and also will need to take the scale into account so that resolution-aware images are handled properly, as I believe there is still an issue with that.

   👍React with 👍2Reacted by Dan Field and Sundin
8. Herohtar

   changed the title [-]centerSlice throws exception when using resolution-aware images[/-] [+]centerSlice throws exception when scaling down[/+] on Feb 19, 2019
9. welstone commented on May 21, 2019

   

   welstone

   on May 21, 2019

   Last edited by welstone

   More actions

   I found the problem too; As we can see, centerSlice's unit is 'px', but outputSize's unit is 'dp'; How do you think if we re-calculate the centerSlice according to 'scale', and pass new value of centerSlice to canvas;

   👍React with 👍2Reacted by Aladdin and wowsershan
10. welstone commented on May 21, 2019

    

    welstone

    on May 21, 2019

    Last edited by iapicca

    More actions

    Or can we just remove such codes:

      if (centerSlice != null) {
        sliceBorder = Offset(
          centerSlice.left + inputSize.width - centerSlice.right,
          centerSlice.top + inputSize.height - centerSlice.bottom,
        );
    
    ### outputSize -= sliceBorder;
    ### inputSize -= sliceBorder;
    
      }

    As mentioned in the issue:
    #20013

    I also made the same test, if sliceBorder related codes were removed, all works fine

    👍React with 👍1Reacted by Sundin
11. welstone commented on May 21, 2019

    

    welstone

    on May 21, 2019

    More actions

    Furthermore, On line: 393
    https://github.com/flutter/flutter/blob/beta/packages/flutter/lib/src/painting/decoration_image.dart
    outputSize was reduced by sliceBorder;
    but on line :402 , outputSize was restored again, with nothing changed

    After 'applyBoxFit(fit, inputSize / scale, outputSize)' , destinationSize == outputSize and sourceSize == inputSize because 'fit == BoxFit.fill'

    After line 407, destinationSize was restored to 'rect.size' again (line: 385)
    So I think, line 393, 394, 402,403, 406 are useless, and we should remove all of them;

    Forget about my poor English :)
12. goderbauer commented on Mar 18, 2020

    

    goderbauer

    on Mar 18, 2020

    Member

    More actions

    /cc @dnfield FYI for image related stuff.
13. goderbauer

    added

    a: imagesLoading, displaying, rendering imagesLoading, displaying, rendering images

    on Mar 18, 2020
14. 19 remaining items

    Load more

15. Stumblinbear commented on Jul 31, 2025

    

    Stumblinbear

    on Jul 31, 2025 · Hidden as off-topic

    show commentMore actions
16. Sundin commented on Aug 4, 2025

    

    Sundin

    on Aug 4, 2025 · Hidden as off-topic

    show commentMore actions
17. shang1219178163 commented on Apr 20, 2026

    

    shang1219178163

    on Apr 20, 2026

    Last edited by shang1219178163

    More actions

    I'm not sure if it solves everyone's problem, but my code works fine.

     DecorationImage(
      image: AssetImage(imagePath),
      centerSlice: centerSlice,
      scale: 3, // key，default 1.0
    ),
    
18. gabrimatic

    added 6 commits that reference this issue on Apr 29, 2026

    Avoid centerSlice assertion failure under floating-point rounding

    ...

    952e842

    Avoid centerSlice assertion failure under floating-point rounding

    ...

    2b908bc

    Avoid centerSlice assertion failure under floating-point rounding

    ...

    fdb7550

    Avoid centerSlice assertion failure under floating-point rounding

    ...

    47c5825

    Avoid centerSlice assertion failure under floating-point rounding

    ...

    a2a60cd

    Avoid centerSlice assertion failure under floating-point rounding

    ...

    10034bf
19. justinmc

    added a commit that references this issue on Aug 24, 2026

    Avoid centerSlice assertion failure under floating-point rounding

    ...

    e02855e
20. Renzo-Olivares

    added a commit that references this issue on Aug 25, 2026

    Avoid centerSlice assertion failure under floating-point rounding

    ...

    da30eec
21. auto-submit

    closed this as completedin #185789on Aug 26, 2026
22. pull

    added a commit that references this issue on Aug 26, 2026

    Tolerate floating-point rounding in paintImage centerSlice assertion (f…

    ...

    This issue will close once commit e6aa89e is merged into the 'master' branch.

    e6aa89e
23. github-actions commented on Sep 9, 2026

    

    github-actionsbot

    on Sep 9, 2026 – with GitHub Actions

    More actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.
24. github-actions

    locked as resolved and limited conversation to collaborators on Sep 9, 2026