Reputation:
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);
}
}
Upvotes: 1
Views: 5060
Reputation: 813
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})
Upvotes: 3