[syncfusion_flutter_datagrid] Set custom TextStyle for headers and cells

[Alyxsqrd]

This internal function _getDefaultTextStyle in ColumnSizer has hardcoded TextStyles. Please allow us to change/customize these values so I can replace the default font family. ☹️

TextStyle _getDefaultTextStyle(
    DataGridConfiguration dataGridConfiguration, bool isHeader) {
  if (isHeader) {
    return TextStyle(
        fontFamily: 'Roboto',
        fontWeight: FontWeight.w500,
        fontSize: 14,
        color:
            dataGridConfiguration.colorScheme!.onSurface.withOpacity(0.87));
  } else {
    return TextStyle(
        fontFamily: 'Roboto',
        fontWeight: FontWeight.w400,
        fontSize: 14,
        color:
            dataGridConfiguration.colorScheme!.onSurface.withOpacity(0.87));
  }
}

[Alyxsqrd]

Adding headerTextStyle and cellTextStyle properties to SfDataGrid would be a perfect fix! 👍

[Tamilarasan-Paranthaman]

Hi @Alyxsqrd,

You can achieve this requirement at the sample level itself. The DataGrid header and row cell widget are set from the sample level. You can accomplish this by specifying the text style in the corresponding Text.style property. By default, the cell width is calculated based on the default text style. To calculate the cell width based on a different TextStyle, just override the ColumnSizer.computeHeaderCellWidth method for header and ColumnSizer.computeCellWidth method for row cell and return the super method with the required TextStyle. There is already detailed information in the following UG documentation.

UG Document: https://help.syncfusion.com/flutter/datagrid/columns-sizing#autofit-calculation-based-on-different-textstyle

I've attached a simple sample. In that sample, I have used Google Fonts for both the header and row cell text and calculated the auto cell width using that. Please check the code snippet and sample below.

import 'package:syncfusion_flutter_datagrid/datagrid.dart';
import 'package:google_fonts/google_fonts.dart';

 TextStyle headerTextStyle = GoogleFonts.poppins(
    color: Colors.pink,
    fontSize: 20,
    fontWeight: FontWeight.w500,
  );

final CustomColumnSizer _customColumnSizer = CustomColumnSizer();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Syncfusion Flutter DataGrid'),
      ),
      body: SfDataGrid(
          columnWidthMode: ColumnWidthMode.auto,
          columnSizer: _customColumnSizer,
          source: _employeeDataSource,
          columns: getColumns),
    );
  }

  List<GridColumn> get getColumns {
    return <GridColumn>[
      GridColumn(
          columnName: 'ID',
          label: Container(
              alignment: Alignment.center,
              child: Text('ID', style: headerTextStyle))),
      GridColumn(
          columnName: 'Name',
          label: Container(
              alignment: Alignment.center,
              child: Text('Name', style: headerTextStyle))),
      GridColumn(
          columnName: 'Designation',
          label: Container(
              alignment: Alignment.center,
              child: Text(
                'Designation',
                style: headerTextStyle,
              ))),
      GridColumn(
          columnName: 'Salary',
          label: Container(
              alignment: Alignment.center,
              child: Text('Salary', style: headerTextStyle))),
    ];
  }
}

In DataGridSource class:

class EmployeeDataSource extends DataGridSource {

  TextStyle rowTextStyle =
      GoogleFonts.laila(fontSize: 20, color: Colors.indigo);

  @override
  DataGridRowAdapter buildRow(DataGridRow row) {
    return DataGridRowAdapter(
        cells: row.getCells().map<Widget>((DataGridCell dataGridCell) {
      return Container(
        alignment: Alignment.center,
        child: Text(dataGridCell.value.toString(), style: rowTextStyle),
      );
    }).toList());
  }
}

In ColumnSizer class:

class CustomColumnSizer extends ColumnSizer {

  TextStyle rowTextStyle = GoogleFonts.laila(fontSize: 20, color: Colors.indigo);

  TextStyle headerTextStyle = GoogleFonts.poppins(color: Colors.pink, fontSize: 20, fontWeight: FontWeight.w500);

  @override
  double computeHeaderCellWidth(GridColumn column, TextStyle style) {
    return super.computeHeaderCellWidth(column, headerTextStyle);
  }

  @override
  double computeCellWidth(GridColumn column, DataGridRow row, Object? cellValue,
      TextStyle textStyle) {
    return super.computeCellWidth(column, row, cellValue, rowTextStyle);
  }
}

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample2126695850

[Alyxsqrd]

Perfect solution, thank you! 😄