How to assign each value for each index in flutter - ios

Question

I m making an app which display a row of images ( All of them using loop / index from 0-4). The code :
for (int i = 0; i <= 3; i++)
child: Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Container(
width: 300,
height: 300,
color: Colors.accents[i],
child: Image.asset(
"assets/farCryImages/$i.jpg",
alignment: Alignment.center,
fit: BoxFit.cover,
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
elevation: 5,
),
And i wanted to show the user a popup of their name ( i.e : first picture : a , second picture : b etc..). But i can't seem to find a way to do it and I need help.
I tried this but it wont work :
for (int i = 0; i <= 3; i++)
Padding(
padding: const EdgeInsets.fromLTRB(20, 20, 0, 0),
child: GestureDetector(
onLongPress: () => showDialog(
context: context,
builder: (BuildContext context) => AlertDialog(
title: Text("$i"),
),
),
I wanted to change the $i into specific name for specific photos.
Full code :
child: Row(
children: [
for (int i = 0; i <= 3; i++)
Padding(
padding: const EdgeInsets.fromLTRB(20, 20, 0, 0),
child: GestureDetector(
onLongPress: () => showDialog(
context: context,
builder: (BuildContext context) => AlertDialog(
title: Text("$i"),
),
),
child: Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Container(
width: 300,
height: 300,
color: Colors.accents[i],
child: Image.asset(
"assets/farCryImages/$i.jpg",
alignment: Alignment.center,
fit: BoxFit.cover,
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
elevation: 5,
),
),
)
],
),
Any help is appreciated !!!

Answer 1

I am not sure about your question. However, if you want to loop through different names for images, you should use a string list for their names:
List<String> imageName = [
"first image",
"second image",
// and so on
]
Then, call them in your loop:
onLongPress: () => showDialog(
context: context,
builder: (BuildContext context) => AlertDialog(
title: Text(imageName[i]),
),
),
Also, for better solution, I suggest to use a class for each image:
class ImageItem{
String name;
String path;
// and other parameters like id
// and a constructor
}
Then create a list of this class and use them in your loop.

Answer 2

First of all, Create a Stateful Widget class for the objects of interest like so:
class CardObject extends StatefulWidget {
final String title;
final String image;
final Color color;
const CardObject(this.title, this.image, this.color);
#override
_CardObjectState createState() => _CardObjectState();
}
class _CardObjectState extends State<CardObject> {
#override
Widget build(BuildContext context) {
return Container(
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 20, 0, 0),
child: GestureDetector(
onLongPress: () => showDialog(
context: context,
builder: (BuildContext context) => AlertDialog(
title: Text(widget.title),
),
),
child: Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Container(
width: 300,
height: 300,
color: widget.color,
child: Image.asset(
"assets/farCryImages/${widget.image}",
alignment: Alignment.center,
fit: BoxFit.cover,
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
elevation: 5,
),
),
),
);
}
}
Then create a list to hold the CardObjects:
//List of CardObjects
final List<CardObject> cardObjects = [
CardObject('title 1', 'image1.jpg', Colors.red),
CardObject('title 2', 'image2.jpg', Colors.blue),
CardObject('title 3', 'image3.jpg', Colors.orange),
CardObject('title 4', 'image4.jpg', Colors.grey),
];
Display your objects like this:
#override
Widget build(BuildContext context) {
return Container(
child: Row(
children: cardObjects,
),
);
}