title: Flutter scrollable body with horizontal list and grid as children
body: <p>I'm having a hard time understanding how to best create a scrollable container for the body that holds inside children that by default are scrollable as well.</p>
  
  <p>In this case the grid shouldn't scroll but it's the entire page that should scroll so you are able to see more of the elements inside the grid. So basically the whole content should move vertically with the addition of the ListView moving horizontally (but that works fine already)</p>
  
  <p>I had it working but it was using a bunch of "silver" widget, and I'm hoping there's a better solution that works without using all those extra widgets.</p>
  
  <p>Thanks</p>
  
  <p>Here's my code so far:</p>
  
  <pre><code>class GenresAndMoodsPage extends AbstractPage {
    @override
    String getTitle() =&gt; 'Genres &amp; Moods';
  
    @override
    int getPageBottomBarIndex() =&gt; BottomBarItems.Browse.index;
  
    static const kListHeight = 150.0;
  
    Widget _buildHorizontalList() =&gt; SizedBox(
          height: kListHeight,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: 20,
            itemBuilder: (_, index) =&gt;
                CTile(heading: 'Hip Hop', subheading: '623 Beats'),
          ),
        );
  
    Widget _buildGrid() =&gt; GridView.count(
          crossAxisCount: 2,
          crossAxisSpacing: LayoutSpacing.sm,
          mainAxisSpacing: LayoutSpacing.sm,
          children: List.generate(10, (index) {
            return CTile(
              padding: false,
              heading: 'Kevin Gates Type Beat',
              subheading: '623 FOLLOWERS',
              width: double.infinity,
            );
          }),
        );
  
    @override
    Widget buildBody(_) {
      return ListView(children: [
        CSectionHeading('Popular Genres &amp; Moods'),
        _buildHorizontalList(),
        CSectionHeading('All Genres &amp; Moods'),
        _buildGrid(),
      ]);
    }
  }
  </code></pre>
  
  <p>The result should be something like this</p>
  
  <p><a href="https://i.stack.imgur.com/fw9ZX.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/fw9ZX.jpg" alt="enter image description here"></a></p>