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.

    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.

    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,
                    ),
                  )
                ],
              );
            },
          ),
        ),
      );
    }

    flutter datapager with localization