I want to put my Lists items in ExpansionTile, the title is set perfectly but children's items not set inside list. I want to add children items inside ExpansionTile children

My dataList:

List dataList = [
    {
      "title": "Payments",
      "icon": Icons.payment,
      "children": [
        {"title": "Paypal"},
        {"title": "Credit Card"},
        {"title": "Debit Card"}
      ]
    },
    {
      "title": "Favorite",
      "icon": Icons.favorite,
      "children": [
        {"title": "Swimming"},
        {"title": "Football"},
        {"title": "Movie"},
        {"title": "Singing"},
        {"title": "Jogging"},
      ]
    },
  ];
 

var declarion:

int? selected; 

My Widget:

    ListView.builder(
        key: Key('builder ${selected.toString()}'),
        padding: const EdgeInsets.only(left: 13.0, right: 13.0, bottom: 25.0),
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        itemCount: dataList.length,
        itemBuilder: (context, index) {
          return ExpansionTile(
            key: Key(index.toString()), 
            initiallyExpanded: index == selected, 
            trailing: const SizedBox(),
            leading: Icon(
              dataList[index]['icon'],
              color: index == selected ? Colors.black : Colors.grey,
            ),
            title: Text(dataList[index]['title'],
                style: TextStyle(
                    color: index == selected ? Colors.black : Colors.grey,
                    fontSize: 17.0,
                    fontWeight: FontWeight.bold)),
            onExpansionChanged: ((newState) {
              if (newState) {
                setState(() {
                  selected = index;
                });
              } else {
                setState(() {
                  selected = -1;
                });
              }
            }),
            children: [
              Padding(
                padding: const EdgeInsets.all(25.0),
                child: Text(
                  dataList[index]['children'][index]['title'],
                  style: TextStyle(
                    color: index == selected ? Colors.red : Colors.grey,
                  ),
                ),
              ),
            ],
          );
        },
      )

Current Result-

CodePudding user response：

Because you're only showing the index position item and not actually mapping all the children of dataList[index]['children'].

Change:

 children: [
              Padding(
                padding: const EdgeInsets.all(25.0),
                child: Text(
                  dataList[index]['children'][index]['title'],
                  style: TextStyle(
                    color: index == selected ? Colors.red : Colors.grey,
                  ),
                ),
              ),
            ],

to:

children: dataList[index]['children']
                .map<Padding>((Map<String, String> item) => Padding(
                      padding: const EdgeInsets.all(25.0),
                      child: Text(
                        item['title'].toString(),
                        style: TextStyle(
                          color: index == selected ? Colors.red : Colors.grey,
                        ),
                      ),
                    ))
                .toList(),