Question 216091 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – getting " 'hasSize': RenderBox was not laid out:" . wraping listview builder with expanded doesn't work. how to fix it?

getting " ‘hasSize’: RenderBox was not laid out:" . wraping listview builder with expanded doesn’t work. how to fix it? . Wraping the listview with a sized box works. but The Ui requirement is the card needs to expand with the number of list in the listview builder

Card(
        elevation: 5,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                "xyz",
               ),
              ),
              Expanded(
                child: ListView.builder(
                  itemCount: ,
                  itemBuilder: (context, index) {
                    return GestureDetector(
                      onTap: () =>()
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const Divider(),
                          Text(),
                          Text(
                            ),
                          )
                        ],
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    ````
Tags:

2

Answers


  1. 0
    1. Remove Expanded widget.
    2. Add this property to ListView.builder: shrikWrap:true
    3. If the listview has too many children giving pixel overflow error then add physics: const NeverScrollableScrollPhysics() to it and wrap your Scaffhold‘s body with SingleChildScrollView widget.

    Example:

    SingleChildScrollView(
      child: Card(
        elevation: 5,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(16),
        ),
        child: Column(
          children: [
            const Text("Hello World!!"),
            ListView.builder(
              itemCount: 20,
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemBuilder: (context, index) {
                return Container(
                  margin: const EdgeInsets.all(8.0),
                  height: 50,
                  color: Colors.cyan,
                  alignment: Alignment.center,
                  child: Text("${index + 1}"),
                );
              },
            ),
          ],
        ),
      ),
    ),
    Login or Signup to reply.
  2. 0

    In case the number of children is not too big, replace the ListView by a Column. The layout of the column gets calculated beforehand and therefore should have a known height.

    If the number of children is indeed very large, then continue using the ListView, but you have to use constraints at some point, you may try to use a combination of LayoutBuilder and SizedBox.

    https://www.youtube.com/watch?v=IYDVcriKjsw

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search