How to loop list variable in flutter

Question

I'm trying to apply random colors to the list view generated widgets in flutter. here is the example.

this is a list view generated list , and different colors on each widget.

here is how I did that

ListView.separated(
              physics: const BouncingScrollPhysics(),
              shrinkWrap: true,
              itemCount: docList.length,
              scrollDirection: Axis.horizontal,
              itemBuilder: (BuildContext context, int index) {
                final data = docList[index];
                return Row(
                  children: [
                    DocLIstCard(
// here is the color list to apply different colors to each of the generated widget.
                      backgroundColor: AppColors.gradientIndex[index], 
                      category: data.sectionName,
                      docImage: data.image,
                      docName: data.name,
                    ),
                  ],
                );
              },
              separatorBuilder: (BuildContext context, int index) {
                return const SizedBox(width: 20);
              },
            ),

and here is the AppColors.gradientIndex[index]'s variable

 static const gradientIndex = [
    LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [Color(0xFF111A8A), Color(0xFFB1008A)],
    ),
    LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [Color(0xFFE97000), Color(0xFFB1008A)],
    ),
    LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [Color(0xFF111A8A), Color(0xFFB1008A)],
    ),
    LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [Color(0xFFE97000), Color(0xFFB1008A)],
    ),
  ];

if there are 1000 of widgets, I've to write the colors list 1000 times, so how can I loop this???

try backgroundColor: AppColors.gradientIndex[index % AppColors.gradientIndex.length], — mmcdon20
– mmcdon20, Commented Jun 19, 2022 at 5:25
@mmcdon20 if you do that you will get out of range exception, for instance, if the index is 20: 20 / 4 = 5, 5 is out of range in the gradientIndex list — Fabián Bardecio
– Fabián Bardecio, Commented Jun 19, 2022 at 5:55
@FabiánBardecio No, it will not get an out of range exception. The code I suggested uses mod (%) not division, 20 % 4 = 0 and 0 is not out of range of the list, nor will it be out of range with any other value for index. — mmcdon20
– mmcdon20, Commented Jun 19, 2022 at 6:05
Oh mb, you're right, didn't notice the %, that works as expected if you want to iterate the list of gradients, it's not random though — Fabián Bardecio
– Fabián Bardecio, Commented Jun 19, 2022 at 6:44
@FabiánBardecio no it isn't random, it will produce a repeating (aka looped) pattern that repeats the gradientIndex list. To be honest, from reading the question I'm not 100% certain if what he wants is a random selection or a looped pattern. — mmcdon20
– mmcdon20, Commented Jun 19, 2022 at 7:04

Sayyid J · Accepted Answer · 2022-06-19 06:44:42Z

1

you use 2 different gradient, simple use odd or even number based on your index

DocLIstCard(
// here is the color list to apply different colors to each of the generated widget.
                      backgroundColor: getGradient(index), 
                      category: data.sectionName,
                      docImage: data.image,
                      docName: data.name,
                    ),

LinearGradient getGradient (int index) {
 if(index.isEven){
      return LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [Color(0xFF111A8A), Color(0xFFB1008A)],
    ),
    }
    else {
      return LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [Color(0xFFE97000), Color(0xFFB1008A)],
    ),
    }

answered Jun 19, 2022 at 6:44

Sayyid J

1,5831 gold badge7 silver badges23 bronze badges

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

Comments

Fabián Bardecio · Accepted Answer · 2022-06-19 05:53:32Z

0

You can use the dart math library to get a random number, just like this:

import 'dart:math';

final colorListIndex = Random().nextInt(4);

This will return a random number between 0 and 3, which you can then use as the index for the AppColors.gradientIndex[index] list.

answered Jun 19, 2022 at 5:53

Fabián Bardecio

2592 silver badges8 bronze badges

Comments

ABV · Accepted Answer · 2022-06-19 06:06:43Z

Try this

ListView.separated(
              physics: const BouncingScrollPhysics(),
              shrinkWrap: true,
              itemCount: docList.length,
              scrollDirection: Axis.horizontal,
              itemBuilder: (BuildContext context, int index) {
                final data = docList[index];
                return Row(
                  children: [
                    DocLIstCard(
// here is the color list to apply different colors to each of the generated widget.
                      backgroundColor: AppColors.gradientIndex[Random().nextInt(4)], 
                      category: data.sectionName,
                      docImage: data.image,
                      docName: data.name,
                    ),
                  ],
                );
              },
              separatorBuilder: (BuildContext context, int index) {
                return const SizedBox(width: 20);
              },
            ),

Collectives™ on Stack Overflow

How to loop list variable in flutter

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related