Flutter - NetworkImage not changing or the selected gridview - flutter

Question

I am trying to get images from firebase storage, then switch the image from the current to the image I selected. When I select an image, the color should turn from grey to green and switch the image using the index, however it doesn't replace the image nor the color when selected, I added a setState for the index and added a "?v=${Random().nextInt(100)}" to it so that it refreshes everytime something is selected, but still nothing happens, how can I fix that
code for the page
import 'dart:developer';
import 'dart:math';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gg_gg/cardGridView.dart';
class page3 extends StatefulWidget {
const page3({Key? key}) : super(key: key);
#override
State<page3> createState() => _page3State();
}
class _page3State extends State<page3> {
List<String> free_banners = ["freebanner1.jpg", "freebanner2.jpg", "freebanner3.jpg", "uae.jpg", "usa.jpg"];
Future<List<String>> getImages() async{
List<String> x = [];
for(var i = 0; i<free_banners.length; i++){
String url = await FirebaseStorage.instance.ref().child("calling_cards/").child(free_banners[i]).getDownloadURL();
x.add(url);
}
return x;
}
#override
Widget build(BuildContext context) {
int ind = 0;
void checkOption(int index, String url){
setState(() {
ind = index;
print(ind.toString());
});
}
return Scaffold(
backgroundColor: Colors.black,
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FutureBuilder(
future: getImages(),
builder: (BuildContext context, AsyncSnapshot snapshot){
return Container(
height: 300.h,
width: 150.w,
decoration: BoxDecoration(
color: Colors.red,
image: DecorationImage(
image: NetworkImage(snapshot.data[ind].toString() + "?v=${Random().nextInt(100)}")
)
),
);
}
),
SizedBox(width: 30.w,),
SizedBox(
height: 932.h,
width: 200.w,
child: FutureBuilder(
future: getImages(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
return GridView.builder(
itemCount: 5,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
mainAxisSpacing: 10,
crossAxisSpacing: 5
),
itemBuilder: (BuildContext context, int index){
return cardGridView(
imageURL: snapshot.data[index].toString(),
onTap: () => checkOption(index, snapshot.data[index].toString()),
selected: ind == index,
);
},
);
}
),
)
],
),
),
);
}
}
code for cardGridView
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
class cardGridView extends StatelessWidget {
const cardGridView({Key? key, this.imageURL, this.onTap, this.selected}) : super(key: key);
final String? imageURL;
final VoidCallback? onTap;
final bool? selected;
#override
Widget build(BuildContext context) {
return InkWell(
onTap: onTap,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Container(
height: 300.h,
width: 150.w,
color: selected?? false? Colors.green:Colors.grey,
child: Image.network(imageURL!),
),
),
);
}
}
Thanks.
UPDATE
turns out the problem was with the ind variable, since it's in the build widget, it will always stay 0, therefore if placed outside the build widget, then it can change.
here is the updated code:
import 'dart:developer';
import 'dart:math';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gg_gg/cardGridView.dart';
class page3 extends StatefulWidget {
const page3({Key? key}) : super(key: key);
#override
State<page3> createState() => _page3State();
}
class _page3State extends State<page3> {
List<String> free_banners = ["freebanner1.jpg", "freebanner2.jpg", "freebanner3.jpg", "uae.jpg", "usa.jpg"];
Future<List<String>> getImages() async{
List<String> x = [];
for(var i = 0; i<free_banners.length; i++){
String url = await FirebaseStorage.instance.ref().child("calling_cards/").child(free_banners[i]).getDownloadURL();
x.add(url);
}
return x;
}
int ind = 0;
#override
Widget build(BuildContext context) {
String card = "https://firebasestorage.googleapis.com/v0/b/ableflyerdatabase.appspot.com/o/calling_cards%2Ffreebanner1.jpg?alt=media&token=a0a6c01c-dc02-412c-8942-60ff25215c9d";
void checkOption(int index, String url){
setState(() {
ind = index;
card = url;
print(card);
print(ind.toString());
});
}
return Scaffold(
backgroundColor: Colors.black,
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FutureBuilder(
future: getImages(),
builder: (BuildContext context, AsyncSnapshot snapshot){
return Container(
height: 300.h,
width: 150.w,
decoration: BoxDecoration(
color: Colors.red,
image: DecorationImage(
image: NetworkImage(snapshot.data[ind].toString() + "?v=${Random().nextInt(100)}")
)
),
);
}
),
SizedBox(width: 30.w,),
SizedBox(
height: 932.h,
width: 200.w,
child: FutureBuilder(
future: getImages(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
return GridView.builder(
itemCount: free_banners.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
mainAxisSpacing: 10,
crossAxisSpacing: 5
),
itemBuilder: (BuildContext context, int index){
return cardGridView(
imageURL: snapshot.data[index].toString(),
onTap: (){
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
setState(() {
ind = index;
card = snapshot.data[index].toString();
print(card);
print(ind.toString());
});
});
},
selected: ind == index,
);
},
);
}
),
)
],
),
),
);
}
}