Hero animation producing RenderBox overflow

Question

I am using the Hero component to create an animation between two pages. The Hero component is used to wrap an Image widget (no problem) and a Container widget (problematic).

The following overflow error is thrown:

 ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞════════════════════════════════════════
I/flutter ( 4256): The following message was thrown during layout:
I/flutter ( 4256): A RenderFlex overflowed by 104 pixels on the right.

First page

Positioned(
  width: MediaQuery.of(context).size.width * 0.7,
  height: MediaQuery.of(context).size.height * 0.45,
  top: 160.0,
  left: MediaQuery.of(context).size.width * 0.04,
  child: Hero(
     tag: i.id, 
     child: Container( ...)
  )
)  

Second page

Hero(
  tag: this.i.departure,
  child: Container(
     margin: EdgeInsets.only(top: MediaQuery.of(context).size.height * 0.25),
     height: MediaQuery.of(context).size.height,
     decoration: cardDecoration,
   ),
 ),

Answer 1

The reason for this is not the Container widget itself, it is the content.
The GIF you shared clearly shows that the Text inside it is not rendered as usual but overly large. This is caused by a missing Material ancestor, which would contain the necessary InheritedWidget's to render the Text properly (it is missing because Hero places the child you supply in the Overlay and there it does not inherit a Material from your Scaffold).

Hence, you need to add a Material widget to fix your issue.

Hero(
  tag: tag,
  child: Material(
    type: MaterialType.transparency,
    child: .. // in your cause `Container(..)`
  ),
)

I supplied MaterialType.transparency to prevent it from affecting the underlying UI.

Answer 2

I found this issue on Github, so I added this property to the Hero Widget:

flightShuttleBuilder: (BuildContext flightContext,
                                Animation<double> animation,
                                HeroFlightDirection flightDirection,
                                BuildContext fromHeroContext,
                                BuildContext toHeroContext,){

                              return SingleChildScrollView(
                                child: fromHeroContext.widget,
                              );},

and the visual error disappeared. There is still an error that displays in the terminal :

