How to switch images in the list? - flutter

Question

I am getting a list with images. I receive several images, when I click on the image, the _showImageDialog method works for me and an image with buttons for scrolling is displayed (I attached a screenshot below). station.photos![index]. How can I switch to the next image when I click on the button? I tried to change the index but it didn't work for me why?
void _showImageDialog(
BuildContext context, PublicChargingStationModel station) {
int index = 0;
showGeneralDialog(
context: context,
pageBuilder: (context, Animation<double> animation,
Animation<double> secondaryAnimation) {
return SafeArea(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 15),
color: Colors.black.withOpacity(0.6),
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Align(
alignment: Alignment.topRight,
child: GestureDetector(
onTap: () => Navigator.pop(context),
child: SvgPicture.asset(
constants.Assets.closeBold,
color: constants.Colors.greyLight,
height: 26,
),
),
),
),
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () {},
child: SvgPicture.asset(
constants.Assets.arrowLeft,
color: constants.Colors.greyLight,
height: 48,
),
),
const SizedBox(width: 20),
SizedBox(
width: MediaQuery.of(context).size.width / 1.6,
height: MediaQuery.of(context).size.width / 1.1,
child: station.photos!.isNotEmpty
? CachedNetworkImage(
imageUrl: station.photos![index].url,
imageBuilder: (context, imageProvider) =>
Container(
// width: MediaQuery.of(context).size.width / 1.6,
height: 116,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover,
),
),
),
placeholder: (context, url) => Center(
child: Container(
// width: MediaQuery.of(context).size.width / 1.6,
height: 116,
alignment: Alignment.center,
child: const CircularProgressIndicator(
color: constants.Colors.purpleMain,
),
),
),
errorWidget: (context, url, error) => const Icon(
Icons.error,
color: constants.Colors.purpleMain,
),
)
: Image.asset(
constants.Assets.publicStation,
fit: BoxFit.cover,
),
),
const SizedBox(width: 20),
GestureDetector(
onTap: () {
if (index < station.photos!.length) {
setState(() {
index++;
});
station.photos![index].url;
}
},
child: SvgPicture.asset(
constants.Assets.arrowRight,
color: constants.Colors.greyLight,
height: 48,
),
),
],
),
],
),
),
);
},
);
}

Answer 1

i am also facing same issue in mobile development then i know we have to rebuild the whole dialog and then it will work well
Reference for solve this same
int selectedRadio = 0; // Declare your variable outside the builder
return AlertDialog(
content: StatefulBuilder( // You need this, notice the parameters below:
builder: (BuildContext context, StateSetter setState) {
return Column( // Then, the content of your dialog.
mainAxisSize: MainAxisSize.min,
children: List<Widget>.generate(4, (int index) {
return Radio<int>(
value: index,
groupValue: selectedRadio,
onChanged: (int value) {
// Whenever you need, call setState on your variable
setState(() => selectedRadio = value);
},
);
}),
);
},
),
);

Answer 2

When you call setState then it call the build method and a dialog is not a part of this context.so the simple solution is **wrap your dialog with statefulbuilder widget and then you will get a setstate method for dialog. **
You can checkout this video for solution
https://www.google.com/search?q=setstate+in+dialog+johannes+milki&oq=setstate+in+dialog+johannes+milki&aqs=chrome..69i57j33i160l5.11920j0j7&client=ms-android-samsung&sourceid=chrome-mobile&ie=UTF-8#