flutter / flutter/flutter

No property for styling Header and Footer of PaginatedDataTable

Open
#152,810 3 comments 0 reactions 0 assignees View on GitHub
c: new feature c: proposal p: material_ui P3 package team-design triaged-design waiting for PR to land (fixed)
Dominant language
Dart
Stars
179k
Forks
31.1k
PR merge metrics
PR metrics pending

Description

### Steps to reproduce

**1. Create a PaginatedDataTable**
```dart
PaginatedDataTable(
header: const Text('CSV Data',
style: TextStyle(color: Colors.white)),
columns: columns,
source: _DataSource(rows),
rowsPerPage: rowsPerPage,
onRowsPerPageChanged: (perPage) {
setState(() {
rowsPerPage = perPage!;
});
},
columnSpacing: 16.0,
horizontalMargin: 16.0,
showCheckboxColumn: false,
arrowHeadColor: Colors.black,
)
```
**2. Realize there are no widget level properties to style the header or footer elements besides the arrows**

**3. Attempt to wrap the PaginatedDataTable in a Theme()**
```dart
Theme(
data: ThemeData(
secondaryHeaderColor: Colors.black,
bottomNavigationBarTheme: const BottomNavigationBarThemeData(
backgroundColor: Color.fromARGB(255, 38, 44, 48)),
bannerTheme: const MaterialBannerThemeData(
backgroundColor: Color.fromARGB(255, 38, 44, 48)),
//textTheme: const TextTheme(caption: TextStyle(color: Colors.white)),
dataTableTheme: DataTableThemeData(
headingRowColor: WidgetStateProperty.resolveWith(
(Set states) {
// Set color for heading row
return const Color.fromARGB(255, 38, 44, 48); // example color
}),
dataRowColor: WidgetStateProperty.resolveWith(
(Set states) {
// Set color for data rows
return const Color.fromARGB(255, 38, 44, 48); // example color
}),
// Add other customizations here
),
),
child: PaginatedDataTable(
header:
const Text('CSV Data', style: TextStyle(color: Colors.white)),
columns: columns,
source: _DataSource(rows),
rowsPerPage: rowsPerPage,
onRowsPerPageChanged: (perPage) {
setState(() {
rowsPerPage = perPage!;
});
},
columnSpacing: 16.0,
horizontalMargin: 16.0,
showCheckboxColumn: false,
arrowHeadColor: Colors.white,
),
),

```
### Expected results

![imaghle](https://github.com/user-attachments/assets/f75f7bd0-0972-4100-a9fb-801d184bf2c0)

### Actual results

![igukmage](https://github.com/user-attachments/assets/c07dbe91-af5d-48db-9a5d-3dde771a12af)

### Code sample

Code sample

https://dartpad.dev/?id=f2c59d9e6099c1234669d7f9a13d9eb1

The method/class responsible for creating hardcoded dummy data for the columns and rows, throws a **_Null check operator used on a null value_** when using command
```console
flutter create bug
```
to make a minimal environment, so dartpad is only option to reproduce.

The code snippet will work in a normal flutter project

### Flutter Doctor output

Doctor output

```console
PS Y:\CODING PROJECTS\flutter_logviewer\bug> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.22.3, on Microsoft Windows [Version 10.0.19045.4651], locale en-CA)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[X] Android toolchain - develop for Android devices
X Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, please use
`flutter config --android-sdk` to update to that location.

[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Build Tools 2022 17.10.5)
[!] Android Studio (not installed)
[√] Connected device (3 available)
[√] Network resources

! Doctor found issues in 2 categories.
```

Contributor guide

Open the contributing guide

Research direction

Start with the PaginatedDataTable entry point and reproduce the reported styling limitation using the linked DartPad sample. Review how its header and footer are built and how the supplied theme affects them. Done means the header and footer can be styled separately at widget level and the result matches the expected appearance.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
design, mobile-dev
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.