Expanded list view in flutter

In this article, we will see how to implement the ExpansionTile in Listview builder or list view.

First step, we need the data model like below.

class HeadingModel {
   String? heading;
   num? subHeadingCount;
   List<SubHeadingModel>? subHeadings;


   HeadingModel({
     this.heading,
     this.subHeadingCount,
     this.subHeadings
  });
}

class SubHeadingModel {
  String? name;
  String? price;

  SubHeadingModel({
    this.name,
    this.price,
  });
}

For heading we need one model and for sub heading more model.

Now we need to show this data in the list view like below.

ListView.builder(
    itemCount: locationSearchCtrl.timeTableData.length,
    itemBuilder: (context, i) {
      return Container(
        padding: EdgeInsets.all(8),
        margin: EdgeInsets.all(8),
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(8),
            boxShadow: [
              BoxShadow(
                  color: Colors.grey.shade200,
                  spreadRadius: 4,
                  blurRadius: 4,
                  offset: Offset(0, 2))
            ]),
        child: Theme(
            data: Theme.of(context)
                .copyWith(dividerColor: Colors.transparent),
            child: ExpansionTile(
              textColor: Colors.indigo,
              iconColor: Colors.indigo,
              title: getTheHeading(
                  locationSearchCtrl.timeTableData[i]),
              children: <Widget>[
                Align(
                  alignment: Alignment.topLeft,
                  child: Wrap(
                    children: _buildExpandableContent(
                        locationSearchCtrl.timeTableData[i]),
                  ).paddingOnly(left: 4, bottom: 4),
                ),
              ],
            )),
      );
    },
  )

_buildExpandableContent(HeadingModel timeTableModel) {
  List<Widget> columnContent = [];

  if (timeTableModel.subHeadings?.isNotEmpty == true) {
    for (SubHeadingModel data
        in timeTableModel.subHeadings as List<SubHeadingModel>)
      columnContent.add(InkWell(
        onTap: () {
         
        },
        child: Container(
            padding: EdgeInsets.all(8),
            margin: EdgeInsets.all(4),
            decoration: BoxDecoration(
                color: Colors.grey.shade200,
                borderRadius: BorderRadius.all(Radius.circular(10.0))),
            child: Text(
              data.price ?? '',
              style: TextStyle(fontSize: 16),
              textAlign: TextAlign.center,
            )),
      ));

    return columnContent;
  }
}

Widget getTheHeading(HeadingModel timeTableData) {
  return Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Flexible(
          child: Text(
        timeTableData.name ?? '',
        style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w800),
      )),
      Container(
        width: 40,
        height: 40,
        decoration: BoxDecoration(
          color: Colors.indigo,
          borderRadius: BorderRadius.all(Radius.circular(20.0))
        ),
        alignment: Alignment.center,
        child: Text(
          '${timeTableData.subHeadingCount.toString()}',
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 18.0,color: Colors.white, fontWeight: FontWeight.w800),
        ),),
    ],
  );
}

In this article nothing much to explain just want to share my knowledge. If you like it please clap for me.