displaying matching id , flutter - flutter

Question

I'm new to flutter, I'm trying to show cards in categories, I've made a module with the categories and items, including id for the categories and matching id for the item(one item can be in multiple categories ) but I don't know how to sort them
this is the main screen
Widget _buildIcon(int index) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: GestureDetector(
onTap: () {
setState(() {
_selectedIndex = index;
String id = DUMMY_CATEGORIES[index].id;
print(id);
});
},
child: Container(
height: 45,
width: 100,
decoration: BoxDecoration(
color: _selectedIndex == index
? Color.fromRGBO(126, 214, 223, 0.5)
: Color.fromRGBO(200, 214, 229,0.3),
borderRadius: BorderRadius.circular(80)),
child: Center(
child: Text(
DUMMY_CATEGORIES[index].title, style: TextStyle(color: _selectedIndex==index ?Color.fromRGBO(16, 172, 132, 1) : Colors.black, ),
),
),
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: <Widget>[
Column(
children: <Widget>[
Container(
padding: EdgeInsets.only(right: 10, top: 20),
alignment: Alignment.topRight,
child: IconButton(
icon: Icon(
Icons.search,
size: 25,
),
)),
Container(
padding: EdgeInsets.only(left: 10),
alignment: Alignment.topLeft,
child: Text(
'Make it Bread',
style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
)),
],
),
SizedBox(
height: 30,
),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: DUMMY_CATEGORIES
.asMap()
.entries
.map((MapEntry map) => _buildIcon(map.key))
.toList()
),
),
NewMealIteam(),
],
),
);
}
}
and this is the item
Widget build(BuildContext context) {
return Padding(padding: EdgeInsets.symmetric(horizontal: 10, vertical: 45),
child: Container(
height: 450,
//color: Colors.orange,
child: ListView.builder(itemCount: mealList.length,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context ,int index){
Meal mealLists = mealList[index];
return Container(
width: 280,
child: Stack(children: <Widget>[
Container(
height: 450,
margin: EdgeInsets.all(10),
padding: EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(20),
color: Colors.red,
image: DecorationImage(
image: AssetImage('assets/dough.png'
),fit: BoxFit.fill
),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 2.0,
spreadRadius: 0.0,
offset: Offset(3.0, 2.0), // shadow direction: bottom right
)
],),
),
Positioned(bottom :20 ,left: 20,child: Column(
children: <Widget>[
Container(width: 170,
padding: EdgeInsets.symmetric(vertical: 25),
child: Text(mealLists.title,style: TextStyle(color:Colors.white,fontSize: 32),textAlign: TextAlign.start,overflow: TextOverflow.fade
,),
),
Padding(
padding: EdgeInsets.all(2),
child: Container(width:220,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row( mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.schedule),
SizedBox(
width: 6,
),
Text('${mealLists.duration} min'),
],
),
Row( mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.work),
SizedBox(
width: 8,
),
],
),
Row( mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.monetization_on),
SizedBox(
width: 6,
),
// Text('${durations} min'),
],
),
],
),
),
)
],
))
],),
);
},
),
),
);
}
}
this is example for the module list
Category(
id: 'c1',
title: 'sour bread',
),
Meal(
id: 'm1',
categories: [
'c1',
'c2',
],
title: 'Sour Dough',
),
thanks