diff --git a/Flutter/datagrid/images/localization/flutter-datagrid-localization.png b/Flutter/datagrid/images/localization/flutter-datagrid-localization.png new file mode 100644 index 000000000..c2d788b5f Binary files /dev/null and b/Flutter/datagrid/images/localization/flutter-datagrid-localization.png differ diff --git a/Flutter/datagrid/localization.md b/Flutter/datagrid/localization.md index 79426c38c..f589e5f76 100644 --- a/Flutter/datagrid/localization.md +++ b/Flutter/datagrid/localization.md @@ -7,7 +7,104 @@ control: SfDataGrid documentation: ug --- -# Localization in Flutter DataPager (SfDataPager) +# Localization in Flutter DataGrid (SfDataGrid) + +## Localization in filter pop-up menu +By default, the [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) filter popup menu supports US English localizations. You can change the other languages by specifying the `MaterialApp` properties and adding the `flutter_localizations` and [syncfusion_localizations](https://pub.dev/packages/syncfusion_localizations) package to your application. + +To use `flutter_localizations` and `syncfusion_localizations`, add the package as a dependency to the `pubspec.yaml` file. + +{% highlight dart %} + +dependencies: +flutter_localizations: + sdk: flutter +syncfusion_localizations: ^24.2.7 + +{% endhighlight %} + +Next, import the `flutter_localizations` and `syncfusion_localizations` library. + +{% highlight dart %} + +import 'package:flutter_localizations/flutter_localizations.dart'; +import 'package:syncfusion_localizations/syncfusion_localizations.dart'; + +{% endhighlight %} + +Then, declare the [SfGlobalLocalizations.delegate](https://pub.dev/documentation/syncfusion_localizations/latest/syncfusion_localizations/SfGlobalLocalizations/delegate-constant.html) in the `localizationsDelegates,` which is used to localize the static string available in the data pager and specify the `supportedLocales` as well. + +{% tabs %} +{% highlight Dart %} + +@override +Widget build(BuildContext context) { + return MaterialApp( + localizationsDelegates: const [ + GlobalMaterialLocalizations.delegate, + GlobalWidgetsLocalizations.delegate, + SfGlobalLocalizations.delegate + ], + supportedLocales: const [ + Locale('zh'), + Locale('ar'), + Locale('ja'), + ], + locale: const Locale('ar'), + home: Scaffold( + appBar: AppBar( + elevation: 0, + title: const Text('Syncfusion Flutter DataGrid'), + ), + body: SfDataGrid( + source: employeeDataSource, + columnWidthMode: ColumnWidthMode.fill, + gridLinesVisibility: GridLinesVisibility.both, + headerGridLinesVisibility: GridLinesVisibility.both, + allowFiltering: true, + columns: [ + GridColumn( + columnName: 'id', + label: Container( + padding: const EdgeInsets.all(16.0), + alignment: Alignment.center, + child: const Text( + 'ID', + ))), + GridColumn( + columnName: 'name', + label: Container( + padding: const EdgeInsets.all(8.0), + alignment: Alignment.center, + child: const Text('Name'))), + GridColumn( + columnName: 'designation', + label: Container( + padding: const EdgeInsets.all(8.0), + alignment: Alignment.center, + child: const Text( + 'Designation', + overflow: TextOverflow.ellipsis, + ))), + GridColumn( + columnName: 'salary', + label: Container( + padding: const EdgeInsets.all(8.0), + alignment: Alignment.center, + child: const Text('Salary'))), + ], + ), + ), + ); +} + +{% endhighlight %} +{% endtabs %} + +![flutter datapager with localization](images/localization/flutter-datagrid-localization.png) + + +## Localization in Flutter DataPager (SfDataPager) By default, the [SfDataPager](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager-class.html) 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.