Random sources for infinite scrolling GridView items - flutter

Question

I want to have an infinite scrolling GridView page in which items have different sources, which is defined by randomly_select_URL function in my code. I need each item to have a different random_select_URL and selectedImage value while after running my code, all of the items are the same. Could anyone help with this?
The main page code
import 'package:flutter/material.dart';
import 'package:pet_store/utils/utils.dart';
import 'package:pet_store/widgets/random_pet_image.dart';
import 'webservice/API.dart';
import 'main.dart';
class Infinite_Scroll_Game extends StatefulWidget {
const Infinite_Scroll_Game({Key? key}) : super(key: key);
#override
State<Infinite_Scroll_Game> createState() => _Infinite_Scroll_GameState();
}
class _Infinite_Scroll_GameState extends State<Infinite_Scroll_Game> {
ScrollController _scrollController = ScrollController();
int pageNumber = 1;
var myRecipe;
#override
void initState() {
super.initState();
_scrollController.addListener(() {
if (_scrollController.position.pixels ==
_scrollController.position.maxScrollExtent) {
pageNumber++;
setState(() {});
}
});
}
#override
void dispose() {
_scrollController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
backgroundColor: Colors.indigo,
title: const Text('Infinite Scroll Game'),
leading: GestureDetector(
child: const Icon(
Icons.arrow_back_ios,
color: Colors.white,
),
onTap: () {
// Navigator.pop(context);
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(
builder: (BuildContext context) => const HomePage(),
),
(route) => false,
);
},
),
),
body: Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 12.0),
child: FutureBuilder<List<dynamic>>(
future: API.get_pets(randomly_select_URL()),
builder: (context, snapshot) {
if (snapshot.hasData) {
List<dynamic>? pet_data = snapshot.data;
var number_of_parameters = snapshot.data!.length;
var random_pet = random.nextInt(number_of_parameters);
return GridView.builder(
controller: _scrollController,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 12.0,
mainAxisSpacing: 12.0,
),
itemBuilder: (BuildContext context, int index) {
return Random_Image_Card(
pet_data: pet_data, random_pet: random_pet);
},
);
} else if (snapshot.hasError) {
return Center(
child: Text('There was an error, Please try again'),
);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
},
),
),
);
}
}
The item code:
import 'package:double_back_to_close/toast.dart';
import 'package:flutter/material.dart';
import 'package:pet_store/utils/utils.dart';
class Random_Image_Card extends StatefulWidget {
List<dynamic>? pet_data;
int random_pet;
int current_index = 0;
Random_Image_Card(
{this.pet_data, required this.random_pet, Key? key})
: super(key: key);
#override
State<Random_Image_Card> createState() => _Random_Image_CardState();
}
class _Random_Image_CardState extends State<Random_Image_Card> {
List<dynamic> photoURL = [];
var number_of_photos;
var selectedImage;
#override
void initState() {
photoURL = widget.pet_data![widget.random_pet].photoUrls;
number_of_photos = photoURL.length;
selectedImage = random.nextInt(number_of_photos);
}
#override
Widget build(BuildContext context) {
return Column(
children: [
SizedBox(
height: 180,
width: 180,
child: Card(
child: Container(
decoration: (photoURL.length != 0)
? BoxDecoration(
image: DecorationImage(
alignment: Alignment.center,
image: image(photoURL[selectedImage]).image,
fit: BoxFit.scaleDown),
)
: const BoxDecoration(
image: DecorationImage(
alignment: Alignment.center,
image: NetworkImage(
"https://cdn-cziplee-estore.azureedge.net//cache/no_image_uploaded-253x190.png"),
fit: BoxFit.scaleDown),
),
child: Text(""),
),
),
),
],
);
}
}

Answer 1

I added FutureBuilder to the item and just added the item in the main page and it fixed,
import 'package:double_back_to_close/toast.dart';
import 'package:flutter/material.dart';
import 'package:pet_store/utils/utils.dart';
import '../webservice/API.dart';
class Random_Image_Card extends StatefulWidget {
const Random_Image_Card({Key? key}) : super(key: key);
#override
State<Random_Image_Card> createState() => _Random_Image_CardState();
}
class _Random_Image_CardState extends State<Random_Image_Card> {
List<dynamic>? pet_data;
int random_pet = 0;
int current_index = 0;
List<dynamic> photoURL = [];
var number_of_photos;
var selectedImage;
var random_URL;
#override
Widget build(BuildContext context) {
random_URL = randomly_select_URL();
return FutureBuilder<List<dynamic>>(
future: API.get_pets(random_URL),
builder: (context, snapshot) {
if (snapshot.hasData) {
List<dynamic>? pet_data = snapshot.data;
var number_of_parameters = snapshot.data!.length;
var random_pet = random.nextInt(number_of_parameters);
photoURL = pet_data![random_pet].photoUrls;
number_of_photos = photoURL.length;
selectedImage = random.nextInt(number_of_photos);
return Column(
children: [
SizedBox(
height: 180,
width: 180,
child: Card(
child: Container(
decoration: (photoURL.length != 0)
? BoxDecoration(
image: DecorationImage(
alignment: Alignment.center,
image: image(photoURL[selectedImage]).image,
fit: BoxFit.scaleDown),
)
: const BoxDecoration(
image: DecorationImage(
alignment: Alignment.center,
image: NetworkImage(
"https://cdn-cziplee-estore.azureedge.net//cache/no_image_uploaded-253x190.png"),
fit: BoxFit.scaleDown),
),
child: Text(""),
),
),
),
],
);
} else if (snapshot.hasError) {
return const Center(
child: Text('There was an error, Please try again'),
);
} else {
return const Center(
child: CircularProgressIndicator(),
);
}
},
);
}
}