Customize Flutter DataGrid for Enhanced Data Visualization

The Syncfusion Flutter DataGrid widget, or the Flutter DataTable, enables users to display and manage data in a tabular format. It offers a rich set of features, such as row selection, sorting, column resizing, row height adjustments, swiping, and more.

In this blog, we’ll explore the appearance customization options available for the following elements in the Flutter DataGrid.

• DataGrid row
• Header row
• Selection row
• Stacked header row
• Caption summary row
• Table summary row

Note: Before proceeding, refer to the getting started with Flutter DataGrid documentation.

Flutter DataGrid row customization

The appearance of rows in the Flutter DataGrid can be customized by overriding the buildRow method. A specific color is assigned to the background of each row, and the color of the text displayed in the rows is customized to ensure that it contrasts nicely with the background and aligns with the design theme.

Refer to the following code example.

@override
DataGridRowAdapter buildRow(DataGridRow row) {
  return DataGridRowAdapter(
    color: Colors.pink[100],
    cells: row.getCells().map<Widget>((e) {
      return Container(
        alignment: Alignment.centerLeft,
        padding: const EdgeInsets.all(8.0),
        child: Text(
          (e.columnName == 'Price' ||
                  e.columnName == 'ShippementPrice' ||
                  e.columnName == 'TotalPrice')
              ? NumberFormat.currency(
                  locale: 'en_US',
                  symbol: '\$',
                  decimalDigits: 2,
                ).format(e.value)
              : e.value.toString(),
          style: TextStyle(color: Colors.blue[900]),
        ),
      );
    }).toList(),
  );
}

Refer to the following image.

Header row customization

You can customize the header row’s default background color by setting the headerColor property to align with your app’s design or theme. Additionally, you can customize the text color of the header row by specifying a color in the TextStyle property of the GridColumn.

Refer to the following code example.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Center(child: Text('Order Details')),
    ),
    body: SfDataGridTheme(
      data: const SfDataGridThemeData(headerColor: Colors.red),
      child: SfDataGrid(
        source: _orderDataSource,
        headerGridLinesVisibility: GridLinesVisibility.both,
        gridLinesVisibility: GridLinesVisibility.both,
        columnWidthMode: ColumnWidthMode.fill,
        columns: <GridColumn>[
          GridColumn(
            columnName: 'OrderID',
            label: Container(
              padding: const EdgeInsets.all(8),
              alignment: Alignment.centerLeft,
              child: const Text(
                'Order ID',
                overflow: TextOverflow.ellipsis,
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
          // -----
        ],
      ),
    ),
  );
}

Refer to the following image.

Selection row customization

You can customize the appearance of selected rows and the current cell using the SfDataGridTheme.SfDataGridThemeData property. The selection background color can be modified using the selectionColor property within SfDataGridThemeData in SfDataGridTheme.

Additionally, you can change the color and thickness of the current cell’s border using the currentCellStyle property of SfDataGridThemeData in SfDataGridTheme.

Refer to the following code example.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Center(child: Text('Order Details')),
    ),
    body: SfDataGridTheme(
      data: const SfDataGridThemeData(
        selectionColor: Colors.lightGreen,
        currentCellStyle: DataGridCurrentCellStyle(
          borderColor: Colors.red, 
          borderWidth: 5
        ),
      ),
      child: SfDataGrid(
        source: _orderDataSource,
        headerGridLinesVisibility: GridLinesVisibility.both,
        gridLinesVisibility: GridLinesVisibility.both,
        columnWidthMode: ColumnWidthMode.fill,
        selectionMode: SelectionMode.single,
        navigationMode: GridNavigationMode.cell,
      ),
    ),
  );
}

Refer to the following image.

Stacked headers customization

You can customize the default background color of the stacked header row by setting the headerColor property to match your app’s design or theme.

