Flutter Multi Language Tutorial Example | Localization

Flutter Multi Language Tutorial Example | Localization

    Getx offers many convenient features for state managment. It also features about Localization or multiple language support.

    It has great support for loading json data for multiple language app. We would be using locale, translations and fallbacklocale properties. 

    The above three properties helps to realize building multiple language app using Getx.

    We will cover the below things here

    • 1. Flutter locale
    • 2. Flutter default locale and fallbacklocale
    • 3. Flutter internationalization
    • 4. Controller for localization
    • 5. load json data 
    • 6. save them in sharedPreference

    JSON Files

    Make sure that you have json files for language information in your assets folder. Here's en.json

    {
      "select_language": "Select Language",
      "save": "Save",
      "select_a_language": "Select a language",
      "home": "Home",
      "back_to_home": "back to home"
    }

    And where's bn.json

    {
      "select_language": "একটি ভাষা নির্বাচন করুন",
      "save": "সংরক্ষণ",
      "select_a_language": "একটি ভাষা নির্বাচন করুন",
      "home": "বাড়ি",
      "back_to_home": "বাড়িতে ফিরে যাও"
    }

    You can use any kind of language, just make sure your json files may correct format and translation.

    App Constants

    Let's define our app constants file. We will need for storing data to sharedPreferences. Our loaded JSON files would be stored in sharedPreference

    class AppConstants {
      /*
      Localization data
       */
      static const String COUNTRY_CODE = 'country_code';
      static const String LANGUAGE_CODE = 'language_code';
      
      static List<LanguageModel> languages = [
        LanguageModel(imageUrl: "xx", languageName: 'English', countryCode: 'US', languageCode: 'en'),
        LanguageModel(imageUrl: "xx", languageName: 'বাংলা', countryCode: 'BD', languageCode: 'bn'),
      ];
    }

    Here we have String COUNTRY_CODE and LANGUAGE_CODE for storing data. Here we also instantiate two objects for our languages using LanguageModel.

    At the same we return them in a List so that we can access them later from dependency injection file.

    Language Model

    Let's first create Language model class. It will save 

    1. country flag url
    2. country code
    3. country language code
    4. language name
    class LanguageModel {
      String imageUrl;
      String languageName;
      String languageCode;
      String countryCode;
    
      LanguageModel({
        required this.imageUrl,
        required this.languageName,
        required this.countryCode,
        required this.languageCode});
    }

    Getx Dependencies

    Next let's create a class load our dependencies. This dependency file will load Localization Controller, SharedPreference and JSON data from local device.

    Future<Map<String, Map<String, String>>> init() async {
    
      final sharedPreference = await SharedPreferences.getInstance();
      Get.lazyPut(() => sharedPreference);
    
      Get.lazyPut(() => LocalizationController(sharedPreferences: Get.find()));
    
    
      // Retrieving localized data
      Map<String, Map<String, String>> _languages = Map();
      for(LanguageModel languageModel in AppConstants.languages) {
        String jsonStringValues =  await rootBundle.loadString('assets/language/${languageModel.languageCode}.json');
        Map<String, dynamic> _mappedJson = json.decode(jsonStringValues);
        Map<String, String> _json = Map();
    
        _mappedJson.forEach((key, value) {
    
          _json[key] = value.toString();
        });
        _languages['${languageModel.languageCode}_${languageModel.countryCode}'] = _json;
      }
    
      return _languages;
    }

    Here we access the List that we created before in App Constants file. We acess them AppConstants.languages inside for loop.

    Localization Controller

    Let's create actual controller. This controller be responsible for doing the below things

    1.  set a default language for the app
    2. Load current lanauge from device is there's any
    3.  set language based on user's click
    4.  save the choosen language
    class LocalizationController extends GetxController implements GetxService {
      final SharedPreferences sharedPreferences;
    
      LocalizationController({required this.sharedPreferences}) {
        loadCurrentLanguage();
      }
    
      Locale _locale = Locale(AppConstants.languages[0].languageCode,
          AppConstants.languages[0].countryCode);
      bool _isLtr = true;
      List<LanguageModel> _languages = [];
    
      Locale get locale => _locale;
    
      bool get isLtr => _isLtr;
    
      List<LanguageModel> get languages => _languages;
    
      void setLanguage(Locale locale) {
        Get.updateLocale(locale);
        _locale = locale;
        if (_locale.languageCode == 'bn') {
          _isLtr = false;
        } else {
          _isLtr = true;
        }
        saveLanguage(_locale);
        update();
      }
    
      void loadCurrentLanguage() async {
        _locale = Locale(sharedPreferences.getString(AppConstants.LANGUAGE_CODE) ??
            AppConstants.languages[0].languageCode,
            sharedPreferences.getString(AppConstants.COUNTRY_CODE) ??
                AppConstants.languages[0].countryCode);
        _isLtr = _locale.languageCode != 'bn';
        for (int index = 0; index < AppConstants.languages.length; index++) {
          if (AppConstants.languages[index].languageCode == _locale.languageCode) {
            _selectedIndex = index;
            break;
          }
        }
        _languages = [];
        _languages.addAll(AppConstants.languages);
        update();
      }
    
      void saveLanguage(Locale locale) async {
        sharedPreferences.setString(
            AppConstants.LANGUAGE_CODE, locale.languageCode);
        sharedPreferences.setString(AppConstants.COUNTRY_CODE, locale.countryCode!);
      }
    
      int _selectedIndex = 0;
    
      int get selectedIndex => _selectedIndex;
    
      void setSelectIndex(int index) {
        _selectedIndex = index;
        update();
      }
    
      void searchLanguage(String query) {
        if (query.isEmpty) {
          _languages = [];
          _languages = AppConstants.languages;
        } else {
          _selectedIndex = -1;
          _languages = [];
          AppConstants.languages.forEach((language) async {
            if (language.languageName.toLowerCase().contains(query.toLowerCase())) {
              _languages.add(language);
            }
          });
        }
        update();
      }
    }

    In the LocalizationController we have a function

      void loadCurrentLanguage() async {
        _locale = Locale(sharedPreferences.getString(AppConstants.LANGUAGE_CODE) ??
            AppConstants.languages[0].languageCode,
            sharedPreferences.getString(AppConstants.COUNTRY_CODE) ??
                AppConstants.languages[0].countryCode);
        _isLtr = _locale.languageCode != 'bn';
        for (int index = 0; index < AppConstants.languages.length; index++) {
          if (AppConstants.languages[index].languageCode == _locale.languageCode) {
            _selectedIndex = index;
            break;
          }
        }
        _languages = [];
        _languages.addAll(AppConstants.languages);
        update();
      }

    The above function, loads if we have any saved language in the app using locale(). Locale takes language code and country code.

     

    We will also need a route file. let's define our routes.

    class RouteHelper {
      static const String initial = '/';
      static const String splash = '/splash';
      static const String language='/language';
      static String getSplashRoute() => '$splash';
      static String getInitialRoute()=>'$initial';
      static String getLanguageRoute()=>'$language';
    
      static List<GetPage> routes = [
    
        GetPage(name: splash, page: () {
          return SplashScreen();
        }),
        GetPage(name: initial, page:(){
          return HomePage();
        }),
        GetPage(name:language, page:(){
          return LanguagePage();
        })
      ];
    }

    After splash screen user will go to LanguagePage(). On Languge screen user will be able to select a language and see the changes immediately.

    Let's create our splash screen

    class SplashScreen extends StatefulWidget {
      const SplashScreen({Key? key}) : super(key: key);
    
      @override
      _SplashScreenState createState() => _SplashScreenState();
    }
    
    class _SplashScreenState extends State<SplashScreen> with TickerProviderStateMixin{
      late Animation<double> animation;
      late AnimationController _controller;
      GlobalKey<ScaffoldState> _globalKey = GlobalKey();
    
      @override
      dispose() {
        _controller.dispose();
        super.dispose();
      }
    
      void initState() {
        super.initState();
        _controller =
        new AnimationController(vsync: this, duration: Duration(seconds: 2))..forward()
        ;
        animation = new CurvedAnimation(parent: _controller,
            curve: Curves.linear);
        Timer(
            Duration(seconds: 3),()=>Get.offNamed(RouteHelper.getLanguageRoute())
        );
      }
    
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          key: _globalKey,
          backgroundColor: Colors.white,
          body: Column(
            //crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ScaleTransition(
                  scale: animation,
                  child: Center(child: Image.asset("img/logo part 1.png", width:200))),
              Center(child: Image.asset("img/logo part 2.png", width:200,)),
            ],
          ),
        );
      }
    }

     

    After that we will create language screen. Here user will select the language and we will change the localization based on the user interaction.

    class LanguagePage extends StatelessWidget {
      final bool fromMenu;
      LanguagePage({this.fromMenu = false});
    
      @override
      Widget build(BuildContext context) {
        double? width = 375;
        return Scaffold(
          backgroundColor: Colors.white,
          body: SafeArea(
            child: GetBuilder<LocalizationController>(builder: (localizationController) {
              return Column(children: [
    
                Expanded(child: Center(
                  child: Scrollbar(
                    child: SingleChildScrollView(
                      physics: BouncingScrollPhysics(),
                      padding: EdgeInsets.all(5),
                      child: Center(child: SizedBox(
                        width: width,
                        child: Column(mainAxisSize: MainAxisSize.min,
                            crossAxisAlignment: CrossAxisAlignment.center, children: [
    
                              Center(child: Image.asset("img/logo part 1.png", width: 120)),
                              SizedBox(height: 5),
                              Center(child: Image.asset("img/logo part 2.png", width: 140)),
    
                              SizedBox(height: 30),
    
                              Padding(
                                padding: EdgeInsets.symmetric(horizontal: 10),
                                child: Text('select_language'.tr,),
                              ),
                              SizedBox(height: 10),
    
                              GridView.builder(
                                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                                    crossAxisCount:  2,
                                    childAspectRatio: 1,
                                  ),
                                  itemCount: 2,//localizationController.languages.length,
                                  physics: NeverScrollableScrollPhysics(),
                                  shrinkWrap: true,
                                  itemBuilder: (context, index) => LanguageWidget(
                                    languageModel: localizationController.languages[index],
                                    localizationController: localizationController, index: index,
                                  )
                              ),
    
    
                              SizedBox(height: 10),
    
                              Text('you_can_change_language'.tr, ),
    
                            ]),
                      )),
                    ),
                  ),
                )),
                ElevatedButton(
                  child: Text('save'.tr),
    
                  onPressed: () {
                    if(localizationController.languages.length > 0 && localizationController.selectedIndex != -1) {
                      localizationController.setLanguage(Locale(
                        AppConstants.languages[localizationController.selectedIndex].languageCode,
                        AppConstants.languages[localizationController.selectedIndex].countryCode,
                      ));
                      if (fromMenu) {
                        Navigator.pop(context);
                      } else {
                        Get.offNamed(RouteHelper.getInitialRoute());
                      }
                    }else {
                      Get.snackbar('select_a_language'.tr, 'select_a_language'.tr);
    
                    }
                  },
                ),
              ]);
            }),
          ),
        );
      }
    }
    

     

    After selecting and saving the language we will go to home page

    class HomePage extends StatelessWidget {
      const HomePage({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: ElevatedButton(
              onPressed: () {
                Get.offAllNamed(RouteHelper.getLanguageRoute());
              },
              child: Text("home".tr)
    
            ),
          )
        );
      }
    }
    

    Our language widget

    class LanguageWidget extends StatelessWidget {
      final LanguageModel languageModel;
      final LocalizationController localizationController;
      final int index;
      LanguageWidget({required this.languageModel, required this.localizationController,
        required this.index});
    
      @override
      Widget build(BuildContext context) {
        return InkWell(
          onTap: () {
            localizationController.setLanguage(Locale(
              AppConstants.languages[index].languageCode,
              AppConstants.languages[index].countryCode,
            ));
            localizationController.setSelectIndex(index);
          },
          child: Container(
            padding: EdgeInsets.all(10),
            margin: EdgeInsets.all(5),
            decoration: BoxDecoration(
              color: Theme.of(context).cardColor,
              borderRadius: BorderRadius.circular(10),
              boxShadow: [BoxShadow(
                  color: Colors.grey[200]!,
                  blurRadius: 5, spreadRadius: 1)],
            ),
            child: Stack(children: [
    
              Center(
                child: Column(mainAxisSize: MainAxisSize.min, children: [
                  SizedBox(height: 5),
                  Text(languageModel.languageName, ),
                ]),
              ),
    
              localizationController.selectedIndex == index ? Positioned(
                top: 0, right: 0, left: 0, bottom: 40,
                child: Icon(Icons.check_circle, color: Theme.of(context).primaryColor, size: 25),
              ) : SizedBox(),
    
            ]),
          ),
        );
      }
    }

    Message class is needed for internationalization

    class Messages extends Translations {
      final Map<String, Map<String, String>> languages;
      Messages({required this.languages});
    
      @override
      Map<String, Map<String, String>> get keys {
        return languages;
      }
    }

    The above class extends Translations class of Getx

    Now let's take a look at main.dart

    Future<void> main() async {
      // setPathUrlStrategy();
      WidgetsFlutterBinding.ensureInitialized();
    
      Map<String, Map<String, String>> _languages = await dep.init();
    
      runApp(MyApp(languages: _languages));
    }
    
    class MyApp extends StatelessWidget {
      final Map<String, Map<String, String>> languages;
    
      MyApp({required this.languages });
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return GetBuilder<LocalizationController>(builder: (localizationController){
        return GetMaterialApp(
    
          debugShowCheckedModeBanner: false,
          title: 'Flutter Demo',
          theme: ThemeData(
            primaryColor: Colors.blue,
            fontFamily: "Lato",
          ),
          locale: localizationController.locale,
          translations: Messages(languages: languages),
          fallbackLocale: Locale(AppConstants.languages[0].languageCode,
              AppConstants.languages[0].countryCode),
          initialRoute: RouteHelper.getSplashRoute(),
          getPages: RouteHelper.routes,
          defaultTransition: Transition.topLevel,
        );
      });
      }
    }
    

    Here we have three properties local and translation and fallbacklocale. They are very important settings. 

    locale: We can set this property using locationzationController.locale. It's the default locale. 

    translations: This has to do with JSON file format. Here you have to mention your JSON key value pair type.

    fallbacklocale: Here, we need to set up local(language) if default language is not found.

    Courses


    Recent posts