How to change the font family for the cells in Flutter DataTable (SfDataGrid)?
The Flutter DataGrid widget supports you to load any type of widget in each column. So, you can set the style in widget level itself.
Initialize the SfDataGrid with all the required properties. The default fonts available on your system will be directly loaded automatically in the text widget loaded in cells using buildRow method. The following steps explain how to set the custom font family that is not installed in device in Flutter DataTable:
STEP-1: Download your required font from this link.
STEP-2: You can add the fonts in any folder in your application. Here, we have used 'Heebo-Bold' font and added it inside the assets folder.
STEP-3: You should provide the fonts path in pubspec.yaml file.
flutter: uses-material-design: true fonts: - family: HeeboBold fonts: - asset: assets/Heebo-Bold.ttf - family: HeeboLight fonts: - asset: assets/Heebo-Light.ttf
STEP-4: Create DataGridSource class by extending from DataGridSource for mapping data to the SfDataGrid. Set the HeeboLight font for Text widget, which is loaded for cells.
class EmployeeDataSource extends DataGridSource {
EmployeeDataSource(List<Employee> employees) {
dataGridRows = employees
.map<DataGridRow>((dataGridRow) => DataGridRow(cells: [
DataGridCell<int>(columnName: 'id', value: dataGridRow.id),
DataGridCell<String>(columnName: 'name', value: dataGridRow.name),
DataGridCell<String>(
columnName: 'designation', value: dataGridRow.designation),
DataGridCell<int>(
columnName: 'salary', value: dataGridRow.salary),
]))
.toList();
}
List<DataGridRow> dataGridRows = [];
@override
List<DataGridRow> get rows => dataGridRows;
@override
DataGridRowAdapter? buildRow(DataGridRow row) {
return DataGridRowAdapter(
cells: row.getCells().map<Widget>((dataGridCell) {
return Container(
alignment: (dataGridCell.columnName == 'id' ||
dataGridCell.columnName == 'salary')
? Alignment.centerRight
: Alignment.centerLeft,
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Text(
dataGridCell.value.toString(),
overflow: TextOverflow.ellipsis,
style: const TextStyle(fontFamily: 'HeeboLight'),
));
}).toList());
}
}
You can download this example on GitHub.
Conclusion
I hope you enjoyed learning about how to change the font family for the cells in Flutter DataTable (SfDataGrid).
You can refer to our Flutter DataGrid feature tour Flutter DataGrid feature tour page to know about its other groundbreaking feature representations. You can also explore our documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
