title: How to implement a SingleChildScrollView(with horizontal listview and vertical gridview) inside a TabBarView
body: <p>I want to have a widget that scrolls vertically with few items on them. At the top of it there should be a horizontal ListView, followed up with gridview. And all this is inside a <code>TabBarView</code>.</p>
  
  <p>I have tried wrapping the horizontal ListView and vertical gridview using <code>SingleChildScrollView</code> as suggested from other's StackOverflow question but it didn't work.</p>
  
  <pre><code>Widget build(BuildContext context) {
      List tabs = &lt;Tab&gt;[
        Tab(text: "Home"),
        Tab(text: "Store"),
        Tab(text: "Favourite")
      ];
  
      return DefaultTabController(
          length: 3,
          child: Scaffold(
              key: _scaffoldKey,
              drawer: drawerSidebar(),
              backgroundColor: Colors.grey[100],
              appBar: AppBar(
                actions: &lt;Widget&gt;[
                  IconButton(
                    icon: Icon(Icons.notifications),
                  ),
                  IconButton(
                    icon: Icon(Icons.message),
                  ),
                ],
                title: TextField(
                  controller: _filter,
                  decoration: new InputDecoration(
                      fillColor: Colors.white, filled: true, hintText: 'Search'),
                ),
                bottom: TabBar(
  
                  // indicatorSize: TabBarIndicatorSize.tab,
                  tabs: tabs,
                  controller: _tabController,
                ),
              ),
              body: TabBarView(
                children: &lt;Widget&gt;[
  SingleChildScrollView(
          child:
                 Column(
        mainAxisSize: MainAxisSize.max,
        children: &lt;Widget&gt;[
  
          Explore(),                            //horizontal listview
          Expanded(
            child: FreshFinds(),              //vertical gridview.builder
          ),
        ],
      )),
         PageTwo(),
                ],
     )));
    }
  </code></pre>
  
  <p>This is the error i get when using <code>SingleChildScrollView</code>:</p>
  
  <pre><code>I/flutter (18049): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
  I/flutter (18049): The following assertion was thrown during performLayout():
  I/flutter (18049): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
  I/flutter (18049): When a column is in a parent that does not provide a finite height constraint, for example if it is
  I/flutter (18049): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
  I/flutter (18049): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
  I/flutter (18049): space in the vertical direction.
  I/flutter (18049): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
  I/flutter (18049): cannot simultaneously expand to fit its parent.
  I/flutter (18049): Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible
  I/flutter (18049): children (using Flexible rather than Expanded). This will allow the flexible children to size
  I/flutter (18049): themselves to less than the infinite remaining space they would otherwise be forced to take, and
  I/flutter (18049): then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum
  I/flutter (18049): constraints provided by the parent.
  I/flutter (18049): The affected RenderFlex is:
  I/flutter (18049):   RenderFlex#46825 relayoutBoundary=up1 NEEDS-LAYOUT NEEDS-PAINT
  I/flutter (18049): The creator information is set to:
  I/flutter (18049):   Column ← _SingleChildViewport ← IgnorePointer-[GlobalKey#653c5] ← Semantics ← Listener ←
  I/flutter (18049):   _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey&lt;RawGestureDetectorState&gt;#61b8a] ←
  I/flutter (18049):   _ScrollableScope ← _ScrollSemantics-[GlobalKey#7275d] ← RepaintBoundary ← CustomPaint ←
  I/flutter (18049):   RepaintBoundary ← ⋯
  I/flutter (18049): The nearest ancestor providing an unbounded width constraint is:
  I/flutter (18049):   _RenderSingleChildViewport#72ad5 NEEDS-LAYOUT NEEDS-PAINT
  I/flutter (18049):   creator: _SingleChildViewport ← IgnorePointer-[GlobalKey#653c5] ← Semantics ← Listener ←
  I/flutter (18049):   _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey&lt;RawGestureDetectorState&gt;#61b8a] ←
  I/flutter (18049):   _ScrollableScope ← _ScrollSemantics-[GlobalKey#7275d] ← RepaintBoundary ← CustomPaint ←
  I/flutter (18049):   RepaintBoundary ← NotificationListener&lt;ScrollNotification&gt; ← ⋯
  I/flutter (18049):   parentData: &lt;none&gt; (can use size)
  I/flutter (18049):   constraints: BoxConstraints(w=454.7, h=680.4)
  I/flutter (18049):   size: MISSING
  I/flutter (18049): See also: https://flutter.io/layout/
  I/flutter (18049): If this message did not help you determine the problem, consider using debugDumpRenderTree():
  I/flutter (18049):   https://flutter.io/debugging/#rendering-layer
  I/flutter (18049):   http://docs.flutter.io/flutter/rendering/debugDumpRenderTree.html
  I/flutter (18049): If none of the above helps enough to fix this problem, please don't hesitate to file a bug:
  I/flutter (18049):   https://github.com/flutter/flutter/issues/new?template=BUG.md
  I/flutter (18049): 
  
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/zKFKH.gif" rel="nofollow noreferrer">My result without using SingleChildScrollView</a></p>
  
  <p><a href="https://i.stack.imgur.com/ldxyY.gif" rel="nofollow noreferrer">what I want</a></p>