skip to Main Content

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


  1. Try this

    dataTableTheme: const DataTableThemeData(
            headingRowColor: const MaterialStatePropertyAll(Colors.red),
            dataRowColor: const MaterialStatePropertyAll(Colors.blue),
          ),
    
    Login or Signup to reply.
  2. ok, please try this

    MaterialApp(
        ...
              theme: ThemeData(
                dataTableTheme: const DataTableThemeData(
                    // background color
                    headingRowColor: MaterialStatePropertyAll(Colors.red),
                    // text color
                    headingTextStyle: TextStyle(color: Colors.white)),
              ),
        ...
            );
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search