How to use Expanded in stepper when using columns

Issue

Here is a relatable stack overflow question .

Flutter : Step widget can not hold Expanded

If one reads the comments @derek-lakin, concludes that one should use a column inside a stepper, as stepper is scrollable. I am doing the exact same thing, however i face an issue that column makes the Text widget to take only the required space, and not the entire screen width. I can notice this if i wrap the Text widget with a Material widget and apply elevation or color.

I tried to wrap Expanded widget around my Column of widgets to fix this. However, i get render errors.

Can someone let me know, how can I build a stepper, with a step that consists of hierarchy as Expanded(Column(children:List[Widgets])).

I am able to build a stepper using only column, but i was thinking of using expanded to correct the inappropriate sizing issues in column

stepWidget = Expanded(
      child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: widgets, //List of my widgets
  ));

This gives the following error:

    I/flutter (19635): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (19635): The following assertion was thrown building NotificationListener<KeepAliveNotification>:
I/flutter (19635): Incorrect use of ParentDataWidget.
I/flutter (19635): Expanded widgets must be placed directly inside Flex widgets.
I/flutter (19635): Expanded(no depth, flex: 2, dirty) has a Flex ancestor, but there are other widgets between them:
I/flutter (19635): - RepaintBoundary-[<0>]
I/flutter (19635): - IndexedSemantics(index: 0)
I/flutter (19635): - KeepAlive(keepAlive: false)
I/flutter (19635): - SliverList(delegate: SliverChildListDelegate#de272(estimated child count: 1))
I/flutter (19635): - SliverPadding(padding: EdgeInsets.zero)
I/flutter (19635): - ShrinkWrappingViewport(axisDirection: down, offset: ScrollPositionWithSingleContext#83fdf(offset:
I/flutter (19635):   0.0, range: null..null, viewport: null, ScrollableState, ClampingScrollPhysics,
I/flutter (19635):   IdleScrollActivity#b00f3, ScrollDirection.idle))
I/flutter (19635): - IgnorePointer-[GlobalKey#88af5](ignoring: false, ignoringSemantics: false)
I/flutter (19635): - Semantics(container: false, properties: SemanticsProperties, label: null, value: null, hint: null,
I/flutter (19635):   hintOverrides: null)
I/flutter (19635): - Listener(listeners: [down], behavior: opaque)
I/flutter (19635): - _GestureSemantics
I/flutter (19635): - _ScrollSemantics-[GlobalKey#81c78]
I/flutter (19635): - RepaintBoundary
I/flutter (19635): - CustomPaint
I/flutter (19635): - RepaintBoundary
I/flutter (19635): - Expanded(flex: 1) (this is a different Expanded than the one with the problem)
I/flutter (19635): These widgets cannot come between a Expanded and its Flex.
I/flutter (19635): The ownership chain for the parent of the offending Expanded was:
I/flutter (19635):   RepaintBoundary-[<0>] ← IndexedSemantics ← NotificationListener<KeepAliveNotification> ← KeepAlive
I/flutter (19635):   ← AutomaticKeepAlive ← SliverList ← MediaQuery ← SliverPadding ← ShrinkWrappingViewport ←
I/flutter (19635):   _ScrollableScope ← ⋯
I/flutter (19635): 
I/flutter (19635): When the exception was thrown, this was the stack:
I/flutter (19635): #0      ParentDataElement.mount.<anonymous closure> (package:flutter/src/widgets/framework.dart:4015:7)
I/flutter (19635): #1      ParentDataElement.mount (package:flutter/src/widgets/framework.dart:4024:6)
I/flutter (19635): #2      Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14)
I/flutter (19635): #3      Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12)
I/flutter (19635): #4      SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4838:14)
I/flutter (19635): #5      Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14)
I/flutter (19635): #6      Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12)
I/flutter (19635): #7      SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4838:14)
I/flutter (19635): #8      Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14)
I/flutter (19635): #9      Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12)
I/flutter (19635): #10     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3710:16)
I/flutter (19635): #11     Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5)
I/flutter (19635): #12     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3679:5)
I/flutter (19635): #13     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3674:5)
I/flutter (19635): #14     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14)
I/flutter (19635): #15     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12)
I/flutter (19635): #16     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3710:16)
I/flutter (19635): #17     Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5)
I/flutter (19635): #18     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3679:5)
I/flutter (19635): #19     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3674:5)
I/flutter (19635): #20     ParentDataElement.mount (package:flutter/src/widgets/framework.dart:4025:11)
I/flutter (19635): #21     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14)
I/flutter (19635): #22     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12)
I/flutter (19635): #23     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3710:16)
I/flutter (19635): #24     Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5)
I/flutter (19635): #25     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3679:5)
I/flutter (19635): #26     StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3826:11)
I/flutter (19635): #27     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3674:5)
I/flutter (19635): #28     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14)
I/flutter (19635): #29     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12)
I/flutter (19635): #30     SliverMultiBoxAdaptorElement.updateChild (package:flutter/src/widgets/sliver.dart:1012:36)
I/flutter (19635): #31     SliverMultiBoxAdaptorElement.createChild.<anonymous closure> (package:flutter/src/widgets/sliver.dart:997:20)
I/flutter (19635): #32     BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2266:19)
I/flutter (19635): #33     SliverMultiBoxAdaptorElement.createChild (package:flutter/src/widgets/sliver.dart:990:11)
I/flutter (19635): #34     RenderSliverMultiBoxAdaptor._createOrObtainChild.<anonymous closure> (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:256:23)
I/flutter (19635): #35     RenderObject.invokeLayoutCallback.<anonymous closure> (package:flutter/src/rendering/object.dart:1730:58)
I/flutter (19635): #36     PipelineOwner._enableMutationsToDirtySubtrees (package:flutter/src/rendering/object.dart:799:15)
I/flutter (19635): #37     RenderObject.invokeLayoutCallback (package:flutter/src/rendering/object.dart:1730:13)
I/flutter (19635): #38     RenderSliverMultiBoxAdaptor._createOrObtainChild (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:245:5)
I/flutter (19635): #39     RenderSliverMultiBoxAdaptor.addInitialChild (package:flutter/src/rendering/sliver_multi_box_adaptor.dart:323:5)
I/flutter (19635): #40     RenderSliverList.performLayout (package:flutter/src/rendering/sliver_list.dart:78:12)
I/flutter (19635): #41     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (19635): #42     RenderSliverPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:182:11)
I/flutter (19635): #43     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (19635): #44     RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:405:13)
I/flutter (19635): #45     RenderShrinkWrappingViewport._attemptLayout (package:flutter/src/rendering/viewport.dart:1645:12)
I/flutter (19635): #46     RenderShrinkWrappingViewport.performLayout (package:flutter/src/rendering/viewport.dart:1608:20)
I/flutter (19635): #47     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (19635): #48     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (19635): #49     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (19635): #50     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (19635): #51     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (19635): #52     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (19635): #53     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (19635): #54     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (19635): #55     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (19635): #56     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (19635): #57     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (19635): #58     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (19635): #59     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (19635): #60     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (19635): #61     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (19635): #62     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter (19635): #63     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (19635): #64     RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:798:17)
I/flutter (19635): #65     RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter (19635): #66     MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:142:11)
I/flutter (19635): #67     _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:339:7)
I/flutter (19635): #68     MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:212:7)
I/flutter (19635): #69     RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:356:14)
I/flutter (19635): #70     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1509:7)
I/flutter (19635): #71     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:768:18)
I/flutter (19635): #72     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:281:19)
I/flutter (19635): #73     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:677:13)
I/flutter (19635): #74     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:219:5)
I/flutter (19635): #75     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15)
I/flutter (19635): #76     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9)
I/flutter (19635): #77     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:842:5)
I/flutter (19635): #78     _invoke (dart:ui/hooks.dart:151:13)
I/flutter (19635): #79     _drawFrame (dart:ui/hooks.dart:140:3)
I/flutter (19635): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter (19635): Another exception was thrown: 'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed assertion: line 217 pos 16: 'indexOf(child) > index': is not true.
I/flutter (19635): Another exception was thrown: 'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed assertion: line 217 pos 16: 'indexOf(child) > index': is not true.
I/flutter (19635): Another exception was thrown: 'package:flutter/src/widgets/framework.dart': Failed assertion: line 2270 pos 20: '_debugCurrentBuildTarget == context': is not true.
I/flutter (19635): Another exception was thrown: NoSuchMethodError: The getter 'scrollOffsetCorrection' was called on null.
I/flutter (19635): Another exception was thrown: NoSuchMethodError: The method 'debugAssertIsValid' was called on null.
I/flutter (19635): Another exception was thrown: RenderBox was not laid out: RenderShrinkWrappingViewport#44117 relayoutBoundary=up10 NEEDS-PAINT
I/flutter (19635): Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#7c8dd relayoutBoundary=up9 NEEDS-PAINT
I/flutter (19635): Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#f736b relayoutBoundary=up8 NEEDS-PAINT
I/flutter (19635): Another exception was thrown: RenderBox was not laid out: RenderPointerListener#3760f relayoutBoundary=up7 NEEDS-PAINT
I/flutter (19635): Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#860e2 relayoutBoundary=up6 NEEDS-PAINT
I/flutter (19635): Another exception was thrown: RenderBox was not laid out: _RenderScrollSemantics#b1734 relayoutBoundary=up5 NEEDS-PAINT
I/flutter (19635): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#d9292 relayoutBoundary=up4 NEEDS-PAINT
I/flutter (19635): Another exception was thrown: RenderBox was not laid out: RenderCustomPaint#44461 relayoutBoundary=up3 NEEDS-PAINT
I/flutter (19635): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#4425c relayoutBoundary=up2 NEEDS-PAINT
I/flutter (19635): Another exception was thrown: RenderBox was not laid out: RenderFlex#e5d03 relayoutBoundary=up1 NEEDS-PAINT
I/flutter (19635): Another exception was thrown: NoSuchMethodError: The method '<=' was called on null.

Solution

As per the error: Expanded widgets must be placed directly inside Flex widgets.

Why?
As per docs:

An Expanded widget must be a descendant of a Row, Column, or Flex, and the path from the Expanded widget to its enclosing Row, Column, or Flex must contain only StatelessWidgets or StatefulWidgets (not other kinds of widgets, like RenderObjectWidgets).

You can place Expanded widget inside Column and put that Column inside your Step widget, but you can not place Expanded directly inside your Step widget’s content.

I’ll update my answer once you’ll provide the full code to provide you with the solution.

Till then, here’s what you can do.

Container(
    width: double.infinity, //To make it use as much space as it wants
    height: whateverHeightYouWantTo,
    child: Column(
        children: <Widget>[
       Expanded(child: Widget()) //You'll probably won't need Expanded by now.
    ]
 )
)

Answered By – Daksh Gargas

Answer Checked By – Katrina (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.