CODEWITHSUNDEEP
flutter
Smith
Smith

Reputation: 591

How to make alternating color datatable rows like "zebra"

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? enter image description here

Upvotes: 4

Views: 7784

Answers (4)

septijo g
septijo g

Reputation: 1

DataRow myRow(int rowNum) {
    return DataRow(
        color: WidgetStateProperty.resolveWith((_) {
            return rowNum % 2 == 0 ? Colors.grey.shade300 : null;
        }),
        cells: [
            ... myCells(),
          ],
    );
}

Upvotes: 0

Syed Ali Mehdi
Syed Ali Mehdi

Reputation: 51

We can have alternate rows of table are colored Acheiving this by using Table Widget

List<String> fields = ['String1','String2','String3']


Table(
      children: [
              for(int x=0;x<fields.length;x++)
                  TableRow(
                          decoration: BoxDecoration(
                          color: x%2==0?Colors.grey:Colors.white,),
                          children: [
                              Text(fields[x]),
                              Text(fields[x]),
                          ]
                     )
               ]
       ),

Upvotes: 0

Gabriel
Gabriel

Reputation: 27

You can use SELECTED like this:

DataRow(
    selected: index % 2 == 0 ? true : false,
    cells: <DataCell>[
          DataCell(Text("data")),
          DataCell(Text("data")),

]);

Upvotes: 1

Andrii Turkovskyi
Andrii Turkovskyi

Reputation: 29438

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),
        );

Upvotes: 3

Related Questions