I have the following code in Flutter, which is responsible for creating a PaginatedDataTable with a certain amount of elements. I need that only the line referring to the titles of this table, have a different color from the others. Below is the complete code:
import 'package:flutter/material.dart';
import 'dart:math';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
// Hide the debug banner
debugShowCheckedModeBanner: false,
home: HomeScreen());
}
}
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final DataTableSource _data = MyData();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
const SizedBox(
height: 10,
),
PaginatedDataTable(
source: _data,
header: const Text('My Products'),
columns: const [
DataColumn(label: Text('ID')),
DataColumn(label: Text('Name')),
DataColumn(label: Text('Price'))
],
columnSpacing: 100,
horizontalMargin: 10,
rowsPerPage: 5,
),
],
),
);
}
}
// The "soruce" of the table
class MyData extends DataTableSource {
// Generate some made-up data
final List<Map<String, dynamic>> _data = List.generate(
200,
(index) => {
"id": index,
"title": "Item $index",
"price": Random().nextInt(10000)
});
@override
bool get isRowCountApproximate => false;
@override
int get rowCount => _data.length;
@override
int get selectedRowCount => 0;
@override
DataRow getRow(int index) {
return DataRow(cells: [
DataCell(Text(_data[index]['id'].toString())),
DataCell(Text(_data[index]["title"])),
DataCell(Text(_data[index]["price"].toString())),
]);
}
}
As you can see with the code example above, the entire table has the same color. I need only the first line that contains (ID, Name, Price) to have a specific color.
I have already tried to implement a solution using the code below, but the line is not painted.
dataTableTheme: DataTableThemeData(
dataRowColor: MaterialStateProperty.resolveWith<Color?>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.selected)) {
return Colors.blue;
}
return Colors.transparent;
}),
),
Can someone kindly help me with this problem?
2
Answers
Try this
ok, please try this