Adding random images one by one on app in flutter

Question

I am having trouble adding random images to the page by using a floating action button. After drawing an image from the .shuffle list, I want to draw another picture from the list. I could add more pictures with the action button, but when pressing the floating action button, it also changed the previous image. As a result, even if I can shuffle the images, I can only get the result of showing a large amount of the same image instead of adding a different image.

The main issue I am facing right now is when adding the second image, the first image would also change to the second image. Therefore, instead of getting two different images after adding, it results in getting two same images. I would like to know how to get different image every time click the button.

 
List stickerList = [];

void addNewImageToList () {
  setState(() {
    stickerList.add(Container(
       width: 250,
       height: 250,
       decoration: BoxDecoration(
        image: DecorationImage(
        image: AssetImage(
           'lib/images/${assetsList[stickerList.length]}'),
        fit: BoxFit.fill,),  
        borderRadius: BorderRadius.circular(50)
    ));
  });
}


body: ListView.builder(
      itemCount: stickerList.length,
      itemBuilder: (context, index) {
        return Column(
          children: [Container(
                    width: 250,
                    height: 250,
                    decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage(
                          'lib/images/${assetsList[stickerList.length]}'),
                    fit: BoxFit.fill,),  
                    borderRadius: BorderRadius.circular(50))
          )],
        );
      },),

floatingActionButton:FloatingActionButton(
          onPressed: () {
          addNewImageToList();},
      heroTag: Icons.group_add,
      child: Icon(Icons.group_add),)

I would like to ask how can I modify it and add a new image from shuffle list every time without affect the previously added image? What logic direction should I go for? Like, disconnecting the previous image with the action button? Generating a shuffle list and call the image accordingly with ascending order without shuffling it every time? I am not quite sure which direction is valid as I am not quite familiar with coding. Thank you.

Gokul Mamanduru · Accepted Answer · 2024-05-16 12:11:15Z

0

you can get a random index within the range of the assetsList length using Random().nextInt(). Then, you can add a new image to stickerList based on the randomly selected index

here is the code what i have done:

import 'dart:math';

List stickerList = [];

void addNewImageToList() {
  setState(() {
    int randomIndex = Random().nextInt(assetsList.length);
    
    stickerList.add(Container(
      width: 250,
      height: 250,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('lib/images/${assetsList[randomIndex]}'),
          fit: BoxFit.fill,
        ),
        borderRadius: BorderRadius.circular(50),
      ),
    ));
  });
}

answered May 16, 2024 at 12:11

Gokul Mamanduru

1216 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zoey Over a year ago

Thank you for the answer! I tried to modify it with random next int. according to your suggestion. I was able to add new random image but after adding one image, both of them are the same image instead of giving two different images. Do you know how to solve this issue? I want the function can add different random image every time when clicking the action button and not overriding the previous added image. Thank you.

Gokul Mamanduru Over a year ago

are you looking for random unique images from the list to be displayed? please explain

Emile · Accepted Answer · 2024-05-16 12:23:31Z

0

The problem is this line in your ListViewBuild code.

image: DecorationImage(
                        image: AssetImage(
                          'lib/images/${assetsList[stickerList.length]}'),

Whilst your builder function will iterate, each iteration will always have the same value of stickerList.length.

The following should be a bit closer to what you need.

List stickerList = [];

void addNewImageToList () {
   // as per Gokuls answer.
  int randomIndex = Random().nextInt(assetsList.length);

  setState(() {
   stickerList.add(randomIndex )
  });
}


body: ListView.builder(
      itemCount: stickerList.length,
      itemBuilder: (context, index) {
        return Column(
          children: [Container(
                    width: 250,
                    height: 250,
                    decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage(
                          'lib/images/${assetsList[stickerList[index]]}'),
                    fit: BoxFit.fill,),  
                    borderRadius: BorderRadius.circular(50))
          )],
        );
      },),

floatingActionButton:FloatingActionButton(
          onPressed: () {
          addNewImageToList();},
      heroTag: Icons.group_add,
      child: Icon(Icons.group_add),)

answered May 16, 2024 at 12:23

Emile

11.7k5 gold badges55 silver badges68 bronze badges

2 Comments

Zoey Over a year ago

I tried the code. I was able to add new random image but after adding one image, both of them are the same image instead of giving two different images. Do you know how to solve this issue? I want the function can add different random image every time when clicking the action button.

Emile Over a year ago

random function is likely issue as it could return the same number each time ,especially if you've only a small number of assets in your assetList. So you'll have to experiment there. Also, make sure you changed the line in the LIstViewBuilder where you assign the assetImage to ensure its assetsList[stickerList[index]] and not still stickerList.length, which you had previously.

Collectives™ on Stack Overflow

Adding random images one by one on app in flutter

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related