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(),

          );
        },
      ),
    );

  }
}

Extreme Geek · Accepted Answer · 2022-04-04T06:49:04.010

51

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

add shrinkWrap: true as a parameter which will tell the ListView to use a little space as possible,
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

edited Apr 04 '22 at 06:49

answered May 31 '21 at 17:30

Extreme Geek

574
5
13

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? – Ali Mohsin May 16 '22 at 12:57
1

@AliMohsin Its always recommended to go for the first solution I mentioned which is to add shrinkWrap: true – Extreme Geek May 18 '22 at 07:43
`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](https://stackoverflow.com/users/15999263/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. – jonashackt Jan 28 '23 at 10:51
I got the error when I used "height: double.infinity" in SingleChildScrollView, now I have removed "height: double.infinity" and it is working fine. – Shahriar Ahmad Feb 18 '23 at 13:48

score 10 · Answer 2 · answered Aug 08 '22 at 09:43

10

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,
   ),
 )

answered Aug 08 '22 at 09:43

Forhan Ahmed Chowdhury

191
2
3

score 9 · Answer 3 · edited Apr 21 '22 at 15:00

9

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,
);

edited Apr 21 '22 at 15:00

MendelG

14,885
4
25
52

answered Jun 18 '21 at 11:02

Urvashi Hirpara

91
1

score 0 · Answer 4 · answered Jul 06 '23 at 14:34

0

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.

answered Jul 06 '23 at 14:34

arlegil youmba tchokothe

657
5
5

score -1 · Answer 5 · answered Mar 23 '23 at 16:57

-1

This is Happen just because of your List has no specific height so, from 3 way you can solve this error

Wrap with Expanded widget
Wrap with SizedBox() or Container() and give height to it.
Use Shrink Wrap: true Property in ListView.

answered Mar 23 '23 at 16:57

Samir Patel

1

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](/help/how-to-answer). – Community Apr 01 '23 at 22:30

score -1 · Answer 6 · answered Jul 26 '23 at 18:11

-1

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

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

answered Jul 26 '23 at 18:11

Bryar Laiq

15
5

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

6 Answers6

Linked