Flutter : 画面の中に「グリッドビュー」とそれ以外のWidgetを一緒に表示させたい

Question

GridViewウィジェットを使って格子状に子ウィジェットを表示することはできたのですが、
一つの画面の中でテキストなどのウィジェットとGridViewウィジェットを一緒に
表示させるにはどうしたら良いでしょうか?

例えば

//sign_in_page.dart

class SignInPage extends StatelessWidget {

  void _signInAnonymously() async {
    final authResult=await FirebaseAuth.instance.signInAnonymously();

    print('${authResult.user.uid}');

  }

  @override
  Widget build(BuildContext context) {

    List<Widget> list1=[
      SizedBox(
        width:50.0,
        height:50.0,
        child:Container(
          color:Colors.blue,
        ),
      ),
      SizedBox(
        width:100.0,
        height:100.0,
        child:Container(
          color:Colors.red,
        ),
      ),
      SizedBox(
        width:100.0,
        height:100.0,
        child:Container(
          color:Colors.green,
        ),
      ),
      SizedBox(
        width:100.0,
        height:100.0,
        child:Container(
          color:Colors.yellow,
        ),
      ),
    ];

    return Scaffold(
      appBar: AppBar(
        title: Text('タイトル'),
        elevation: 10.0,
      ),
      //body: buildContent(),
      body:Column(    //←こうするとエラーが出る。
        children: [
          Text('このグリッドビューの説明'),
          GridView.count(
              crossAxisCount: 3,
              children: list1
          ),
        ],
      ),
      backgroundColor: Colors.grey[300],
    );
  }

//main.dart

import 'package:flutter/material.dart';

import 'app/sign_in/sign_in_page.dart';
void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'タイトル',
      theme:ThemeData(
        primarySwatch: Colors.indigo,
      ),
      home:SignInPage(),
    );
  }
}

上記のようにテキストとグリッドビューを表示させたいのですが、Columnウィジェット
に入れて表示しようとするとエラーが出ます。

Answer 1

shrinkWrapをtrueに設定することで、解決すると思います。

Column(
  children: [
    Text('このグリッドビューの説明'),
    GridView.count(
      shrinkWrap: true,
      crossAxisCount: 3,
      children: list1,
    ),
  ],
),

また、こんな感じでGridViewに高さを設定するという方法もあります。

Column(
  children: [
    Text('このグリッドビューの説明'),
    Container(
      height: 300,
      child: GridView.count(
        crossAxisCount: 3,
        children: list1,
      ),
    ),
  ],
),

あと、GridView部分をExpandedで囲うという方法もあります。

Column(
  children: [
    Text('このグリッドビューの説明'),
    Expanded(
      child: GridView.count(
        crossAxisCount: 3,
        children: list1,
      ),
    ),
  ],
),

Comments

[nskhei]

この場合、Expandedで囲うのが一番良い方法かもしれません。

[moriman]

回答を頂きましてありがとうございます。
すみません。二番目と三番目が何故これでうまくいくのかわからないのでよろしければ簡単な解説お願いできますでしょうか。????

[nskhei]

おそらく、元々発生していたエラーは、
Vertical viewport was given unbounded height.
というエラーだったと思います。

なので、２番目については、高さを明示的に指定することで、エラーが消えます。

また、3番目についても同様に、Expandedで囲むことで、
GridViewの高さ = 画面全体 - (Appbar部分+ テキスト部分)
という風に高さが決まるので、エラーが消えます。

[moriman]

grid viewについて調べてみます。本当にありがとうございました。