The following assertion was thrown during performResize(): Horizontal viewport was given unbounded height

Issue

I am having Flutter Stepper and i am trying to have a TabBar with TabBarView in one of the steps but i am getting below error

======== Exception caught by rendering library =====================================================
The following assertion was thrown during performResize():
Horizontal viewport was given unbounded height.

Viewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of vertical space in which to expand.
The relevant error-causing widget was: 
  TabBarView TabBarView:file:///C:/Users/Suswa/AndroidStudioProjects/tab_bar_inside_stepper_app/lib/screens/my_page.dart:523:29
When the exception was thrown, this was the stack: 
#0      RenderViewport.computeDryLayout.<anonymous closure> (package:flutter/src/rendering/viewport.dart:1424:15)
#1      RenderViewport.computeDryLayout (package:flutter/src/rendering/viewport.dart:1436:6)
#2      RenderBox.performResize (package:flutter/src/rendering/box.dart:2384:12)
#3      RenderObject.layout (package:flutter/src/rendering/object.dart:1866:9)
#4      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#5      RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#6      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#7      RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#8      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#9      RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#10     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#11     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#12     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#13     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#14     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#15     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#16     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#17     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#18     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#19     RenderCustomPaint.performLayout (package:flutter/src/rendering/custom_paint.dart:545:11)
#20     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#21     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#22     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#23     ChildLayoutHelper.layoutChild (package:flutter/src/rendering/layout_helper.dart:56:11)
#24     RenderFlex._computeSizes (package:flutter/src/rendering/flex.dart:896:45)
#25     RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:931:32)
#26     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#27     ChildLayoutHelper.layoutChild (package:flutter/src/rendering/layout_helper.dart:56:11)
#28     RenderFlex._computeSizes (package:flutter/src/rendering/flex.dart:829:43)
#29     RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:931:32)
#30     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#31     RenderPadding.performLayout (package:flutter/src/rendering/shifted_box.dart:233:12)
#32     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#33     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#34     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#35     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#36     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#37     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#38     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#39     RenderStack.layoutPositionedChild (package:flutter/src/rendering/stack.dart:497:11)
#40     RenderStack.performLayout (package:flutter/src/rendering/stack.dart:610:30)
#41     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#42     RenderAnimatedSize.performLayout (package:flutter/src/rendering/animated_size.dart:200:12)
#43     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#44     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#45     _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1376:11)
#46     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#47     ChildLayoutHelper.layoutChild (package:flutter/src/rendering/layout_helper.dart:56:11)
#48     RenderStack._computeSize (package:flutter/src/rendering/stack.dart:570:43)
#49     RenderStack.performLayout (package:flutter/src/rendering/stack.dart:597:12)
#50     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#51     ChildLayoutHelper.layoutChild (package:flutter/src/rendering/layout_helper.dart:56:11)
#52     RenderFlex._computeSizes (package:flutter/src/rendering/flex.dart:829:43)
#53     RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:931:32)
#54     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#55     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#56     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#57     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#58     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#59     RenderSliverMultiBoxAdaptor.insertAndLayoutChild (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:487:13)
#60     RenderSliverList.performLayout.advance (package:flutter/src/rendering/sliver_list.dart:239:19)
#61     RenderSliverList.performLayout (package:flutter/src/rendering/sliver_list.dart:281:12)
#62     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#63     RenderSliverEdgeInsetsPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:137:12)
#64     RenderSliverPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:371:11)
#65     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#66     RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:510:13)
#67     RenderShrinkWrappingViewport._attemptLayout (package:flutter/src/rendering/viewport.dart:1938:12)
#68     RenderShrinkWrappingViewport.performLayout (package:flutter/src/rendering/viewport.dart:1884:20)
#69     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#70     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#71     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#72     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#73     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#74     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#75     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#76     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#77     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#78     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#79     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#80     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#81     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#82     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#83     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#84     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#85     RenderCustomPaint.performLayout (package:flutter/src/rendering/custom_paint.dart:545:11)
#86     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#87     RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#88     RenderObject.layout (package:flutter/src/rendering/object.dart:1887:7)
#89     ChildLayoutHelper.layoutChild (package:flutter/src/rendering/layout_helper.dart:56:11)
#90     RenderFlex._computeSizes (package:flutter/src/rendering/flex.dart:896:45)
#91     RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:931:32)
#92     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1731:7)
#93     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:887:18)
#94     RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:497:19)
#95     WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:883:13)
#96     RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:363:5)
#97     SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1144:15)
#98     SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1081:9)
#99     SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:995:5)
#103    _invoke (dart:ui/hooks.dart:151:10)
#104    PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:308:5)
#105    _drawFrame (dart:ui/hooks.dart:115:31)
(elided 3 frames from dart:async)
The following RenderObject was being processed when the exception was fired: RenderViewport#5374e NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...  needs compositing
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(0.0<=w<=276.0, 0.0<=h<=Infinity)
...  size: MISSING
...  axisDirection: right
...  crossAxisDirection: down
...  offset: _PagePosition#86265(range: null..null, viewport: null, ScrollableState, _ForceImplicitScrollPhysics -> PageScrollPhysics -> PageScrollPhysics -> ClampingScrollPhysics -> ClampingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#16092, ScrollDirection.idle)
...  anchor: 0.0
RenderObject: RenderViewport#5374e NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  needs compositing
  parentData: <none> (can use size)
  constraints: BoxConstraints(0.0<=w<=276.0, 0.0<=h<=Infinity)
  size: MISSING
  axisDirection: right
  crossAxisDirection: down
  offset: _PagePosition#86265(range: null..null, viewport: null, ScrollableState, _ForceImplicitScrollPhysics -> PageScrollPhysics -> PageScrollPhysics -> ClampingScrollPhysics -> ClampingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#16092, ScrollDirection.idle)
  anchor: 0.0
...  center child: _RenderSliverFractionalPadding#97a78 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: paintOffset=Offset(0.0, 0.0)
...    constraints: MISSING
...    geometry: null
...    child: RenderSliverFillViewport#34db1 NEEDS-LAYOUT NEEDS-PAINT
...      parentData: paintOffset=Offset(0.0, 0.0)
...      constraints: MISSING
...      geometry: null
...      no children current live
====================================================================================================

Below is how my code looks like for calling the tabs

initTabsStep() =>
      DefaultTabController(
        length: 2,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: const [
            Flexible(child: TabBar(
              unselectedLabelColor: Colors.black,
              labelColor: Colors.orange,
              tabs: [
                Tab(child: Text("This is Tab 1"),icon: Icon(Icons.account_box_outlined),),
                Tab(child: Text("This is Tab 2"), icon: Icon(Icons.beach_access),),
              ],
            )),
            Flexible(child: TabBarView(
              children: [
                Text("You have selected tab 1"),
                Text("You have selected tab 2")
              ],
            ))
          ],
        ),
      );

Below is how i am calling my initTabsStep in my Step in Stepper


 Step(
          title: const Text("STEP 2 CONTENT WITH TAB"),
          content: initTabsStep(),
          isActive: currentStep >= 1,
          state: currentStep == 1
              ? stepStateList[1]
              : currentStep > 1
              ? stepStateList[2]
              : stepStateList[0]),

I have tried wrapping DefaultTabController in Column but its still not working

Solution

Please change you Widget layout Column to ListView or Wrap your ParentWidget with SizedBox and give mediaQuery height and width

Answered By – Sneha G Sneha

Answer Checked By – Candace Johnson (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.