Right to Left (RTL) in Flutter DataGrid (SfDataGrid)

8 Jul 20269 minutes to read

SfDataGrid supports right-to-left (RTL) rendering. When RTL is enabled, columns will be rendered in reverse order, scrollbars will appear on the left side, and text alignment will be mirrored accordingly.

RTL rendering ways

Right-to-left rendering can be switched in the following ways:

Wrapping the SfDataGrid with the Directionality widget

Wrap the SfDataGrid widget inside the Directionality widget and set the textDirection property to TextDirection.rtl to enable RTL rendering.

import 'package:syncfusion_flutter_datagrid/datagrid.dart';

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: Scaffold(
        body: SfDataGrid(
          source: _employeeDataSource,
          columnWidthMode: ColumnWidthMode.fill,
          columns: <GridColumn>[
            GridColumn(
              columnName: 'id',
              label: Container(
                padding: EdgeInsets.all(16.0),
                alignment: Alignment.center,
                child: Text('ID'),
              ),
            ),
            GridColumn(
              columnName: 'name',
              label: Container(
                padding: EdgeInsets.all(8.0),
                alignment: Alignment.center,
                child: Text('Name'),
              ),
            ),
            GridColumn(
              columnName: 'designation',
              label: Container(
                padding: EdgeInsets.all(8.0),
                alignment: Alignment.center,
                child: Text('Designation', overflow: TextOverflow.ellipsis),
              ),
            ),
            GridColumn(
              columnName: 'salary',
              label: Container(
                padding: EdgeInsets.all(8.0),
                alignment: Alignment.center,
                child: Text('Salary'),
              ),
            ),
          ],
        ),
      ),
    );
  }

Changing the locale to RTL languages

Change the locale property of MaterialApp to an RTL language such as Arabic, Persian, Hebrew, Pashto, or Urdu to enable RTL rendering.

Note: The flutter_localizations package is required. Add it to your pubspec.yaml file:

dependencies:
  flutter_localizations:
    sdk: flutter

Then run flutter pub get to download the package.

Import the flutter_localizations library and configure localizationsDelegates and supportedLocales in your MaterialApp.

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: <Locale>[
        Locale('en'),
        Locale('ar'),
        Locale('fa'),
        Locale('he'),
        Locale('ps'),
        Locale('ur'),
      ],
      locale: Locale('ar'),
      home: Scaffold(
        appBar: AppBar(title: Text('RTL DataGrid')),
        body: SfDataGrid(
          source: _employeeDataSource,
          columnWidthMode: ColumnWidthMode.fill,
          columns: <GridColumn>[
            GridColumn(
              columnName: 'id',
              label: Container(
                padding: EdgeInsets.all(16.0),
                alignment: Alignment.center,
                child: Text('ID'),
              ),
            ),
            GridColumn(
              columnName: 'name',
              label: Container(
                padding: EdgeInsets.all(8.0),
                alignment: Alignment.center,
                child: Text('Name'),
              ),
            ),
            GridColumn(
              columnName: 'designation',
              label: Container(
                padding: EdgeInsets.all(8.0),
                alignment: Alignment.center,
                child: Text('Designation', overflow: TextOverflow.ellipsis),
              ),
            ),
            GridColumn(
              columnName: 'salary',
              label: Container(
                padding: EdgeInsets.all(8.0),
                alignment: Alignment.center,
                child: Text('Salary'),
              ),
            ),
          ],
        ),
      ),
    );
  }