localization and translation was never easier, simple way to translate your flutter apps and make it international
Method | Job |
---|---|
currentLanguage |
active language code |
locale |
active Locale |
init() |
initialize things, before runApp() |
translate('word') |
word translation |
setNewLanguage(context,'en',restart: true, remember: true,) |
change language |
locals() |
locales list |
isDirectionRTL() |
is Direction RTL check |
- add
localize_and_translate: any
as dependencies inpubspec.yaml
- run
flutter pub get
into app folder - add
.json
translation files as assets
- For example :
'assets/langs/ar.json'
|'assets/langs/en.json'
- structure should look like
{
"appTitle" : "Example",
"textArea" : "Thisi is just a test text",
}
{
"appTitle" : "تجربة",
"textArea" : "هذا مجرد نموذج للتأكد من اداء الاداة",
}
- define them as assets into pubspec.yaml
flutter:
assets:
- assets/langs/en.json
- assets/langs/ar.json
- run
flutter pub get
- add imports to main.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:localize_and_translate/localize_and_translate.dart';
import 'package:flutter_localizations/flutter_localizations.dart';`
- wrap app entry into
LocalizedApp()
** make sure you define it's child into different place "NOT INSIDE" **
runApp(
LocalizedApp(
child: MyApp(),
),
);
- convert your
main()
method to async, we will need next
Future<void> main() async {
runApp(
LocalizedApp(
child: MyApp(),
),
);
}
- add
WidgetsFlutterBinding.ensureInitialized();
at very first ofmain()
- inside
main()
define: Languages + Root dir, then callawait translator.init();
- so now your
main()
should look like this
Future<void> main() async {
// if your flutter > 1.7.8 : ensure flutter activated
WidgetsFlutterBinding.ensureInitialized();
LIST_OF_LANGS = ['ar', 'en']; // define languages
LANGS_DIR = 'assets/langs/'; // define directory
await translator.init(); // intialize
runApp(
LocalizedApp(
child: MyApp(),
),
);
}
- define your
LocalizedApp()
child asMaterialApp()
like this
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(), // re Route
localizationsDelegates: [ // Android + iOS Delegates
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
DefaultCupertinoLocalizations.delegate,
],
locale: translator.locale, // active locale
supportedLocales: translator.locals(), // locals list
);
}
}
- Enjoy
- we use
translate(word)
setNewLanguage(languageCode)
: and it's parameters
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: Drawer(),
appBar: AppBar(
title: Text(translator.translate('appTitle')),
// centerTitle: true,
),
body: Container(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(height: 50),
Text(
translator.translate('textArea'), // Translation
style: TextStyle(fontSize: 35),
),
SizedBox(height: 150),
OutlineButton(
onPressed: () { // setNewLanguage 'ar'
translator.setNewLanguage(
context,
newLanguage: 'ar',
remember: true,
restart: true,
);
},
child: Text('العربية'),
),
OutlineButton(
onPressed: () { // setNewLanguage 'en'
translator.setNewLanguage(
context,
newLanguage: 'en',
remember: true,
restart: true,
);
},
child: Text('English'),
),
],
),
),
);
}
}