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

Question

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(
                            ),
                          )
                        ],
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    ````

Answer 1

1. Replace Expanded with Flexible.
2. Add AlwaysScrollingPhysics and set shrink wrap to true in listview.builder.
3. Set MainAxisSize.min in column.

Example

Column(crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text("xyz"),
            Flexible(
              child: ListView.builder(
                itemCount: 40,
                physics: const AlwaysScrollableScrollPhysics(),
                shrinkWrap: true,
                itemBuilder: (context, index) => GestureDetector(
                  onTap: () {},
                  child: const Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Divider(),
                      Text("text 1"),
                      Text("Text 2"),
                    ],
                  ),
                ),
              ),
            ),
          ],
        )

Answer 2

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}"),
                );
              },
            ),
          ],
        ),
      ),
    ),

Answer 3

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