Expanded tile with modal - flutter

Question

i'm trying to make custom expanded tile that show and image as a modal if a child is clicked.
For example, if i click Hat no 1 i want that appear an image, if i click Hat no 2 i want that appear a different image, etc
How can i do it?
This is my list
_buildExpandableContent(Clothes clothes) {
List<Widget> columnContent = [];
for (String content in clothes.contents)
columnContent.add(
new ListTile(
title: new Text(content, style: new TextStyle(fontSize: 20.0),),
trailing: new Icon (Icons.keyboard_arrow_right, color: Colors.black, size: 30),
),
);
return columnContent;
}
}
class Clothes {
final String title;
List<String> contents = [];
Clothes(this.title, this.contents);
}
List<Clothes> clothes = <Clothes>[
new Clothes(
'Hats',
['Hat no. 1', 'Hat no. 2', 'Hat no. 3', 'Hat no. 4'],
),
];
This is body
body: ListView.builder(
itemCount: clothes.length,
itemBuilder: (context, i) {
return Container(
margin: EdgeInsets.only(top: 15),
child: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.all(17.0),
child: Column(
children: <Widget>[
Container(
color: Colors.blueAccent,
child: new ExpansionTile(
trailing: Icon (Icons.keyboard_arrow_down_rounded, color: Colors.white, size: 30),
title: new Text(clothes[i].title, style: new TextStyle(color: Colors.white, fontSize: 20,),),
children: <Widget>[
Container(
color:white,
child: new Column(
children: _buildExpandableContent(clothes[i]),
),
),
],
),
)
]
),
),
),
);
},
),

Answer 1

You can create a new class for the clothes items which has a content and an image source:
class Clothes {
final String title;
List<ClothesItem> items = [];
Clothes(this.title, this.items);
}
class ClothesItem {
String content;
String imgSrc;
ClothesItem(this.content, this.imgSrc);
}
List<Clothes> clothes = <Clothes>[
new Clothes(
'Hats',
[
ClothesItem('Hat no. 1', 'https://picsum.photos/200'),
ClothesItem('Hat no. 2', 'https://picsum.photos/200'),
ClothesItem('Hat no. 3', 'https://picsum.photos/200'),
ClothesItem('Hat no. 4', 'https://picsum.photos/200')
],
),
];
Then you need to modify the ListTiles and set showDialog as its onTap method, this dialog shows the corresponding image:
_buildExpandableContent(Clothes clothes) {
List<Widget> columnContent = [];
for (ClothesItem item in clothes.items)
columnContent.add(
new ListTile(
title: new Text(
item.content,
style: new TextStyle(fontSize: 20.0),
),
trailing: new Icon(Icons.keyboard_arrow_right,
color: Colors.black, size: 30),
onTap: () => showDialog(
context: context,
builder: (context) {
return AlertDialog(content: Image.network(item.imgSrc));
}),
),
);
return columnContent;
}