skills/syncfusion-flutter-datagrid/references/scrolling.md

Scrolling — Flutter DataGrid

Overview

SfDataGrid supports both horizontal and vertical scrolling. Features include always-show scrollbars, hide scrollbars, custom scroll physics, programmatic scrolling to cells/rows/columns/offsets, scroll offset listeners, shrink-wrap sizing, and visible index retrieval.

---

Always Show Scrollbars

SfDataGrid(
    source: _employeeDataSource,
    isScrollbarAlwaysShown: true,
    columns: columns)

Default is false — scrollbars fade out after scrolling stops.

---

Hide Scrollbars

Wrap in ScrollConfiguration and set showVerticalScrollbar/showHorizontalScrollbar to false:

ScrollConfiguration(
  behavior: const ScrollBehavior().copyWith(scrollbars: false),
  child: SfDataGrid(
    source: employeeDataSource,
    showVerticalScrollbar: false,
    showHorizontalScrollbar: false,
    isScrollbarAlwaysShown: true,
    columns: columns,
  ),
)

---

Custom Scroll Physics

Disable all scrolling with NeverScrollableScrollPhysics:

SfDataGrid(
    source: _employeeDataSource,
    horizontalScrollPhysics: NeverScrollableScrollPhysics(),
    verticalScrollPhysics: NeverScrollableScrollPhysics(),
    columns: columns)

Default: AlwaysScrollableScrollPhysics() for both axes.

---

Programmatic Scrolling

All methods use DataGridController. Use canAnimate: true for smooth animation.

Scroll to Cell

final DataGridController _controller = DataGridController();

_controller.scrollToCell(10, 1);
// with animation and position
_controller.scrollToCell(10, 1,
    canAnimate: true,
    rowPosition: DataGridScrollPosition.start,
    columnPosition: DataGridScrollPosition.center);

Scroll to Row

_controller.scrollToRow(10);
_controller.scrollToRow(10, canAnimate: true, position: DataGridScrollPosition.center);

Scroll to Column

_controller.scrollToColumn(1);
_controller.scrollToColumn(1, canAnimate: true, position: DataGridScrollPosition.end);

Scroll to Vertical / Horizontal Offset

_controller.scrollToVerticalOffset(500);
_controller.scrollToHorizontalOffset(400);

Retrieve current scroll positions: _controller.verticalOffset and _controller.horizontalOffset.

---

DataGridScrollPosition Values

Value	Description
makeVisible	Scroll only if the target is not already in view
start	Position target at the start of the grid (default)
center	Position target at the center of the grid
end	Position target at the end of the grid

---

Listen to Scroll Changes

Attach listeners to verticalScrollController or horizontalScrollController:

late ScrollController _verticalScrollController;

@override
void initState() {
  super.initState();
  _verticalScrollController = ScrollController()
    ..addListener(() {
      if (_verticalScrollController.position.pixels >=
          _verticalScrollController.position.maxScrollExtent * (70 / 100)) {
        _employeeDataSource.loadMoreRows();
      }
    });
}

SfDataGrid(
    source: _employeeDataSource,
    verticalScrollController: _verticalScrollController,
    columns: columns)

---

Set Initial Scroll Offset

Use ScrollController(initialScrollOffset: ...):

_verticalScrollController = ScrollController(initialScrollOffset: 500);
_horizontalScrollController = ScrollController(initialScrollOffset: 600);

SfDataGrid(
    source: _employeeDataSource,
    verticalScrollController: _verticalScrollController,
    horizontalScrollController: _horizontalScrollController,
    columns: columns)

---

Shrink Wrap (Size to Content)

Size the grid to exactly fit its rows/columns (use inside SingleChildScrollView):

SingleChildScrollView(
  child: SfDataGrid(
    source: _employeeDataSource,
    shrinkWrapRows: true,
    shrinkWrapColumns: true,
    columns: columns,
  ),
)

Note: Shrink wrapping is more expensive than fixed sizing. Use sparingly.

---

Increase Row Cache Extent

Prevents visual flickering (e.g., checkbox animation) when rows are reused during scrolling:

SfDataGrid(
    source: employeeDataSource,
    rowsCacheExtent: 10,
    showCheckboxColumn: true,
    selectionMode: SelectionMode.multiple,
    columns: columns)

---

Get Visible Row/Column Indices

int? startRow = _controller.getVisibleRowStartIndex(RowRegion.body);
int? endRow = _controller.getVisibleRowEndIndex(RowRegion.body);
int? startCol = _controller.getVisibleColumnStartIndex(RowRegion.body);
int? endCol = _controller.getVisibleColumnEndIndex(RowRegion.body);

---

Key Property Reference

Property	Type	Default	Description
isScrollbarAlwaysShown	bool	false	Always display scrollbars
showVerticalScrollbar	bool	true	Show/hide vertical scrollbar
showHorizontalScrollbar	bool	true	Show/hide horizontal scrollbar
horizontalScrollPhysics	ScrollPhysics	AlwaysScrollableScrollPhysics()	Horizontal scroll physics
verticalScrollPhysics	ScrollPhysics	AlwaysScrollableScrollPhysics()	Vertical scroll physics
verticalScrollController	ScrollController?	null	External vertical scroll controller
horizontalScrollController	ScrollController?	null	External horizontal scroll controller
rowsCacheExtent	int?	null	Additional rows to pre-render beyond viewport
shrinkWrapRows	bool	false	Size height to fit all rows
shrinkWrapColumns	bool	false	Size width to fit all columns

---

TOC

• Always Show Scrollbars
• Hide Scrollbars
• Custom Scroll Physics
• Programmatic Scrolling
• DataGridScrollPosition Values
• Listen to Scroll Changes
• Set Initial Scroll Offset
• Shrink Wrap
• Increase Row Cache Extent
• Get Visible Row/Column Indices