Flutter Error: Vertical viewport was given unbounded height

Question

I'm learning flutter, and I'm trying to achieve a set of clickable cards, I successfully created the cards, however when I tried to use GestureDetector and wrap it up in a listview builder I get the following error

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.

Please find the code below (task_card.dart):

import 'package:flutter/material.dart';
import 'product_detail.dart';

class TaskCard extends StatelessWidget {
  final Map<String, dynamic> product;
  final Function updateProduct;
  final Function deleteProduct;
  final int productIndex;

  TaskCard(this.product, this.productIndex, this.updateProduct, this.deleteProduct);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      //shrinkWrap: true,
      itemBuilder: (BuildContext context, int index) {
        return GestureDetector(
          onTap: () {
            Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {
              return ProductDetail(
                product: product[index],
                productIndex: index,
                updateProduct: updateProduct,
                deleteProduct: deleteProduct,
              );
            }));
          },
          child: Card(
            child: Column(
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      margin: EdgeInsets.only(left: 10.0, top: 5.0),
                      child: Text(
                        product['title'],
                        style: TextStyle(
                          fontSize: 22.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        );
      }
    );
  }
}

(task.dart)

import 'package:flutter/material.dart';
import 'task_card.dart';

class Tasks extends StatelessWidget {
  final List<Map<String, dynamic>> products;
  final Function updateProduct;
  final Function deleteProduct;

  Tasks(this.products, this.updateProduct, this.deleteProduct);

  Widget _buildTaskCard() {
    Widget taskCard = Center(
      child: Text('No Products found'),
    );
    if (tasks.length > 0) {
      taskCard = ListView.builder(
        itemBuilder: (BuildContext context, int index) =>
            TaskCard(products[index], index, updateProduct, deleteProduct),
        itemCount: products.length,
      );
    }
    return taskCard;
  }

  @override
  Widget build(BuildContext context) {
    return _buildTaskCard();
  }
}

I've tried warping up my listview builder in a flexible widget and also using shrink wrap but non of them worked (shrink wrap crashed the application).

I'm trying to make the card clickable so that it navigates to another page. any help is appreciated, thanks :)

Answer 1

Okay, so I guess I found a fix. I have added an unnecessary listview builder in the task_card.dart and called it through tasks.dart which already has a listview builder. Sharing my code for anyone who want to refer.

task.dart

import 'package:flutter/material.dart';
import 'task_card.dart';

class Tasks extends StatelessWidget {
  final List<Map<String, dynamic>> products;
  final Function updateProduct;
  final Function deleteProduct;

  Tasks(this.products, this.updateProduct, this.deleteProduct);

  Widget _buildTaskCard() {
    Widget taskCard = Center(
      child: Text('No Products found'),
    );
    if (tasks.length > 0) {
      taskCard = ListView.builder(
        itemBuilder: (BuildContext context, int index) =>
            TaskCard(products[index], index, updateProduct, deleteProduct),
        itemCount: products.length,
      );
    }
    return taskCard;
  }

  @override
  Widget build(BuildContext context) {
    return _buildTaskCard();
  }
}

task_card.dart

import 'package:flutter/material.dart';
import 'product_detail.dart';

class TaskCard extends StatelessWidget {
  final Map<String, dynamic> product;
  final Function updateProduct;
  final Function deleteProduct;
  final int productIndex;

  TaskCard(this.product, this.productIndex, this.updateProduct, this.deleteProduct);

  @override
  Widget build(BuildContext context) {
        return GestureDetector(
          onTap: () {
            Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {
              return ProductDetail(
                product: product,
                productIndex: productIndex,
                updateProduct: updateProduct,
                deleteProduct: deleteProduct,
              );
            }));
          },
          child: Card(
            child: Column(
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      margin: EdgeInsets.only(left: 10.0, top: 5.0),
                      child: Text(
                        product['title'],
                        style: TextStyle(
                          fontSize: 22.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        );
      }
}