FlutterでGridView内のCardが表示できなくなった

Question

以下のようにScaffoldのbodyにchildrenを配置し、children配下にRowとGridViewを置きました。
すると、GridViewを(childrenにWrapせずに）bodyの下にダイレクトに書いた際には表示されていたCard内の表示が見えなくなってしまいました（というか、画面がappBar以外なにも表示されなくなってしまいました）。

GridViewはchildrenの直下に書くことはできないのでしょうか？

やりたいこととしては、GridViewでCardを格子状に配置している上部に１行、ログインしているユーザの名前とログアウトボタンを設置したいと考えています。

よろしくお願いいたします。

 return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body:
      Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              const FlutterLogo(),
              const Expanded(
                child: Text('Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.'),
              ),
              const Icon(Icons.sentiment_very_satisfied),
            ],
          ),
          GridView.count(
            crossAxisCount: 2,
            padding: EdgeInsets.all(16.0),
            childAspectRatio: 8.0 / 9.0,
            children: <Widget>[
              Card(
                clipBehavior: Clip.antiAlias,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    AspectRatio(
                      aspectRatio: 18.0 / 11.0,
                      child: Image.asset(
                          'assets/f_f_object_174_s128_f_object_174_0bg.png'),
                    ),
                    Padding(
                      padding: EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text('Title'),
                          SizedBox(height: 8.0),
                          Text('First Text'),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              InkWell(
                onTap: () {
                  Navigator.of(context).pushNamed('/book_detail');
                },
                child: Card(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      AspectRatio(
                        aspectRatio: 18.0 / 11.0,
                        child: Image.asset(
                            'assets/f_f_object_174_s128_f_object_174_1bg.png'),
                      ),
                      Padding(
                        padding: EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text('Title'),
                            SizedBox(height: 8.0),
                            Text('Secondry Text'),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Answer 1

GridViewをExpandedで囲ったらどうでしょうか

色々エラーが出ていますが、一番上のエラーが重要な場合が多いです。
Vertical viewport was given unbounded height.

スクロール可能なGridViewが、垂直方向に無制限に広がろうとしてエラーになっているようなので、 Expandedを使って、利用可能なスペースまで拡大して、その中にスクロール領域を作る感じだと思います。

---

軽くググってみたら同じような質問がStackOverflowにありました。

Comments

[退会済みユーザー]

こちら、Expandedで解決できました。ご回答いただきどうもありがとうございました。