Additionally, you can change the text color of the stacked header row by specifying a color in the TextStyle property of the StackedHeaderCell.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Center(child: Text('Order Details')),
    ),
    body: SfDataGridTheme(
      data: const SfDataGridThemeData(headerColor: Colors.red),
      child: SfDataGrid(
        source: _orderDataSource,
        headerGridLinesVisibility: GridLinesVisibility.both,
        gridLinesVisibility: GridLinesVisibility.both,
        columnWidthMode: ColumnWidthMode.fill,
        stackedHeaderRows: <StackedHeaderRow>[
          StackedHeaderRow(
            cells: [
              StackedHeaderCell(
                columnNames: ['OrderID', 'CustomerID'],
                child: Container(
                  color: Colors.red,
                  child: const Center(
                    child: Text(
                      'Customer Details',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ),
              StackedHeaderCell(
                columnNames: ['Product', 'Price'],
                child: Container(
                  color: Colors.red,
                  child: const Center(
                    child: Text(
                      'Product Details',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ),
              StackedHeaderCell(
                columnNames: ['City', 'ShippementPrice', 'TotalPrice'],
                child: Container(
                  color: Colors.red,
                  child: const Center(
                    child: Text(
                      'Shippement Details',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  );
}

Refer to the following image.

Caption summary row customization

We can override the buildGroupCaptionCellWidget method to customize the appearance of group caption cells (headers for grouped rows). We can also change the caption summary row text color by applying a color to the TextStyle property of the Container.

This customization allows you to style and format the group caption cells as needed, enhancing the grid’s visual presentation and readability.

class OrderDataSource extends DataGridSource {
  // ………
  @override
  Widget? buildGroupCaptionCellWidget(
      RowColumnIndex rowColumnIndex, String summaryValue) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 15),
      child: Text(
        summaryValue,
        style: TextStyle(color: Colors.blue[900]),
      ),
    );
  }
}

Refer to the following image.

Table summary row customization

Let’s change the background color of the table summary row by using the GridTableSummaryRow.color property.

Additionally, by overriding the buildTableSummaryCellWidget method, we can change the text color of the table summary row by applying a color to the TextStyle property of GridTableSummaryRow. This customization allows you to style the summary row’s appearance to match your app’s design better.

Refer to the following image.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Center(child: Text('Order Details')),
    ),
    body: SfDataGrid(
      source: _orderDataSource,
      headerGridLinesVisibility: GridLinesVisibility.both,
      gridLinesVisibility: GridLinesVisibility.both,
      columnWidthMode: ColumnWidthMode.fill,
      tableSummaryRows: [
        GridTableSummaryRow(
          showSummaryInRow: true,
          color: Colors.indigo,
          title: 'Total Order Count: {Count}',
          columns: [
            const GridSummaryColumn(
              name: 'Count',
              columnName: 'OrderID',
              summaryType: GridSummaryType.count
            )
          ],
          position: GridTableSummaryRowPosition.bottom
        )
      ],
    ),
  );
}

class OrderDataSource extends DataGridSource {
  
  ...

  @override
  Widget? buildTableSummaryCellWidget(
    GridTableSummaryRow summaryRow,
    GridSummaryColumn? summaryColumn,
    RowColumnIndex rowColumnIndex,
    String summaryValue) {
    return Container(
      padding: const EdgeInsets.all(15.0),
      child: Text(
        summaryValue,
        style: const TextStyle(color: Colors.white),
      ),
    );
  }
}

Refer to the following image.

GitHub reference

For more details, refer to the Customizing Flutter DataGrid GitHub demo.

Unlock the power of Syncfusion’s highly customizable Flutter widgets.

Try It Free

Conclusion

Thanks for reading! In this blog, we’ve explored the appearance customization options available in the Syncfusion Flutter DataGrid widget. Developers can create cohesive and engaging designs by enhancing the appearance of elements such as rows, headers, and summary rows. We hope you find the steps outlined helpful in achieving similar results.

If you’re an existing customer, you can download the latest version of Essential Studio^® from the License and Downloads page. For those new to Syncfusion, try our 30-day free trial to explore all our features.

If you have questions, contact us through our support forum, support portal, or feedback portal. As always, we are happy to assist you!