Make a dynamic Listview inside a ListView =

Question

as of the picture down below, I would like to make listview, where it is possible to add more lines(red) under each listview card. I have implemented the overall listview(green), with the button that should add a list inside the list. Code is at the bottom

The picture is taken from the Strong app

My design right now is as follows:

Expanded(
          // ignore: unnecessary_new
          child: new ListView.builder(
              itemCount: litems.length,
              itemBuilder: (BuildContext ctxt, int Index) {
                return Card(
                    child: Padding(
                        padding: EdgeInsets.all(10),
                        child: ExpansionTile(
                          initiallyExpanded: true,
                          title: Text(
                            litems[Index],
                            style: const TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          children: <Widget>[
                            ElevatedButton(
                                onPressed: () {
                                  litems.add('hei');
                                  setState(() {});
                                },
                                child: const Text('Add Set')),
                            SizedBox(height: 5),
                          ],
                          leading: IconButton(
                            icon: const Icon(
                              Icons.close,
                              color: Colors.red,
                            ),
                            onPressed: () {
                              litems.removeAt(Index);
                              setState(() {});
                            },
                          ),
                        )));
              })),
      ElevatedButton(
          onPressed: () {
            litems.add('hei');
            setState(() {});
          },
          child: const Text('Add Exercises')),

Answer 1

Try my code:

List<List<String>> parent = [];//init Parent

//Parent(Exercises) layout
    Column(
            children: [
              ListView.builder(
                  itemCount: parent.length,
                  shrinkWrap: true,
                  itemBuilder: (context, index) {
                    return _buildList(parent[index]);
                  }),
              TextButton(
                  onPressed: () {
                    parent.add([]);
                    setState(() {});
                  },
                  child: Text("Add Parent"))
            ],
          )

//build children
_buildList(List<String> list) {
    return Column(
      children: [
        ListView.builder(
          itemCount: list.length,
          shrinkWrap: true,
          padding: EdgeInsets.all(0),
          physics: const NeverScrollableScrollPhysics(),
          itemExtent: 50,
          itemBuilder: (context, index) {
            return Container(
              color: Colors.red.withOpacity((index * 5) / 100),
              margin: EdgeInsets.symmetric(vertical: 0),
              child: Text('Item'),
            );
          },
        ),
        TextButton(
            onPressed: () {
              list.add("value");
              setState(() {});
            },
            child: Text("Add Item"))
      ],
    );
  }