Zebra Striped ListView in Flutter Learn how to create a zebra striped list view in a Flutter app

1_In32QK4xZe_oK8ATn-Yepw.gif

introduce:

Imagine you have a list of content on your phone or computer screen. Now, imagine that everything in the list has alternative colors. For example, the primary thing might be white, subsequent things might be black, a third thing might be white again, and so on. This is called a zebra striped list view. Named for its stripes that look like a zebra's. This is expected to make the list more attractive and easier to read. It helps you find what you're searching for faster and better.

How to implement the code in dart file:

You need to implement it in your code separately:

main.dart creates a new dart file named lib inside the folder.

To create a striped ListView in Flutter (using the ListView.builder() constructor), you can utilize the itemBuilder parameter to return an alternate widget with all content based on its index. In most cases, you can use the ternary operator to move backwards and alternate the background of everything between two colors, like this:

ListView.builder(
  itemCount: 132,
  itemBuilder: (context, index) {
    return Container(
      // alternate colors
      color: index % 2 == 0 ? Colors.red : Colors.green, 
      /*...*/
    );
  },
);

First we will generate dummy data for the list

final List<String> it

Guess you like

Origin blog.csdn.net/iCloudEnd/article/details/133300512