How to make a Flutter App Multi-Lingual using TranslateApp Tool +source

This article is a showcase of – How to make an Cross-Platform App Multi-Lingual using TranslateApp – a Tool that went beyond just Java Desktop and Backend, Android, Web(JavaScript), and now Flutter.

Assuming you have Android Studio or Visual Studio Code and you have also Downloaded the Flutter SDK. After You create a new Project via some of the IDE Wizards or with Command Line (“flutter(.bat) create project_name”.), you’ll arrive to a screen or file and directory structure like this:

After you have a project, add some dependencies in the pubspec.yaml file:

  cupertino_icons: ^1.0.1
  flutter_localizations:
    sdk: flutter
  intl: any

This is with one tab button click on flutter_localizations:, and intl:any and two two tabs on sdk: flutter. Keep in mind that yaml files are tab sensitive like in Python scripts. After this, execute “flutter pub get” or the IDE will force you to.

Right now, you could go on with some skeleton code or with the TranslateApp. Let’s go with the second. Download it and run it. You’ll have a screen with a list of your translations lists:
Create a new list with translations. If you are using the latest version, you’ll have Flutter as an option:

Type in – in the path input field, the absolute path to the lib directory (or some of its subdirectories). Click on the Other tabs. Create Keys for translation:
and add some values to these keys:
and click Save & after that the Generate Button and you will have several new files generated:

You’ll need to update the main.dart file with several lines:
The imports:

import 'package:flutter_app_multilingual/AppLocalizations.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

….

//after home: 
      localizationsDelegates: [AppLocalizationsDelegate(),
       GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate
       ],
      // locale: Locale("bg"),
      supportedLocales: [
        const Locale('bg'),
        const Locale('en'),
        const Locale('es')
      ],

//and in the User Interface – replace the hardcoded value to:

            Text(AppLocalizations.of(context).hello_world //or some other generated by the TranslateApp key

After that you should be able to run and test your application:

As it is shown in the above video after minute 2:20 – if you’ve entered values of the keys for the different languages – the apps (and the browsers) will respect the selected by the user language. You could check them out here:
Web: https://programtom.com/dev_examples/flutter_i18n
Android: https://programtom.com/dev_examples/flutter_i18n/app-release.apk

One of the Released to production Apps that use the above code are the “What You Eat Apps & the Web App demoed on this video:

Article Image source: https://pixabay.com/illustrations/translate-translation-web-service-3796096/

How to make a Flutter App [with Source Code] Multi-Lingual using TranslateApp Tool

Leave a Reply Cancel reply