Styles — Flutter DataGrid

Overview

SfDataGrid appearance can be customized using SfDataGridTheme + SfDataGridThemeData from the syncfusion_flutter_core package. Covers header color, grid lines, row hover, row background, and cell text color.

Required Import

import 'package:syncfusion_flutter_core/theme.dart';

Header Background Color

SfDataGridTheme(
    data: SfDataGridThemeData(headerColor: const Color(0xff009889)),
    child: SfDataGrid(
        source: _employeeDataSource,
        columnWidthMode: ColumnWidthMode.fill,
        columns: columns))

Header Hover Color (Web & Desktop)

SfDataGridTheme(
    data: SfDataGridThemeData(headerHoverColor: Colors.yellow),
    child: SfDataGrid(source: _employeeDataSource, columns: columns))

Applicable for web and desktop platforms only.

Row Background Color

Set background color per row via DataGridRowAdapter.color:

@override
DataGridRowAdapter? buildRow(DataGridRow row) {
  return DataGridRowAdapter(
    color: Colors.indigo[300],
    cells: row.getCells().map<Widget>((dataGridCell) {
      return Container(
          alignment: Alignment.centerLeft,
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: Text(
            dataGridCell.value.toString(),
            style: const TextStyle(color: Colors.white),
            overflow: TextOverflow.ellipsis,
          ));
    }).toList());
}

Grid Line Color and Thickness

SfDataGridTheme(
    data: SfDataGridThemeData(
        gridLineColor: Colors.amber, gridLineStrokeWidth: 3.0),
    child: SfDataGrid(source: _employeeDataSource, columns: columns))

Show Vertical and Horizontal Grid Lines

SfDataGrid(
    source: _employeeDataSource,
    gridLinesVisibility: GridLinesVisibility.both,
    headerGridLinesVisibility: GridLinesVisibility.both,
    columns: columns)

GridLinesVisibility options: vertical, horizontal, both, none

gridLinesVisibility: applies to data cells
headerGridLinesVisibility: applies to header and stacked header cells

Disable Row Hover Highlighting (Web & Desktop)

SfDataGrid(
    highlightRowOnHover: false,
    source: _employeeDataSource,
    columns: columns)

Row Hover Color and Text Style (Web & Desktop)

SfDataGridTheme(
    data: SfDataGridThemeData(
        rowHoverColor: Colors.yellow,
        rowHoverTextStyle: TextStyle(
          color: Colors.red,
          fontSize: 14,
        )),
    child: SfDataGrid(source: _employeeDataSource, columns: columns))

Cell Value Text Color

Apply TextStyle to Text widget inside cell widgets:

@override
DataGridRowAdapter? buildRow(DataGridRow row) {
  return DataGridRowAdapter(
      cells: row.getCells().map<Widget>((dataGridCell) {
    TextStyle? getTextStyle() {
      if (dataGridCell.columnName == 'name') {
        return const TextStyle(color: Colors.pinkAccent);
      }
      return null;
    }
    return Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        child: Text(
          dataGridCell.value.toString(),
          style: getTextStyle(),
          overflow: TextOverflow.ellipsis,
        ));
  }).toList());
}

Key Property Reference

SfDataGridThemeData Properties

Property	Type	Description
`headerColor`	`Color?`	Column header background color
`headerHoverColor`	`Color?`	Header hover color (web/desktop)
`gridLineColor`	`Color?`	Grid line color
`gridLineStrokeWidth`	`double?`	Grid line thickness
`rowHoverColor`	`Color?`	Row hover background color (web/desktop)
`rowHoverTextStyle`	`TextStyle?`	Text style on hover (web/desktop)

SfDataGrid Properties

Property	Type	Default	Description
`gridLinesVisibility`	`GridLinesVisibility`	`horizontal`	Grid lines for data cells
`headerGridLinesVisibility`	`GridLinesVisibility`	`horizontal`	Grid lines for header cells
`highlightRowOnHover`	`bool`	`true`	Enable/disable hover highlight (web/desktop)

DataGridRowAdapter Properties

Property	Type	Description
`color`	`Color?`	Row background color

4.3 KiB Raw Blame History