Alternating background colors on ListView.builder

Question

I have a ListView.builder generating ListTiles from a List. I would like to achieve an alternating color like you would a typical list.

Is there a Flutter official way to do this? Or I'm stuck with doing something like

ListView.builder(
...
  itemBuilder: (...) {
    return ListTile
      ..
      title: Container(
        decoration: BoxDecoration(color: Colors.grey),
          child: Column(children: <Widget>[
            Text("What should've been the title property"),
            Text("and its trailing"),
          ],),
      ),

or something to that effect?

Heyes

you have an index passed to itemBuilder - just use it – Invariant

@Invariant I'd like to get an answer on how to style it, specifically, thank you. I can use the index to determine whether it's odd or even. – Heyes

Answer 1

Got it.

Instead of using ListTile I can use a Card to have the color property accessible. Then with @pskink's suggestion, I can use the index to determine whether it's odd or even.

Heyes

You can also just wrap the ListTile in Container and set its color. – Ascension

Answer 2

You can use the index provided to the item builder to set the color, and if you want to use a ListTile you can easily give it a background color by wrapping it in a Container:

ListView.builder(
  itemBuilder: (BuildContext context, int index) {
    return Container(
      color: (index % 2 == 0) ? Colors.red : Colors.green,
      child: ListTile(
        title: ...
      ),
    );
  },
)

Ascension

How can I add more colors .I have 10 lists and i want to add 10 different colors how can i achieve this – Barrelchested

Try changing the logic to index % 10 and use a switch statement. – Ascension

Small note, but you can use index.isEven. – Electroencephalogram

Answer 3

The way I did it is by setting up my list then creating a method where the return type is Color and the parameter passed in is the index.

Color selectedColour(int position) {
  Color c;
  if (position % 3 == 0) c = Colours.cTLightBlue;
  if (position % 3 == 1) c = Colours.cTMidBlue;
  if (position % 3 == 2) c = Colours.cTDarkBlue;
  return c;
}

In the Color named parameter call selectedColour and you'll have colours alternate the way you'd want.

Mythology

Answer 4

You can do something like :

@override
Widget build(BuildContext context) {
  Color? color;
  ...
  itemBuilder: (BuildContext context, int index) {

            var value = list[index];
            if(index > 0){
              var preValue= list[index-1];
              if(preValue != value) color = color == null ? const Color.fromRGBO(0, 0, 250, 0.1) : null;
            }

  ...

Mahout