【Flutter】Vertical viewport was given unbounded height.（エラー対処法）

# やりたいこと
**下記のように
①見出しText「Columnの先頭」　のしたに、
②GridViewで２列でWidget（ボタン）をスクロール可で配置したい。**
![Simulator Screen Shot - iPhone 11 - 2021-04-07 at 23.18.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233247/c7458425-3c47-89dc-a51d-50757cebd007.png)

## エラー発生
普通に考えると、Columnで囲って、、、と考えると思います。
そして発生したエラーがこちら

### 実際のコード
```dart:error.dart
return Container(
    child: Column(
  children: [
    Text('Column の先頭'),
    GridView.builder(
        padding: EdgeInsets.only(bottom: 70),
        gridDelegate:
            SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 1.5,
        ),
        itemCount: snapshot.data[type].length,
        itemBuilder: (context, index) {
          return playIcon(
              soundData: snapshot.data[type][index],
              type: type);
        })
  ],
));
```

### 発生したエラー
![スクリーンショット 2021-04-07 23.28.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233247/1f1ba1c4-51dc-fdca-93ac-0e02f724ac4d.png)

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

Viewports expand in the scrolling direction to fill their container. In this case, a vertical viewport was given an unlimited amount of vertical space in which to expand. This situation typically happens when a scrollable widget is nested inside another scrollable widget.

If this widget is always nested in a scrollable widget there is no need to use a viewport because there will always be enough vertical space for the children. In this case, consider using a Column instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size the height of the viewport to the sum of the heights of its children.

The relevant error-causing widget was
GridView
lib/…/components/soundsList.dart:27
When the exception was thrown, this was the stack
#0      RenderViewport.computeDryLayout.<anonymous closure>
package:flutter/…/rendering/viewport.dart:1365
#1      RenderViewport.computeDryLayout
package:flutter/…/rendering/viewport.dart:1426
#2      RenderBox.performResize
package:flutter/…/rendering/box.dart:2342
#3      RenderObject.layout
package:flutter/…/rendering/object.dart:1763
#4      RenderProxyBoxMixin.performLayout
package:flutter/…/rendering/proxy_box.dart:118
...
The following RenderObject was being processed when the exception was fired: RenderViewport#46b81 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
RenderObject: RenderViewport#46b81 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    needs compositing
    parentData: <none> (can use size)
    constraints: BoxConstraints(0.0<=w<=398.0, 0.0<=h<=Infinity)
    size: MISSING
    axisDirection: down
    crossAxisDirection: right
    offset: ScrollPositionWithSingleContext#3701e(offset: 0.0, range: null..null, viewport: null, ScrollableState, AlwaysScrollableScrollPhysics -> BouncingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#fe1d6, ScrollDirection.idle)
    anchor: 0.0
    center child: RenderSliverPadding#d4e6a NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
        parentData: paintOffset=Offset(0.0, 0.0)
        constraints: MISSING
        geometry: null
        padding: EdgeInsets(0.0, 0.0, 0.0, 70.0)
        textDirection: ltr
        child: RenderSliverGrid#22183 NEEDS-LAYOUT NEEDS-PAINT
            parentData: paintOffset=Offset(0.0, 0.0)
            constraints: MISSING
            geometry: null
            no children current live
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderViewport#46b81 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1940 pos 12: 'hasSize'

The relevant error-causing widget was
GridView
lib/…/components/soundsList.dart:27
════════════════════════════════════════════════════════════════════════════════
```

# 対処法
## Expandedで囲む
### Expandedとは？
**ExpandedというWidgetは、RowやColumnの子Widget間の隙間を目一杯埋めたいときに使います。**
下記にわかりやすくまとめてくれている方がいらっしゃいました。
https://qiita.com/nannany_tis/items/d4114f615e4d53964121

### 無事エラーが解消されたコード
```dart:success.dart
return Container(
    child: Column(
  children: [
    Text('Column の先頭', style:TextStyle(fontSize: 40)),
    Expanded(
    child: GridView.builder(
        padding: EdgeInsets.only(bottom: 70),
        gridDelegate:
            SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 1.5,
        ),
        itemCount: snapshot.data[type].length,
        itemBuilder: (context, index) {
          return playIcon(
              soundData: snapshot.data[type][index],
              type: type);
        })
    ),
  ],
));
```

### 環境
Flutter 1.26.0-17.3.pre 
Dart 2.12.0

### 参考記事
https://stackoverflow.com/questions/49943272/flutter-gridview-in-column-whats-solution/51167158