SFDataPager Page Numbers

[bahadirarslan]

Bug description

I am using SFDataGrid for a long time and after an update I had a weird glitch.

After DataGrid loaded with paging, page numbers are shown at first and fade out, looks like their color changes to same with background. Once scrolled a little bit they return to normal.

Steps to reproduce

N/A

Code sample

Code sample

Expanded(child: _buildDataGrid(constraint)),
if (viewModel.rowsPerPage != 0)
SizedBox(
height: _dataPagerHeight,
child: SfDataPager(
visibleItemsCount: viewModel.rowsPerPage,
delegate: viewModel,
initialPageIndex: viewModel.pageCount,
pageCount: viewModel.pageCount.toDouble(),
direction: Axis.horizontal,
))

Screenshots or Video

Screenshots / Video demonstration

Screen.Recording.2025-02-25.at.23.33.27.mov

Stack Traces

N/A

On which target platforms have you observed this bug?

iOS

Flutter Doctor output

Doctor output

bahadirarslan@bahadirsmac % flutter doctor -v
[✓] Flutter (Channel stable, 3.29.0, on macOS 15.1 24B83 darwin-arm64, locale en-TR) [1,527ms]
    • Flutter version 3.29.0 on channel stable at /Users/bahadirarslan/Development/SDKS/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 35c388afb5 (2 weeks ago), 2025-02-10 12:48:41 -0800
    • Engine revision f73bfc4522
    • Dart version 3.7.0
    • DevTools version 2.42.2

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [2.5s]
    • Android SDK at /Users/bahadirarslan/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.2) [1,731ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16C5032a
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web [13ms]
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.2) [12ms]
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)

[✓] VS Code (version 1.97.2) [10ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.102.0

[✓] Connected device (4 available) [13.4s]    
    • iPhone 16 Pro (mobile)          • B5611E87-5F6A-4178-ABAD-7B837493DE55 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-18-2 (simulator)
    • macOS (desktop)                 • macos                                • darwin-arm64   • macOS 15.1 24B83 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad                • darwin         • macOS 15.1 24B83 darwin-arm64
    • Chrome (web)                    • chrome                               • web-javascript • Google Chrome 133.0.6943.127

[✓] Network resources [668ms]
    • All expected network resources are available.

• No issues found!

[abineshPalanisamy]

Hi @bahadirarslan ,

We have checked your query at our end, and we are able to replicate that issue at our end. We have considered this as a bug and logged a bug report regarding this in our feedback portal. We will fix the reported issue and include the changes in our upcoming weekly patch release, which is expected to be rolled out on March 25 , 2025. We will let you know once released, and we appreciate your patience until then.

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

Regards,
Abinesh P

[abineshPalanisamy]

Hi @bahadirarslan ,

We are glad to announce that our Essential Studio® 2025 Volume 1 Main Release V29.1.33 is rolled out and is available for download under the following link.

Essential Studio® 2025 Volume 1 Main Release v29.1.33 is available for download | Announcements Forums | Syncfusion®

Additionally, the reported issue has been resolved on our end. Therefore, kindly update SfDataGrid to the latest version(29.1.33).

Root cause : When setting initialPageIndex as the last page, we calculated the distance based on the button size and programmatically scrolled the navigation view. The issue was caused by the distance calculation, when initialPageIndex was set to the last page, the calculated distance exceeded maxScrollExtent.

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,
Abinesh P

[ashok-kuvaraja]

Hi @bahadirarslan,

We suspect that the reported issue has been resolved at your end. Hence, we are closing this issue. If you need any further assistance, please reopen this. We are always happy to help.

Regards,
Ashok K

[bahadirarslan]

Dear @ashok-kuvaraja and @abineshPalanisamy
I am sorry for very late response but the bug is not fixed. you can see the recording below.

I tried everything, Claude tried but none of us could solve the problem.

Actual Behavior

On the first frame, page number item text is rendered with the same color as the item background, making it invisible. After any user interaction the widget repaints and displays correctly.

DataPagerThemeHelper(context) is called inside didChangeDependencies as expected, so the theme helper is initialized before build. Despite this, the text color is not correctly applied to page number items on the first frame.

Workarounds Attempted

1. Wrapping with SfDataPagerTheme — did not fix
   Explicitly providing all item colors via SfDataPagerTheme:

SfDataPagerTheme(
  data: SfDataPagerThemeData(
    backgroundColor: context.colors.surface,
    selectedItemColor: context.colors.primary,
    itemColor: context.colors.surfaceContainerHighest,
    itemTextStyle: TextStyle(color: context.colors.onSurface),
    selectedItemTextStyle: TextStyle(color: context.colors.onPrimary),
  ),
  child: SfDataPager(...),
),

All color properties are non-null. SfDataPagerTheme.of(context) inside the pager correctly finds the ancestor theme. The bug persists regardless.

2. Forcing a rebuild via addPostFrameCallback — did not fix

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    if (mounted) setState(() {});
  });
}

This triggers a second build after the first frame. The DataPager repaints but the page numbers remain invisible until user interaction.

3. Both workarounds combined — did not fix
   Using SfDataPagerTheme with explicit colors and the post-frame setState together still does not resolve the issue.

Notes

The bug only affects the initial render. Any subsequent repaint (triggered by user interaction) displays the correct colors.
The issue appears to be in how DataPagerThemeHelper or the item-rendering logic applies the text color during the very first paint cycle, not during later repaints.
Inspecting sfdatapager.dart lines 1706–1716, the text color is read directly from _dataPagerThemeHelper!.itemTextStyle!.color. Even with an explicit non-null color provided via SfDataPagerTheme, the first-frame paint does not reflect it correctly.

[Gowtham-SF4769]

Hi @bahadirarslan ,

Thank you for sharing the details. Based on the information provided, we conducted tests using a simple sample to replicate the reported issues. However, we were unable to reproduce the behavior as described. In our sample, we included the SfDataPagerTheme and also set the initialPageIndex to verify the issue during the initial render, but the issue did not occur. Our testing was performed using the latest version of SfDataGrid (33.2.7).

We have tested this scenario using the attached sample, and it worked as expected without any issues. If you are still encountering the problem, we kindly request you to modify the attached sample to reproduce the issue and share it with us. Additionally, it would be very helpful if you could provide detailed step-by-step instructions along with a video demonstrating the issue. This information will greatly assist us in further investigating the problem and providing an appropriate solution as quickly as possible.

For your reference, we have also included a sample and a video demonstration. Kindly review them for further guidance.

We look forward to your response.

Code Sample: SfDataGrid.zip

Video Demo:

VideoDemo.mp4

Regards,
Gowtham R