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?

CodePudding user response：

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

CodePudding user response：

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