FlutterBuilder
FlutterBuilder

Reputation: 83

Flutter: column bottom overflow, renderflex error

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.

Upvotes: 0

Views: 81

Answers (0)

Related Questions