Random sources for infinite scrolling GridView items

Viewed 39

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(""),
            ),
          ),
        ),
      ],
    );
  }
}
1 Answers

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(),
          );
        }
      },
    );
  }
}
Related