'How to set different background color to each ListView items in flutter

I've been gone through many tutorials and I'm only able to switch between two colors by checking whether the index is even or odd.

Here is my Code:

class PageTwoState extends State<PageTwo> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemExtent: 250.0,
      itemBuilder: (context, index) => Container(
            padding: EdgeInsets.all(10.0),
            child: Material(
              elevation: 4.0,
              borderRadius: BorderRadius.circular(5.0),
              color: index % 2 == 0 ? Colors.cyan : Colors.deepOrange,
              child: Center(
                child: Text(index.toString()),
              ),
            ),
          ),
    );
  }
}

I want each item to have a different background color(suppose if I have 10 items in my list then I want each item to have a different background color.), but by using a ternary operation I'm not able to do that.

flutterdartcolors


Solution 1:[1]

An option would be to generate random colors and save them in a list to check if they are already used by one of your element. Here is a way of doing so:

List<Color> _alreadyUsedColors = [];

Color _randomColor() {
   Color newColor = Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0);
   while (_alreadyUsedColors.contains(newColor))
      newColor = Color((math.Random().nextDouble() * 0xFFFFFF).toInt())
          .withOpacity(1.0);
   _alreadyUsedColors.add(newColor);
   return newColor;
}

// Then use it like this in your widget
Material(
   elevation: 4.0,
   borderRadius: BorderRadius.circular(5.0),
   color: _randomColor(),
   child: Center(child: Text(index.toString())),
)

You add to your _alreadyUsedColors each new color generated to ensure they are used only once and the _randomColor method will return the color to your Material widget.

Solution 2:[2]

The following is an example that uses ColorTween to create a gradient with consistent beginning and ending colors.

class PageTwoState extends State<PageTwo> {
  ColorTween color = ColorTween(begin: Colors.amberAccent, end: Colors.orangeAccent);
  
  @override
  Widget build(BuildContext context) {
    int listLen = 15; //Input the length of the list you retrieve from firebase here
    //The gradient will adjust for variations in length by itself as your database changes.
    
    return ListView.builder(
      itemCount: listLen,
      itemExtent: 250.0,
      itemBuilder: (context, index) => Container(
            padding: EdgeInsets.all(10.0),
            child: Material(
              elevation: 4.0,
              borderRadius: BorderRadius.circular(5.0),
              color: color.lerp(index/(listLen-1)),
              child: Center(
                child: Text(index.toString()),
              ),
            ),
          ),
    );
  }
}

This will only work with a ListView with a finite length. But it seems you are retrieving a finite List of elements to show from firebase, so this should work out just fine for you. You just have to tell the builder how many elements the List you want to show has.

Solution 3:[3]

void main() {
  final myList = [1, 2];

  for (var i = 0; i < 5; i++) {
    print(myList[i % myList.length]);
  }
}

result

1
2
1
2
1

ListView will work same way

 final _colors = [
    Colors.blue.withOpacity(0.1),
    Colors.red.withOpacity(0.1),
    Colors.yellow.withOpacity(0.1),
    Colors.green.withOpacity(0.1),
  ];

 @override
  Widget build(BuildContext context) {
    return ListView.builder(
          itemCount: data.length,
          itemBuilder: (context, index) {
            return Card(
              color: _colors[index % _colors.length]
              child: ListTile(),
            );
          },
        );

Solution 4:[4]

If you want many of color variation then using the Color class, this class generate millions of random colors, like this:

final _random = Random();

final _randomColor = Color.fromARGB(
          _random.nextInt(256), 
          _random.nextInt(256),
          _random.nextInt(256), 
          _random.nextInt(256)
);

Use that like this:

color: Color.fromARGB(_random.nextInt(256), _random.nextInt(256), _random.nextInt(256), _random.nextInt(256)),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Guillaume Roux
Solution 2
Solution 3 Usama Karim
Solution 4 Paresh Mangukiya

Related Questions