How to use GridView or ListView inside a Column Widget in Flutter

New to Flutter? Experiencing RenderBox errors while working with GridView or ListView inside a Column widget is common among beginners.

GridView/ListView are scrollable widgets having vertical scroll direction as default property. Using them inside a Column widget results in unbounded height constraints error.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    GridView.count(
      crossAxisCount: 2,
      children: [
        Container(
          child: Text("$_counter"),
          color: Colors.cyan,
          padding: EdgeInsets.all(10),
          margin: EdgeInsets.all(5),
        ),

Having RenderFlow Issue?

Well, In this article you’ll learn 3 ways on how to fix these RenderBox errors.

By Wrapping the GridView or ListView with a Container or SizedBox and provide it with a bounded height.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Container(
      height: 200,
      child: GridView.count(
        crossAxisCount: 2,
        children: [
          Container(
            child: Text("$_counter"),
            color: Colors.cyan,
            padding: EdgeInsets.all(10),
            margin: EdgeInsets.all(5),
          ),

By Wrapping the GridView or ListView with an Expanded widget.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Expanded(
      child: GridView.count(
        crossAxisCount: 2,
        children: [
          Container(
            child: Text("$_counter"),
            color: Colors.cyan,
            padding: EdgeInsets.all(10),
            margin: EdgeInsets.all(5),
          ),

By Adding a shrinkWrap: true attribute to the GridView/ListView widget

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    GridView.count(
      shrinkWrap: true,
      crossAxisCount: 2,
      children: [
        Container(
          child: Text("$_counter"),
          color: Colors.cyan,
          padding: EdgeInsets.all(10),
          margin: EdgeInsets.all(5),
        ),

Thank you for reading :)

Check out my Github profile https://github.com/RGTechno

Check out the repository with code for this article https://github.com/RGTechno/BlogGists/tree/master/gridviewb1