Error: RenderBox was not laid out, Failed assertion: line 1940 pos 12: 'hasSize'

Question

I can't fix this error

RenderBox was not laid out: RenderPointerListener#2b92a relayoutBoundary=up9 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1940 pos 12: 'hasSize'. The relevant error-causing widget was ->ListView

This is my allProducts part.

import 'package:flutter/material.dart';
import 'package:hospital/Drawer/drawercontent.dart';
import 'package:hospital/Product/AllProducts/ProductList/product_list.dart';
import 'package:hospital/Product/AllProducts/carousel.dart';
import 'package:hospital/Product/AllProducts/category.dart';

class AllProducts extends StatefulWidget {
  @override
  _AllProductsState createState() => _AllProductsState();
}

class _AllProductsState extends State<AllProducts> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,

          title: Text(
            "Product",
            style: TextStyle(fontStyle: FontStyle.italic),
          ),
          actions: [

            IconButton(
              icon: Icon(Icons.person),
              onPressed: () => print("open cart"),
            ),
          ],

        ),
        drawer: Drawer(
          child: DrawerContent(),
        ),
        body: ListView(

          children: [
            Carousel(),
            SizedBox(
              height: 10.0,
            ),

            CategoryPage(),
            SizedBox(
              height: 20.0,
            ),
            ProductList()

          ],
        ));
  }
}

This is my product part

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:hospital/Product/AllProducts/ProductList/network_req.dart';
import 'package:hospital/Product/AllProducts/ProductList/product_model.dart';
import 'package:hospital/constant.dart';
import 'package:http/http.dart' as http;
// import '../../drawercontent.dart';

class ProductList extends StatefulWidget {
  final s_id;

  const ProductList({key, this.s_id}) : super(key: key);
  @override
  _ProductListState createState() => _ProductListState();
}

class _ProductListState extends State<ProductList> {
  @override
  Widget build(BuildContext context) {
    return Container(
      // ignore: missing_required_param
      child: FutureBuilder<List<Model>>(
        // future: NetReq.fetchTeams(),
        future: NetReq.fetchTeams(widget.s_id),

        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Text("Error ${snapshot.error}");
          } else if (snapshot.hasData) {
            return GridView.count(

                // childAspectRatio: 1.0,
                padding: EdgeInsets.only(left: 20, right: 20),
                crossAxisCount: 2,
                crossAxisSpacing: 18,
                mainAxisSpacing: 18,

                children: snapshot.data.map((team) {
                  return Card(
                    elevation: 3.0,
                    margin: EdgeInsets.all(10.0),
                    shape: RoundedRectangleBorder(

                      borderRadius: BorderRadius.circular(12.0),
                    ),
                    child: Container(
                      width: 150.0,
                      padding: EdgeInsets.all(8.0),

                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Expanded(
                            child: ClipRRect(

                              borderRadius: BorderRadius.circular(14.0),
                              child: Container(
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(12.0),
                                  image: DecorationImage(
                                    image: NetworkImage(
                                        "https://5.imimg.com/data5/MR/TK/KJ/SELLER-769696/tulac-granules-500x500.jpeg"),
                                  ),

                                ),
                              ),
                            ),
                          ),
                          SizedBox(height: 12.0),

                          Text(
                              // "Tulac Granules, For Personal, Packaging Size: 90 Gm",
                              team.teamUniqId,
                              overflow: TextOverflow.ellipsis,
                              maxLines: 2,

                              style: kTitleStyle),
                          SizedBox(height: 6.0),
                          Text(
                              // "\u20B9 239/ Box",
                              team.teamType,

                              maxLines: 1,
                              style: kSubTitleStyle),
                        ],
                      ),
                    ),

                  );
                }).toList());
          }
          return Center(
            child: CircularProgressIndicator(),

          );
        },
      ),
    );

  }
}

Forage

Answer 1

This happens when ListView has no constrained height which makes it gets an infinite height, you can solve this using two solutions

1. add shrinkWrap: true as a parameter which will tell the ListView to use a little space as possible,

2. Wrap your ListView with a constrained height widget, such as a SizedBox or a Container, and give it a height and width like so

       Container(
            height: 50,
            width: 50,
            child: ListView()
              )

hope this solves your problem

Polyunsaturated

Yes, wrapping the listview with a SizedBox fixes the issue, but the problem is the listview doesn't have a fixed height, its height is changing as items are increasing.. what to do in such scenario? – Sickle

@AliMohsin Its always recommended to go for the first solution I mentioned which is to add shrinkWrap: true – Polyunsaturated

shrinkWrap: true is the right direction, but you also need something like Expanded wrapped around the ListView to get this work (as Forhan Ahmed Chowdhury mentioned - otherwise the error persists. This approach also uses the available space without defining a fixed height, which I prefer in most cases. – Classicize

I got the error when I used "height: double.infinity" in SingleChildScrollView, now I have removed "height: double.infinity" and it is working fine. – Ernie

Answer 2

When ListView has no constrained height you face this problem. You can wrap your ListView with the Expanded widget. Also, add shrinkWrap: true as a parameter.

Expanded(
   child: ListView(
      shrinkWrap: true,
   ),
 )

Solnit

you need to shrink to expand? – Unswerving

Answer 3

Please add to the GridView shrinkWrap: true like this:

return GridView.count(
  shrinkWrap: true
   padding: EdgeInsets.only(left: 20, right: 20),
   crossAxisCount: 2,
   crossAxisSpacing: 18,
   mainAxisSpacing: 18,
);

Blueness

Answer 4

You can wrap your ListView widget with a Expanded widget like so.

Expanded(
  child: ListView(children []),
),

Slavic

Answer 5

This issue occurs because your list doesn't have a specific height. Here are three ways to solve this error:

Wrap with an Expanded widget: This allows the widget to take up all available space along the main axis within its parent widget.

Wrap with SizedBox() or Container() and set a height: Specify a fixed height for the widget using SizedBox() or Container(). This ensures the widget has a defined size.

Use ShrinkWrap: true property in ListView: When using ListView, setting ShrinkWrap to true makes the list take up only as much space as its contents require.

Babbie

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Gobioid

Answer 6

For my case, i got this error when I used improperly Material widget in a Scaffold three. I just replaced Material widget with other widget.

Norris