Flutter - ListView nested in columns gives error "hasSize" - flutter

Question

I have a ListView.builder() nested inside multiple columns, I get the following error and the widget doesn't build at all due to this:
════════ Exception caught by rendering library
═════════════════════════════════ RenderBox was not laid out:
RenderShrinkWrappingViewport#813d4 relayoutBoundary=up40 NEEDS-PAINT
NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
package:flutter/…/rendering/box.dart:1 Failed assertion: line 1982 pos
12: 'hasSize'
The relevant error-causing widget was ListView
lib\…\Widgets\todolistmodule_briefcard.dart:81
Below is the code:
class TodolistModuleBriefCard extends StatelessWidget {
//const NotesBriefModule({ Key? key }) : super(key: key);
TodolistModule todolistModule;
TodolistModuleBriefCard({required this.todolistModule});
#override
Widget build(BuildContext context) {
return buildCard();
}
Widget buildCard() => Padding(
padding: EdgeInsets.symmetric(vertical: 5),
child: Container(
child: Card(
color: Color.fromARGB(255, 240, 240, 240),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
child: buildContent(),
),
),
);
Widget buildContent() => Column(
children: [
buildName(),
Divider(
height: 1,
),
buildTodoList()
],
);
Widget buildName() => Padding(
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 15),
child: Text(
todolistModule.name,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontFamily: AppConfig.primaryFontFamily,
fontSize: 17,
color: Colors.grey.shade700,
fontWeight: FontWeight.w500,
),
),
);
Widget buildTodoList() => Padding(
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
buildTodoListSubList(
subList: todolistModule.todo, subListTitle: "To Do"),
buildTodoListSubList(
subList: todolistModule.completed, subListTitle: "Complete")
],
),
);
Widget buildTodoListSubList(
{required List<String> subList, required String subListTitle}) =>
Column(
children: [
buildTodoListSubListTitle(title: subListTitle),
buildTodoListSubListItems(subList: subList),
],
);
Widget buildTodoListSubListTitle({required String title}) => Text(
title,
style: TextStyle(fontFamily: AppConfig.primaryFontFamily),
);
Widget buildTodoListSubListItems({required List<String> subList}) =>
ListView.builder(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemCount: subList.length,
itemBuilder: ((context, index) {
return buildTodoListSubListItem(item: subList[index]);
}),
);
Widget buildTodoListSubListItem({required String item}) => Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Text(item,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
maxLines: 3,
style: TextStyle(
fontFamily: AppConfig.primaryFontFamily, fontSize: 13)),
),
);
}
Could someone please help me solve this problem?

Answer 1

just add Expanded
Widget buildTodoList() => Padding(
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: buildTodoListSubList(
subList: todolistModule.todo, subListTitle: "To Do"),
),
Expanded(
child: buildTodoListSubList(
subList: todolistModule.completed, subListTitle: "Complete"),
)
],
),
);
But you need read more about the layout principle

Answer 2

there is two solution:
you can surround your ListView with a container with a certain height like a height of your screen from media query for example:
Column(children: [
Container(
width: double.infinity,
height: 400,
child: ListView.builder(
itemBuilder: (context, index) {
return Container(
width: 200,
height: 890,
color: Colors.red,
child: Text('Hello'),
);
},
itemCount: 1,
),
)
]),
the second solution but I think it will stop the scrollable but try it is to set shrinkWrap property in listView to true like this:
Column(children: [
ListView.builder(
shrinkWrap: true, // this is shrinkWrap property!!!
itemBuilder: (context, index) {
return Container(
width: 200,
height: 400,
color: Colors.red,
child: Text('Hello'),
);
},
itemCount: 1,
)
]),