Flutter :- Is there a way to customize the output for each Expansion Tile in a list builder?

Question

Currently, I have a list view builder which builds 4 Expansion Tiles.

Each one of these ExpansionTiles has x amount of sub Tiles.

Currently I am displaying the sub tiles like this, but I am getting repeated data for each of the 4 Expansion Tiles.

children: <Widget>[
         listTile[index],
         listTile[index],
         listTile[index],
         listTile[index],
]

How do I display unique data for all 4 expansion tiles (ex. expansion tile 1 sub tiles display data all from list 1, expansion tile 2 sub tiles display data all from list 2 , etc...)?

class MyDynamicListTile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final tileTitles = [ 'DEFAULT CATEGORY', 'SELECT COLOR', 'ALERT TYPE', 'VIBRATION TYPES' ];
    final iconsList = [ Icons.line_style, Icons.color_lens, Icons.ring_volume, Icons.vibration];
    final subTiles1 = [ 'FIELD', 'FIELD', 'FIELD', 'FIELD', 'FIELD' ];
    List<Widget> listTile = getListTileWidget(subTiles1);


    return ListView.builder(
        itemCount: tileTitles.length,
        itemBuilder: (context, index) {
          return new ExpansionTile(
            leading: Icon(iconsList[index]),
            title: new Text(tileTitles[index],
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12)),
            children: <Widget>[
              listTile[index],
              listTile[index],
              listTile[index],
              listTile[index],


              ],
          );
        });
  }


List<Widget> getListTileWidget(final subTiles) {
  List<Widget> list = new List<Widget>();
  for (var i = 0; i < subTiles.length; i++) {
    list.add(new ListTile(
        title: Text(subTiles[i],
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12)
            )));
  }
  return list;
}

}

Answer 1

Try this way, you just use single list or pojo class list to achieve your goal, please check the below solution for it

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomeScreen();
  }
}

class _HomeScreen extends State<HomeScreen> {

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: ListView.builder(
        itemCount: fields.length,
        itemBuilder: (context, i) {
          return new ExpansionTile(
            title: new Text(fields[i].title, style: new TextStyle(fontSize: 12.0, fontWeight: FontWeight.bold),),
            children: <Widget>[
              new Column(
                children: _buildExpandableContent(fields[i]),
              ),
            ],
          );
        },
      ),
    );
  }

  _buildExpandableContent(Fields fields) {
    List<Widget> columnContent = [];

    for (String content in fields.dataList)
      columnContent.add(
        new ListTile(
          title: new Text(content, style: new TextStyle(fontSize: 12.0,fontWeight: FontWeight.bold),),
          leading: new Icon(fields.icon),
        ),
      );

    return columnContent;
  }
}


class Fields {
  final String title;
  List<String> dataList = [];
  final IconData icon;

  Fields(this.title, this.dataList, this.icon);
}


List<Fields> fields = [
  new Fields(
    'DEFAULT CATEGORY',
    ['DEFAULT 1', 'DEFAULT 2', 'DEFAULT. 3', 'DEFAULT 4'],
    Icons.line_style,
  ),
  new Fields(
    'SELECT COLOR',
    ['COLOR. 1', 'COLOR 2', 'COLOR 3'],
    Icons.color_lens,
  ),
  new Fields(
    'ALERT TYPE',
    ['ALERT 1', 'ALERT 2', 'ALERT 3'],
    Icons.ring_volume,
  ),
  new Fields(
    'VIBRATION TYPES',
    ['VIBRATION 1', 'VIBRATION 2', 'VIBRATION 3'],
    Icons.vibration,
  ),
];

And please check the below solution for it