No property for styling Header and Footer of PaginatedDataTable
- 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

### Actual results

### 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
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