How to make alternating color datatable rows like "zebra"

Question

I am trying to make a table similar to the example that I will give below. In the example, the rows of the table alternate colors gray with white. I have a datatable that contains data from the MySQL database, I do not know the specific number of rows, they changing depending on the amount of data. By this logic, I think I need a counter that will count the number of rows, and if we say the line is even, then it will fill it in gray. But I'm new to Flutter, and I don't know how to implement this here. I would also like to ask what kind of widget is used at the top of the page in the example. It looks like a tabbar, is it?

Answer 1

For list of elements you can use ListView and choose needed color in itemBuilder like this:

ListView.builder(
  reverse: true,
  itemBuilder: (BuildContext context, int position) {
    Color color = position.isOdd ? Colors.black12 : Colors.white; //choose color
    return ColoredWidget(color); // some widget with color background
  },
  itemCount: snapshot.data.questionList.length,
)

UPD for DataTable:

It seems that you can't.
If you look in method build in DataTable class - it generates List<TableRow> and returns Table with it list of rows:

final List<TableRow> tableRows = List<TableRow>.generate(
      rows.length + 1, // the +1 is for the header row
      (int index) {
        return TableRow(
          key: index == 0 ? _headingRowKey : rows[index - 1].key,
          decoration: index > 0 && rows[index - 1].selected ? _kSelectedDecoration
                                                            : _kUnselectedDecoration,
          children: List<Widget>(tableColumns.length),
        );
      },
    );

I believe there is only way - to make custom DataTable - copy this class to your project and change this place like:

final BoxDecoration _customGrayDecoration = BoxDecoration(
  color: Color(0x1F000000),
);

return TableRow(
          key: index == 0 ? _headingRowKey : rows[index - 1].key,
          decoration: index > 0 && rows[index - 1].selected
              ? _kSelectedDecoration
              :
          index > 0 && index.isOdd
              ? _customGrayDecoration
              : _kUnselectedDecoration,
          children: List<Widget>(tableColumns.length),
        );