title: GridView inside a Listview causing "Vertical viewport was given unbounded height" even when Expanded
body: <p>I'm still new to Flutter, and trying to create the following layout:</p>
  
  <p><a href="https://i.stack.imgur.com/kLZN3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/kLZN3.png" alt="eLayout Of What I&#39;m trying to achieve"></a></p>
  
  <p>I've split my layout into 3 main components:</p>
  
  <ol>
  <li>The Title widget (the one with "Title Here")</li>
  <li>The Info Text widget (the one with the Icon and "Info Goes Here"
  text)</li>
  <li>The GridView containing the buttons &lt;--- This one is causing the problem</li>
  </ol>
  
  <p>Here is my Main.dart:</p>
  
  <pre><code>import 'package:flutter/material.dart';
  import 'package:ifp_poc/Screens/Home.dart';
  import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
  
  void main() {
  //  debugPaintSizeEnabled = true;
    runApp(new MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        theme: new ThemeData(
          brightness: Brightness.light,
          primaryColor: Colors.blue,
          primaryColorLight: Colors.white,
          primaryColorDark: Colors.black,
          platform: Theme.of(context).platform,
        ),
        title: "POC",
        home: new Home(),
      );
    }
  }
  </code></pre>
  
  <p>Here is my Home Class:</p>
  
  <pre><code>import 'package:flutter/material.dart';
  import 'package:ifp_poc/Components/ifp/listBoxHQ.dart';
  import 'package:ifp_poc/Components/ifp/infoHQ.dart';
  import 'package:ifp_poc/Components/ifp/titleHQ.dart';
  
  class Home extends StatefulWidget {
    @override
    _HomeState createState() =&gt; _HomeState();
  }
  
  class _HomeState extends State&lt;Home&gt; {
    @override
    Widget build(BuildContext context) {
  
      return Scaffold(
        body: new Column(
          mainAxisSize: MainAxisSize.min,
          children: &lt;Widget&gt;[
            new TitleHQ(
              logoAsset: "assets/images/HQ-LOGO.png",
              title: "Hospitality Qatar",
              subTitle: "06-08 Nov 2018",
              info: "3:00 PM - 9:00 PM",
              url: "http://www.ifpexpo.com",
            ),
            new Container(
              padding: EdgeInsets.only(top: 15.0, left: 26.0, right: 26.0),
              child: new Column(
                mainAxisSize: MainAxisSize.min,
                children: &lt;Widget&gt;[
                  new InfoHQ(text: "Qatar's Premiere International Hospitlaity &amp; Horeca Trade Show",),
                  new Divider(height: 20.0, color: Theme.of(context).primaryColorDark,),
                  new InfoHQ(text: "Doha Exhibition &amp; Convention Centre (DECC)",icon: Icons.location_on,),
                  new Divider(height: 20.0, color: Theme.of(context).primaryColorDark,),
                  new ListBoxHQ()
                ],
              ),
            )
  
          ],
        ),
      );
    }
  }
  </code></pre>
  
  <p>Here is my listBoxHQ() Class:</p>
  
  <pre><code>import 'package:flutter/material.dart';
  import 'package:ifp_poc/Components/ifp/boxHQ.dart';
  
  class ListBoxHQ extends StatefulWidget {
    @override
    _ListBoxHQState createState() =&gt; _ListBoxHQState();
  }
  
  class _ListBoxHQState extends State&lt;ListBoxHQ&gt; {
    @override
    Widget build(BuildContext context) {
  
      return GridView.count(
            primary: false,
            crossAxisSpacing: 5.0,
            crossAxisCount: 3,
            children: &lt;Widget&gt;[
              BoxHQ(
                height: 100.0,
                text: "Overview",
                icon: Icons.ac_unit,
              ),
              BoxHQ(
                height: 100.0,
                text: "Overview",
                icon: Icons.ac_unit,
              ),
              BoxHQ(
                height: 100.0,
                text: "Overview",
                icon: Icons.ac_unit,
              ),
            ]
        );
    }
  }
  </code></pre>
  
  <p>And Finally my BoxHQ Class:</p>
  
  <pre><code>import 'package:flutter/material.dart';
  
  class BoxHQ extends StatefulWidget {
    final double height;
    final IconData icon;
    final String text;
  
    BoxHQ({Key key, @required this.height, @required this.icon, @required this.text}): super(key: key);
  
    @override
    _BoxHQState createState() =&gt; _BoxHQState();
  }
  
  class _BoxHQState extends State&lt;BoxHQ&gt; {
    @override
    Widget build(BuildContext context) {
      return Container(
        height: widget.height,
        width: double.infinity,
        padding: EdgeInsets.all(5.0),
        margin: EdgeInsets.all(7.0),
        decoration:  new BoxDecoration(
          borderRadius: new BorderRadius.all(const Radius.circular(10.0)),
          color: Colors.red,
        ),
        child: Column( // Replace with a Row for horizontal icon + text
          children: &lt;Widget&gt;[
            Icon(widget.icon == null? Icons.info : widget.icon, color: Theme.of(context).primaryColorLight, size: 50.0,),
            new Padding(padding: EdgeInsets.symmetric(vertical: 5.0)),
            Text(widget.text, style: new TextStyle(color: Theme.of(context).primaryColorLight, fontSize: 20.0),),
          ],
        ),
      );
    }
  }
  </code></pre>
  
  <p><strong>The Problem (TLDR) :</strong></p>
  
  <p>When running the above code, I get the following error:</p>
  
  <pre><code>I/Choreographer( 6979): Skipped 35 frames!  The application may be doing too much work on its main thread.
  D/EGL_emulation( 6979): eglMakeCurrent: 0xa6cac080: ver 2 0 (tinfo 0x970aa0c0)
  I/flutter ( 6979): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
  I/flutter ( 6979): The following assertion was thrown during performResize():
  I/flutter ( 6979): Vertical viewport was given unbounded height.
  I/flutter ( 6979): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
  I/flutter ( 6979): viewport was given an unlimited amount of vertical space in which to expand. This situation
  I/flutter ( 6979): typically happens when a scrollable widget is nested inside another scrollable widget.
  I/flutter ( 6979): If this widget is always nested in a scrollable widget there is no need to use a viewport because
  I/flutter ( 6979): there will always be enough vertical space for the children. In this case, consider using a Column
  I/flutter ( 6979): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
  I/flutter ( 6979): the height of the viewport to the sum of the heights of its children.
  </code></pre>
  
  <p><strong>Things I've tried and did not work:</strong></p>
  
  <ul>
  <li>Adding <em>GridView.count</em> from <em>listBoxHQ</em> class inside an Expanded</li>
  <li>Adding every item of the Container from Home inside an Expanded</li>
  <li>Adding every child of the main column of Home inside an Expanded</li>
  </ul>
  
  <p>It worked only when I wrapped the GridView.count of listBoxHQ with a SizedBox and fixed height. <strong>But I can't do that as my buttons are dynamic and I don't know the number of buttons that I might have.</strong></p>
  
  <p>I can't thank you enough for reading through everything, and I will be very grateful if you could share your knowledge with me and help me fix this issue. </p>
  
  <p>Thanks a lot, for real!</p>