Getting 'Horizontal viewport was given unbounded height' error in Flutter

Question

I am trying to place an ExpansionTile with a horizontal GridView child in a container. See below for code. I get the error message 'Horizontal viewport was given unbounded height.'

I don't want to specify the height of ExpansionTile or GridView explicitly, but rather have it calculated from the Expanded widget and the children of GridView.

I've tried setting 'shrinkWrap: true' in GridView as suggested here with no success. I also tried wrapping GridView in Flexible based on this answer which gives me the error 'RenderFlex children have non-zero flex but incoming height constraints are unbounded.'

I think the problem is with how I'm using GridView, but I'm new to Flutter and not really sure. Here is my code:

import 'package:flutter/material.dart';

void main() => runApp(
  MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text("Title")),
      body: Column(
        children: <Widget>[
          Expanded(
            flex: 3,
            child: ExpansionTile(
              title: Text("Expandable"),
              children: <Widget>[
                GridView.count(
                  scrollDirection: Axis.horizontal,
                  crossAxisCount: 2,
                  children: <Widget>[
                    RawChip(label: Text("Hello")),
                    RawChip(label: Text("World")),
                  ],
                ),
              ],
            ),
          ),
          Expanded(
            flex: 7,
            child: Container(
              color: Colors.blue
            ),
          ),
        ],
      ),
    ),
  ),
);

Remove the unnecessary `Expanded` widgets and just add `shrinkWrap: true` for the `ExpansionTile` widget. — DarshanGowda0, Jan 23 '19 at 19:51
@DarshanGowda0 That gives me the error ''constraints.hasBoundedHeight': is not true'. Also, how to I portion the screen into 30% and 70% without the Expanded(flex: 3)? — smith, Jan 23 '19 at 20:05
@diegoveloper That's what the documentation seems to suggest, but it's not working for me. I opened up [an issue for this](https://github.com/flutter/flutter/issues/26984) — smith, Jan 24 '19 at 01:51
@diegoveloper thanks, it works, although the height you specify is too large for my example on my emulator. I'd still prefer a solution that doesn't need a specific pixel height. I'm gonna accept for now, but might update if I figure out how to use the whole space — smith, Jan 24 '19 at 03:07
maybe you could get the height of your screen using MediaQuery and play with that value — diegoveloper, Jan 24 '19 at 03:09

score 4 · Accepted Answer · answered Jan 24 '19 at 01:56

You can just add a height constraint to your GridView :

         ExpansionTile(
                        title: Text("Expandable"),
                        children: <Widget>[
                          SizedBox(
                            height: 200.0,
                            child: GridView.count(
                              scrollDirection: Axis.horizontal,
                              crossAxisCount: 2,
                              children: <Widget>[
                                RawChip(label: Text("Hello")),
                                RawChip(label: Text("World")),
                              ],
                            ),
                          ),
                        ],
                      ),

Getting 'Horizontal viewport was given unbounded height' error in Flutter

1 Answers1