Localization in Flutter DataPager (SfDataPager)

26 Apr 202119 minutes to read

By default, the SfDataPager widget supports US English localizations. You can change the other languages by specifying the MaterialApp properties and adding the flutter_localizations package to your application.

As of February 2020, flutter package supports 77 languages.

To use flutter_localizations, add the package as dependency to pubspec.yaml file.

dart

dependencies:
flutter_localizations:
  sdk: flutter

Next, import the flutter_localizations library and specify localizationsDelegates and supportedLocales for MaterialApp.

dart

import 'package:flutter_localizations/flutter_localizations.dart';

final int rowsPerPage = 15;

@override
Widget build(BuildContext context) {
  return MaterialApp(
    localizationsDelegates: [
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
    ],
    supportedLocales: [
      const Locale('zh'),
      const Locale('ar'),
      const Locale('ja'),
    ],
    locale: const Locale('zh'),
    home: Scaffold(
      appBar: AppBar(
        title: Text('DataPager'),
      ),
      body: LayoutBuilder(
        builder: (context, constraints) {
          return Column(
            children: [
              SizedBox(
                height: constraints.maxHeight - 60,
                width: constraints.maxWidth,
                child: SfDataGrid(
                  source: _employeeDataSource,
                  columns: <GridColumn>[
                    GridTextColumn(
                      columnName: 'id',
                      label: Container(
                        padding: EdgeInsets.symmetric(horizontal: 16.0),
                        alignment: Alignment.centerRight,
                        child: Text(
                          'ID',
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                    ),
                    GridTextColumn(
                      columnName: 'name',
                      label: Container(
                        padding: EdgeInsets.symmetric(horizontal: 16.0),
                        alignment: Alignment.centerLeft,
                        child: Text(
                          'Name',
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                    ),
                    GridTextColumn(
                      columnName: 'designation',
                      label: Container(
                        padding: EdgeInsets.symmetric(horizontal: 16.0),
                        alignment: Alignment.centerLeft,
                        child: Text(
                          'Designation',
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                    ),
                    GridTextColumn(
                      columnName: 'salary',
                      label: Container(
                        padding: EdgeInsets.symmetric(horizontal: 16.0),
                        alignment: Alignment.centerRight,
                        child: Text(
                          'Salary',
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                height: 60,
                width: constraints.maxWidth,
                child: SfDataPager(
                  delegate: _employeeDataSource,
                  pageCount: employees.length / rowsPerPage,
                  visibleItemsCount: 5,
                  direction: Axis.horizontal,
                ),
              )
            ],
          );
        },
      ),
    ),
  );
}

Localize the static string in DataPager

Static strings in the data pager can be localized using the syncfusion_localizations package and specifying localizationsDelegates in MaterialApp.

To use syncfusion_localizations, add the package as dependency to pubspec.yaml file.

dart

dependencies:
syncfusion_localizations: ^18.3.35

Next, import the syncfusion_localizations library.

dart

import 'package:syncfusion_localizations/syncfusion_localizations.dart';

Then, declare the SfGlobalLocalizations.delegate in the localizationsDelegates, which is used to localize the static string available in data pager and specify the supportedLocales as well.

dart

final int rowsPerPage = 15;

@override
Widget build(BuildContext context) {
  return MaterialApp(
    localizationsDelegates: [
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
      SfGlobalLocalizations.delegate
    ],
    supportedLocales: [
      const Locale('zh'),
      const Locale('ar'),
      const Locale('ja'),
    ],
    locale: const Locale('zh'),
    home: Scaffold(
      appBar: AppBar(
        title: Text('DataPager'),
      ),
      body: LayoutBuilder(
        builder: (context, constraints) {
          return Column(
            children: [
              SizedBox(
                height: constraints.maxHeight - 60,
                width: constraints.maxWidth,
                child: SfDataGrid(
                  source: _employeeDataSource,
                  columns: <GridColumn>[
                    GridTextColumn(
                      columnName: 'id',
                      label: Container(
                        padding: EdgeInsets.symmetric(horizontal: 16.0),
                        alignment: Alignment.centerRight,
                        child: Text(
                          'ID',
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                    ),
                    GridTextColumn(
                      columnName: 'name',
                      label: Container(
                        padding: EdgeInsets.symmetric(horizontal: 16.0),
                        alignment: Alignment.centerLeft,
                        child: Text(
                          'Name',
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                    ),
                    GridTextColumn(
                      columnName: 'designation',
                      label: Container(
                        padding: EdgeInsets.symmetric(horizontal: 16.0),
                        alignment: Alignment.centerLeft,
                        child: Text(
                          'Designation',
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                    ),
                    GridTextColumn(
                      columnName: 'salary',
                      label: Container(
                        padding: EdgeInsets.symmetric(horizontal: 16.0),
                        alignment: Alignment.centerRight,
                        child: Text(
                          'Salary',
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                height: 60,
                width: constraints.maxWidth,
                child: SfDataPager(
                  delegate: _employeeDataSource,
                  pageCount: employees.length / rowsPerPage,
                  visibleItemsCount: 5,
                  direction: Axis.horizontal,
                ),
              )
            ],
          );
        },
      ),
    ),
  );
}