Internationalizing Flutter apps

localization in Flutter apps:

Hi friends,  today I implement localization in flutter,

A few resources to get you started if this is your first Flutter project:

Lab: Write your first Flutter app
Cookbook: Useful Flutter samples

Flutter's default language is English, To add or support other languages, we must specify additional MaterialApp properties, and also include packages "flutter_localizations" and "easy_localization: ^2.1.0+2 ", currently this package supports 77 languages.

1. Create a project:

Enter the command in terminal 

 flutter create localization  

It will create a brand new project with some files in current directory.

2. Add Dependencies:

Add the packages as a dependency to your pubspec.yaml file:

 dependencies:  
  flutter:  
   sdk: flutter  
  flutter_localizations:  
   sdk: flutter  
  easy_localization: ^2.1.0+2  

3. Import library:

 import 'dart:developer';  
 import 'dart:ui';  
 import 'package:flutter_localizations/flutter_localizations.dart';  
 import 'package:easy_localization/easy_localization.dart';  

4. Add Language files in json format:

In this example i am using 7 languages,

Create a assets folder and add json file with naming format as {languageCode-languageId}.json 

English en-US.json files contains key-value pairs, similarly you can add for other languages with there respective translations.

 {  
   "title": "Welcome to flutter localization",  
   "content": "Build Smart UI",  
   "pushTimes":"You have pushed the button this many times"  
  }  

you can find the Locale.languageCodes here

5. Modify Main() method:

Add EasyLocalization class to the main method which contains arguments as child, supportLocales and path.

 void main() => runApp(EasyLocalization(  
   child: MyApp(),  
   supportedLocales: [  
    Locale('en', 'US'),  
    Locale('ar', 'DZ'),  
    Locale('de', 'DE'),  
    Locale('ru', 'RU'),  
    Locale('zh', 'HK'),  
    Locale('te', 'TE'),  
    Locale('hi', 'HI')  
   ],  
   path: 'assets',  
  ));  

6. Update the MyApp Class and Material App widget:

 class MyApp extends StatelessWidget {  
  // This widget is the root of your application.  
  @override  
  Widget build(BuildContext context) {  
   log(EasyLocalization.of(context).locale.toString(),  
     name: '${this} # locale');  
   log('title'.tr().toString(), name: '${this} # locale');  
    return MaterialApp(  
    title: 'title'.tr(),  
    localizationsDelegates: [  
     GlobalMaterialLocalizations.delegate,  
     GlobalWidgetsLocalizations.delegate,  
     EasyLocalization.of(context).delegate,  
    ],  
    supportedLocales: EasyLocalization.of(context).supportedLocales,  
    locale: EasyLocalization.of(context).locale,  
    theme: ThemeData(  
     primarySwatch: Colors.purple,  
    ),  
    home: MyHomePage(title: 'Easy localization'),  
   );  
  }  
 }  

localizationsDelegates list are factories that produce collections of localized values.
GlobalMaterialLocalizations.delegate provides localized strings and other values for the Material Components library.
GlobalWidgetsLocalizations.delegate defines the default text direction, either left-to-right or right-to-left, for the widgets library.

7. Modify the _MyHomePageState class:

 class _MyHomePageState extends State<MyHomePage> {  
  int _counter = 0;  
  void _incrementCounter() {  
   setState(() {  
    _counter++;  
   });  
  }  
  @override  
  Widget build(BuildContext context) {  
   return Scaffold(  
     appBar: AppBar(  
      title: Text('title').tr(),  
      actions: <Widget>[  
       FlatButton(  
        child: Icon(Icons.language, color: Colors.white,),  
        onPressed: () {  
         Navigator.push(  
          context,  
          MaterialPageRoute(builder: (_) => LanguageView()),  
         );  
        },  
       ),  
      ],  
     ),  
     body: Center(  
      child: Column(  
       mainAxisAlignment: MainAxisAlignment.center,  
       children: <Widget>[  
        Text('content', style: TextStyle(  
         fontWeight: FontWeight.bold,  
         fontSize: 20  
        ),).tr(),  
        Text('pushTimes').tr(),  
        Text(  
         '$_counter',  
         style: Theme.of(context).textTheme.display1,  
        ),  
       ],  
      ),  
     ),  
     floatingActionButton: FloatingActionButton(  
      onPressed: _incrementCounter,  
      tooltip: 'Increment',  
      child: Icon(Icons.add),  
     ),  
    );  
  }  
 }  

7. Adding LanguageView screen:

Iam adding LanguageView screen to change App language manually

it is a simple UI with ListTile widget.

8. UI screen:

9. Conclusion:

I hope this article will saves your time in adding localization to your flutter app.

you can find the source code from my GitHub repository here

Thank You.