Search code examples
flutterdartflutter-layout

How can i use nested lists without specifying the height?


I need to use nested lists, but I can't give them a height, because lists can have their own length depending on the amount of information that comes from the server. I tried sketching a variation but it doesn't work, I get an error - Incorrect use of ParentDataWidget.

Below is my code -

return Drawer(
            child: Container(
              margin: const EdgeInsets.symmetric(vertical: 13, horizontal: 13),
              child: ListView.builder(
                physics: const NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                itemCount: catalogDrawer.length,
                itemBuilder: (BuildContext context, int index) {
                var one = catalogDrawer[index].one;
                  return Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(catalogDrawer[index].name, style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600),),
                          Expanded(
                            child: ListView.builder(
                              physics: const NeverScrollableScrollPhysics(),
                              shrinkWrap: true,
                              itemCount: catalogDrawer[index].one.length,
                              itemBuilder: (BuildContext context, int i) {
                                var two = catalogDrawer[index].one[i].two;
                                return Expanded(
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                  Container(
                                  margin: const EdgeInsets.only(left: 10),
                                    padding: const EdgeInsets.all(10),
                                    color: Colors.yellow,
                                    child: Text(one[i].name,style: TextStyle(fontWeight: FontWeight.w500, fontSize: 15),),
                                ),
                                      Expanded(
                                        // height: two.length > 1 ? 76 : 38,
                                        child: ListView.builder(
                                          physics: const NeverScrollableScrollPhysics(),
                                          shrinkWrap: true,
                                          itemCount: catalogDrawer[index].one[i].two.length,
                                          itemBuilder: (BuildContext context, int a) {
                                            return Container(
                                                margin: const EdgeInsets.only(left: 30),
                                              padding: const EdgeInsets.all(10),
                                                color: Colors.red,
                                                child: Text(two[a].name, style: TextStyle(fontWeight: FontWeight.w500, fontSize: 15),),
                                            );
                                          },
                                        ),
                                      ),
                                    ],
                                  )
                                );
                              },
                            ),
                          ),
                        ],
                      )
                  );
                },
              ),
            ),
        );

My question can be rephrased - How to use nested lists but don't specify a height


Solution

  • When you set shrinkWrap true you don't need to use Expanded widget inside listview, so remove all Expanded like this:

    Drawer(
            child: Container(
              margin: const EdgeInsets.symmetric(vertical: 13, horizontal: 13),
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: catalogDrawer.length,
                itemBuilder: (BuildContext context, int index) {
                var one = catalogDrawer[index].one;
                  return Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(catalogDrawer[index].name, style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600),),
                      ListView.builder(
                        physics: const NeverScrollableScrollPhysics(),
                        shrinkWrap: true,
                        itemCount: catalogDrawer[index].one.length,
                        itemBuilder: (BuildContext context, int i) {
                          var two = catalogDrawer[index].one[i].two;
                          return Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                          Container(
                          margin: const EdgeInsets.only(left: 10),
                            padding: const EdgeInsets.all(10),
                            color: Colors.yellow,
                            child: Text(one[i].name,style: TextStyle(fontWeight: FontWeight.w500, fontSize: 15),),
                          ),
                              ListView.builder(
                                physics: const NeverScrollableScrollPhysics(),
                                shrinkWrap: true,
                                itemCount: catalogDrawer[index].one[i].two.length,
                                itemBuilder: (BuildContext context, int a) {
                                  return Container(
                                      margin: const EdgeInsets.only(left: 30),
                                    padding: const EdgeInsets.all(10),
                                      color: Colors.red,
                                      child: Text(two[a].name, style: TextStyle(fontWeight: FontWeight.w500, fontSize: 15),),
                                  );
                                },
                              ),
                            ],
                          );
                        },
                      ),
                    ],
                  );
                },
              ),
            ),
        )