I/flutter ( 8073): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 8073): The following assertion was thrown during performLayout():
I/flutter ( 8073): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter ( 8073): When a column is in a parent that does not provide a finite height constraint, for example if it is
I/flutter ( 8073): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
I/flutter ( 8073): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter ( 8073): space in the vertical direction.
I/flutter ( 8073): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
I/flutter ( 8073): cannot simultaneously expand to fit its parent.
I/flutter ( 8073): Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible
I/flutter ( 8073): children (using Flexible rather than Expanded). This will allow the flexible children to size
I/flutter ( 8073): themselves to less than the infinite remaining space they would otherwise be forced to take, and
I/flutter ( 8073): then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum
I/flutter ( 8073): constraints provided by the parent.
I/flutter ( 8073): The affected RenderFlex is:
I/flutter ( 8073):   RenderFlex#2944e relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 8073): The creator information is set to:
I/flutter ( 8073):   Column ← ContentTripTease ← DecoratedBox ← Container ← KeyedSubtree-[GlobalKey#338b3] ← Hero ←
I/flutter ( 8073):   _SingleChildViewport ← IgnorePointer-[GlobalKey#e8b80] ← Semantics ← Listener ← _GestureSemantics
I/flutter ( 8073):   ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#1b5ab] ← ⋯
I/flutter ( 8073): The nearest ancestor providing an unbounded width constraint is:
I/flutter ( 8073):   _RenderSingleChildViewport#43f3a NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 8073):   creator: _SingleChildViewport ← IgnorePointer-[GlobalKey#e8b80] ← Semantics ← Listener ←
I/flutter ( 8073):   _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#1b5ab] ←
I/flutter ( 8073):   Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#62cca] ← RepaintBoundary ← CustomPaint ←
I/flutter ( 8073):   RepaintBoundary ← ⋯
I/flutter ( 8073):   parentData: <none> (can use size)
I/flutter ( 8073):   constraints: BoxConstraints(w=258.8, h=341.4)
I/flutter ( 8073):   size: MISSING
I/flutter ( 8073): See also: https://flutter.dev/layout/
I/flutter ( 8073): If this message did not help you determine the problem, consider using debugDumpRenderTree():
I/flutter ( 8073):   https://flutter.dev/debugging/#rendering-layer
I/flutter ( 8073):   http://docs.flutter.io/flutter/rendering/debugDumpRenderTree.html
I/flutter ( 8073): If none of the above helps enough to fix this problem, please don't hesitate to file a bug:
I/flutter ( 8073):   https://github.com/flutter/flutter/issues/new?template=BUG.md
I/flutter ( 8073): 
I/flutter ( 8073): When the exception was thrown, this was the stack:
I/flutter ( 8073): #0      RenderFlex.performLayout.<anonymous closure> (package:flutter/src/rendering/flex.dart:690:11)
I/flutter ( 8073): #1      RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:711:10)
I/flutter ( 8073): #2      RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #3      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #4      RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #5      _RenderSingleChildViewport.performLayout (package:flutter/src/widgets/single_child_scroll_view.dart:497:13)
I/flutter ( 8073): #6      RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #7      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #8      RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #9      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #10     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #11     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #12     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #13     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #14     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #15     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #16     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #17     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #18     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #19     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #20     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #21     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #22     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #23     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #24     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #25     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #26     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #27     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #28     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #29     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
I/flutter ( 8073): #30     RenderObject.layout (package:flutter/src/rendering/object.dart:1644:7)
I/flutter ( 8073): #31     RenderStack.performLayout (package:flutter/src/rendering/stack.dart:549:15)
I/flutter ( 8073): #32     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1519:7)
I/flutter ( 8073): #33     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:766:18)
I/flutter ( 8073): #34     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:347:19)
I/flutter ( 8073): #35     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:701:13)
I/flutter ( 8073): #36     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:286:5)
I/flutter ( 8073): #37     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1012:15)
I/flutter ( 8073): #38     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:952:9)
I/flutter ( 8073): #39     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:864:5)
I/flutter ( 8073): #43     _invoke (dart:ui/hooks.dart:219:10)
I/flutter ( 8073): #44     _drawFrame (dart:ui/hooks.dart:178:3)
I/flutter ( 8073): (elided 3 frames from package dart:async)
I/flutter ( 8073):
I/flutter ( 8073): The following RenderObject was being processed when the exception was fired:
I/flutter ( 8073):   RenderFlex#2944e relayoutBoundary=up2 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 8073):   creator: Column ← ContentTripTease ← DecoratedBox ← Container ← KeyedSubtree-[GlobalKey#338b3] ←
I/flutter ( 8073):   Hero ← _SingleChildViewport ← IgnorePointer-[GlobalKey#e8b80] ← Semantics ← Listener ←
I/flutter ( 8073):   _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#1b5ab] ← ⋯
I/flutter ( 8073):   parentData: <none> (can use size)
I/flutter ( 8073):   constraints: BoxConstraints(w=258.8, 0.0<=h<=Infinity)
I/flutter ( 8073):   size: MISSING
I/flutter ( 8073):   direction: vertical
I/flutter ( 8073):   mainAxisAlignment: start
I/flutter ( 8073):   mainAxisSize: max
I/flutter ( 8073):   crossAxisAlignment: center
I/flutter ( 8073):   verticalDirection: down
I/flutter ( 8073): This RenderObject had the following descendants (showing up to depth 5):
I/flutter ( 8073):   RenderPadding#7266f relayoutBoundary=up3 NEEDS-PAINT
I/flutter ( 8073):     RenderFlex#36165 relayoutBoundary=up4 NEEDS-PAINT
I/flutter ( 8073):       RenderPadding#35f21 relayoutBoundary=up5 NEEDS-PAINT
I/flutter ( 8073):         RenderParagraph#a364d relayoutBoundary=up6 NEEDS-PAINT
I/flutter ( 8073):       RenderPadding#8a295 relayoutBoundary=up5 NEEDS-PAINT
I/flutter ( 8073):         RenderFlex#59634 relayoutBoundary=up6 NEEDS-PAINT
I/flutter ( 8073):           RenderPadding#2ff9e relayoutBoundary=up7 NEEDS-PAINT
I/flutter ( 8073):           RenderPadding#17df3 relayoutBoundary=up7 NEEDS-PAINT
I/flutter ( 8073):           RenderPadding#f9eb4 relayoutBoundary=up7 NEEDS-PAINT
I/flutter ( 8073):   RenderConstrainedBox#cf91c NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 8073):     RenderPadding#9142e NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 8073):       RenderSemanticsAnnotations#09e8c NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 8073):         _RenderInputPadding#a87c6 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 8073):           RenderConstrainedBox#07355 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 8073): ════════════════════════════════════════════════════════════════════════════════════════════════════

Is this error a big problem ?

Answer 3

For anyone who comes to this question, I have researched on Hero widget for tens of hours. I ended up finish this in this way.

Why getting the error

Hero widget will scale from the widget you click, to the widget you will navigate to. So in the process of transition, your widget will be constrained and cramed in a little box, which has a small size. And if you use a widget with fixed size, like MediaQuery.of(context).size.height * 0.25, which uses a device screen size. It's likely to get that error.

How to solve it

To solve it, make sure every children of the Hero that you are navigate to has a flex size. For example, wrap every child in a Row with a Expanded and use flex, which will divide into multiple part by flex number. Or use FractionallySizedBox.

Think twice when you use Hero.

Finally I found that Actually what I want to use is OpenContainer in a package called animations. Check it animations before using.