Create a Color-Cycling ListView in Flutter

Introduction

Adding alternating colors to a ListView in Flutter is an effective way to make list items more visually engaging. This guide demonstrates how to implement a color-cycling ListView in Flutter, where each item cycles through a predefined set of colors—red, green, and blue—repeating in sequence. The approach leverages Flutter’s ListView.builder and simple logic to create an intuitive and colorful UI.

Objective

This tutorial explains how to dynamically assign alternating colors to items in a ListView. The goal is to create a ListView where each item alternates between red, green, and blue, cycling through the colors in a loop.

Key Steps

To achieve this, two lists are required:

• Item List: This contains the data to be displayed in the ListView.

• Color List: A list of colors (in this case, red, green, and blue) to be applied to the background of each item.

Full Code:

import 'package:flutter/material.dart';

class ColorList extends StatefulWidget {
  const ColorList({super.key});

  @override
  State<ColorList> createState() => _ColorListState();
}

class _ColorListState extends State<ColorList> {

  // List of animal names to display
  List<String> animals = [
    'Lion',
    'Tiger',
    'Elephant',
    'Giraffe',
    'Zebra',
    'Panda',
    'Kangaroo',
    'Cheetah',
    'Penguin',
    'Koala'
  ];

  // List of colors (Red, Green, Blue)
  List<Color> colorList = [Colors.red, Colors.green, Colors.blue];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('Color List',style: TextStyle(color: Colors.white,fontWeight: FontWeight.w500),),
      ),
      body: SafeArea(
        child: ListView.builder(
          itemCount: animals.length,// Number of list items
          itemBuilder: (context, index) {
            return Container(
              margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
              width: double.infinity,
              alignment: Alignment.center,
              padding: const EdgeInsets.symmetric(vertical: 12),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                  color: colorList[index%3] // Cycle through colors
              ),
              child: Text(
                animals[index],
                style: const TextStyle(
                    fontSize: 20,
                    color: Colors.white,
                    fontWeight: FontWeight.w500),
              ),
            );
          },
        ),
      ),
    );
  }
}

Code Explaination:

ListView.builder: This method is used to build a scrollable list where each item can be dynamically created based on its index. The two main parameters are:

• itemCount: Defines the number of items to be displayed, in this case, based on the length of the animals list.
• itemBuilder: A function that returns a Container widget for each item in the list, setting its background color and displaying the corresponding animal name.

Color Cycling Logic: The colorList contains the three colors: red, green, and blue. The modulo operator (%) is used to cycle through the color list. For example:

• For index 0, colorList[0 % 3] gives the first color (red).
• For index 1, colorList[1 % 3] gives the second color (green).
• For index 2, colorList[2 % 3] gives the third color (blue).
• This cycle repeats for subsequent indices, ensuring the colors alternate consistently.

UI Customization: Each list item is placed inside a Container widget with a margin, padding, and rounded corners for visual appeal. The Text widget inside the container displays the corresponding animal name, with custom font styling for better readability.

Output:

Conclusion:

Creating a color-cycling ListView in Flutter is a simple and effective way to enhance the user interface. By using a color list and the modulo operator, alternating colors can be easily applied to a list’s background, improving visual clarity. This approach can be adapted to any Flutter application that requires a dynamic list with alternating colors.