Unable to display the list properly in flutter - flutter

Question

I am trying to display a list in flutter. The list has 2 parts, one is the parent name and under that, I have the subcategories. I am fetching the data using an API and trying to create checkboxes using the fetched data. I am unable to understand how to display the lists properly. As posted in the image, the main header is being displayed equal to the number of categories it holds. I want to display a single header and the subcategories under it. Kindly Help.
Function for List Builder
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return Column(
children: [
ExpansionTile(
title: Text(snapshot.data[index].p_cat_name),
children: [
ListTile(
title: Text(snapshot.data[index].c_cat_name),
leading: Checkbox(
value: CategoriesDsiplay.userStatus[index] =
!CategoriesDsiplay.userStatus[index],
onChanged: (bool? val) {
setState(() {
CategoriesDsiplay.userStatus[index] =
!CategoriesDsiplay.userStatus[index];
});
},
),
),
],
),
],
);
},
);
Function for adding data to the list
Future<List<CategoryFiltersList>> getCategoryList() async {
var url = Uri.parse(
urlhere );
final headers = {'Content-Type': 'application/x-www-form-urlencoded'};
Map<String, dynamic> body = {
'st_search': '',
};
final encoding = Encoding.getByName('utf-8');
Response response = await post(
url,
headers: headers,
body: body,
encoding: encoding,
);
var schemeBody = response.body;
var jsonData = json.decode(schemeBody);
List<CategoryFiltersList> categoryFiltersLists = [];
for (var sch in jsonData) {
// String credentials = sch['isin'];
// Codec<String, String> stringToBase64 = utf8.fuse(base64);
// Body.encoded =
// stringToBase64.encode(credentials); // dXNlcm5hbWU6cGFzc3dvcmQ=
CategoryFiltersList categoryFiltersList = CategoryFiltersList(
sch['mf_cat_id'],
sch['p_cat_name'],
sch['c_cat_name'],
);
if (sch['mf_cat_id'] != null) {}
categoryFiltersLists.add(categoryFiltersList);
CategoriesDsiplay.userStatus.add(false);
}
return categoryFiltersLists;
}
Json Data:
flutter: [{mf_cat_id: 6, p_cat_name: EQUITY, c_cat_name: Value_Fund}, {mf_cat_id: 7, p_cat_name: EQUITY, c_cat_name: Large_Cap}, {mf_cat_id: 8, p_cat_name: EQUITY, c_cat_name: Large_&_Midcap}, {mf_cat_id: 9, p_cat_name: EQUITY, c_cat_name: Multicap}, {mf_cat_id: 10, p_cat_name: EQUITY, c_cat_name: Midcap}, {mf_cat_id: 11, p_cat_name: EQUITY, c_cat_name: Small_Cap}, {mf_cat_id: 13, p_cat_name: EQUITY, c_cat_name: Focussed_Fund}, {mf_cat_id: 14, p_cat_name: EQUITY, c_cat_name: Dividend_Yield_Fund}, {mf_cat_id: 15, p_cat_name: HYBRID, c_cat_name: Arbitrage_Fund}, {mf_cat_id: 16, p_cat_name: HYBRID, c_cat_name: Conservative_Hybrid_Fund}, {mf_cat_id: 17, p_cat_name: HYBRID, c_cat_name: Equity_Savings_Fund}, {mf_cat_id: 18, p_cat_name: HYBRID, c_cat_name: Dynamic_Asset_Allocation_Fund}, {mf_cat_id: 19, p_cat_name: HYBRID, c_cat_name: Balanced_Advantage_Fund}, {mf_cat_id: 20, p_cat_name: HYBRID, c_cat_name: Aggressive_Hybrid_Fund}, {mf_cat_id: 21, p_cat_name: HYBRID, c_cat_name: Multi_Assest_Allocatio<…>

Answer 1

Your ListView.builder builds this for every one of your responses:
Column(
children: [
ExpansionTile(
title: Text(snapshot.data[index].p_cat_name),
children: [
ListTile(
title: Text(snapshot.data[index].c_cat_name),
leading: Checkbox(
value: CategoriesDsiplay.userStatus[index] =
!CategoriesDsiplay.userStatus[index],
onChanged: (bool? val) {
setState(() {
CategoriesDsiplay.userStatus[index] =
!CategoriesDsiplay.userStatus[index];
});
},
),
),
],
),
],
);
The problem with this is that your app builds a new ExpansionTile for every element in your response list.
To fix this you have to find out which and how many 'p_cat_name's your response has and build an ExpansionTile for every p_cat_name. As a child it should have another ListView.builder that builds a ListTile for every element from response array that has the same p_cat_name as the parent (you can do this with if statement checks).