0

I am trying to build 2 Listview.builder ontop of each other and to do that I am using Column to have more than 1 child as follows:

@override
  Widget build(BuildContext context) {
    return widget.category == 0
        ? Column(
            children: [
              buildList("12-15", Utils.srsDropdown, "Single rope speed: "),
              buildList("12-15", Utils.ddsDropdown, "Double dutch speed: ")
            ],
          )
        : Column(
            children: [
              buildList("16+", Utils.srsDropdown, "Single rope speed: "),
              buildList("16+", Utils.ddsDropdown, "Double dutch speed: ")
            ],
          );
  }

where my buildList function is the following:

Widget buildList(String ageGroup, List<String> categories, String category) {
    return ListView.builder(
        shrinkWrap: true,
        itemCount: categories.length - 1,
        itemBuilder: (BuildContext context, int index) {
          return Column(
            children: [
              Text('$category${categories[index]}'),
              FutureBuilder<List<Map<String, dynamic>>>(
                  future: LeadersCard.getData(ageGroup, categories, category)!,
                  builder: ((context, snapshot) {
                    return LeadersCard.buildCard(snapshot, context, index);
                  }))
            ],
          );
        });
  }

and I am ultimately returning the LeadersCard.buildCard which returns a list of list of ListTile as follows:

return Column(
      children: [
        ListTile(
            title: Text(
                "Record: ${card.data![index]['firstPlaceScore'].toString()}"),
            subtitle: Text("Held by: $first"),
            shape: const Border(bottom: BorderSide())),
        ListTile(
            title: Text(
                "Record: ${card.data![index]['secondPlaceScore'].toString()}"),
            subtitle: Text("Held by: $second"),
            shape: const Border(bottom: BorderSide())),
        ListTile(
            title: Text(
                "Record: ${card.data![index]['thirdPlaceScore'].toString()}"),
            subtitle: Text("Held by: $third"),
            shape: const Border(bottom: BorderSide()))
      ],
    );

I know that column doesn't expand so I am getting a bottom overflow message: overflow. But I am wondering what I can use instead of a column to stack my lists and my listtiles ontop of each other.

2
  • 3
    Wrap the column in a SingleChildScrollView? You may also want to set the physics of the list views if you do that way, so they aren’t themselves scrollable Commented Mar 15, 2023 at 19:34
  • 1
    @Clive Make it an answer that can be accepted, so this question does not hang unanswered indefinitely. Commented Mar 16, 2023 at 4:23

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.