1

I have data table and I changed the color of all the rows in this way:

class _SimpleTableState extends State<SimpleTable> {
  @override
  Widget build(BuildContext context) {
    return DataTable(
       dataRowColor: 
         MaterialStateColor.resolveWith((states) => Colors.lightGreen),
      columns: initHeader(),
      rows: initRows(),
    );
  }

But how to change the color of only one row, e.g. with index 1?

initRows():

  List<DataRow> initRows() {
    List<DataRow> items = [];
    var itemList = widget.items;
    for (var r = 0; r < itemList.length; r++) {
      items.add(createRow(itemList[r]));
    }
    return items;
  }

xzxzxzxzxxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxxzxzxzzxzxzxzxzxzxxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxxzxzxzxzxxzxzx

Edit after use solution (all code):

import 'package:flutter/material.dart';
import 'package:warehouse/components/simpleTable/headerTable.dart';

class SimpleTable extends StatefulWidget {
  final List<HeaderTable> headerList;
  final List<dynamic> items;

  SimpleTable(this.headerList, this.items);

  @override
  _SimpleTableState createState() => _SimpleTableState();
}

class _SimpleTableState extends State<SimpleTable> {
  var _highlightIndex = 1;
  @override
  Widget build(BuildContext context) {
    return DataTable(
      dataRowColor:
          MaterialStateColor.resolveWith((states) => Colors.lightGreen),
      columns: initHeader(),
      rows: initRows(_highlightIndex),
    );
  }

  List<DataColumn> initHeader() {
    List<DataColumn> header = [];
    for (var i = 0; i < widget.headerList.length; i++) {
      header.add(new DataColumn(
          label: Flexible(
        child: Text(
          widget.headerList[i].name,
          style: TextStyle(fontStyle: FontStyle.italic),
        ),
      )));
    }
    return header;
  }

  DataCell createCell(String text) {
    return DataCell(Flexible(
        child: Text(
      text,
    )));
  }

  List<DataRow> initRows(int highlightIndex) {
    List<DataRow> items = [];
    var itemList = widget.items;
    for (var r = 0; r < itemList.length; r++) {
      if (r == highlightIndex) {
        items.add(createRow(itemList[r],
            color: MaterialStateProperty.all(Colors.red)));
      } else {
        items.add(createRow(itemList[r]));
      }
    }
    return items;
  }

  DataRow createRow(Map item, {MaterialStateProperty<Color> color}) {
    var headerList = widget.headerList;
    List<DataCell> cell = [];
    for (var i = 0; i < headerList.length; i++) {
      cell.add(createCell(item[headerList[i].value]));
    }
    return DataRow(cells: cell);
  }
}
Improve this question
1
  • Can you share the signature of initRows() ? Commented Jul 14, 2021 at 10:44

1 Answer 1

Reset to default
3

DataRow class has a property color of type MaterialStateProperty<Color?>?.

See What is MaterialStateProperty?

/// Flutter code sample for DataTable

// This sample shows how to display a [DataTable] with three columns: name, age, and
// role. The columns are defined by three [DataColumn] objects. The table
// contains three rows of data for three example users, the data for which
// is defined by three [DataRow] objects.
//
// ![](https://flutter.github.io/assets-for-api-docs/assets/material/data_table.png)

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DataTable(
      columns: const <DataColumn>[
        DataColumn(
          label: Text(
            'Name',
            style: TextStyle(fontStyle: FontStyle.italic),
          ),
        ),
        DataColumn(
          label: Text(
            'Age',
            style: TextStyle(fontStyle: FontStyle.italic),
          ),
        ),
        DataColumn(
          label: Text(
            'Role',
            style: TextStyle(fontStyle: FontStyle.italic),
          ),
        ),
      ],
      rows: [
        DataRow(
          cells: <DataCell>[
            DataCell(Text('Sarah')),
            DataCell(Text('19')),
            DataCell(Text('Student')),
          ],
        ),
        DataRow(
          color: MaterialStateProperty.all(Colors.green),
          cells: <DataCell>[
            DataCell(Text('Janine')),
            DataCell(Text('43')),
            DataCell(Text('Professor')),
          ],
        ),
        DataRow(
          cells: <DataCell>[
            DataCell(Text('William')),
            DataCell(Text('27')),
            DataCell(Text('Associate Professor')),
          ],
        ),
      ],
    );
  }
}

In your case, you can update the createRow() function to accept another parameter MaterialStateProperty<Color?>? color and pass in a color for specific value of r.

edit:

class _SimpleTableState extends State<SimpleTable> {
  var _highlightIndex = 1;
  @override
  Widget build(BuildContext context) {
    return DataTable(
       dataRowColor: 
         MaterialStateColor.resolveWith((states) => Colors.lightGreen),
      columns: initHeader(),
      rows: initRows(_highlightIndex),
    );
  }

  List<DataRow> initRows(int highlightIndex) {
    List<DataRow> items = [];
    var itemList = widget.items;
    for (var r = 0; r < itemList.length; r++) {
      if (r == highlightIndex) {
        items.add(createRow(itemList[r], color: MaterialStateProperty.all(Colors.green)));
      } else {
        items.add(createRow(itemList[r]));
      }
    }
    return items;
  }

createRow(... , {MaterialStateProperty<Color?>? color})
Improve this answer
Sign up to request clarification or add additional context in comments.

14 Comments

will that dynamic value be known in build()?
MaterialStateProperty<Color> color
Could you update the question to show all the code you're working with? It's extremely difficult to understand what's happening.
So you want all the rows to be red and only one to be green?
remove dataRowColor: MaterialStateColor.resolveWith((states) => Colors.lightGreen)
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.