localize_and_translate 1.0.1
localize_and_translate: ^1.0.1 copied to clipboard
Easy Localize and Translate your flutter app, with this easy and powerful plugin
localize_and_translate #
localization and translation was never easier, simple way to translate your flutter apps and make it international
Screenshots #
[screenshot] [screenshot]
Methods #
Method | Job |
---|---|
currentLanguage |
returns current Language |
locale |
returns current Locale |
init() |
initialize things, before runApp() |
translate(word) |
returns word translation |
setNewLanguage('en') |
switch to another language |
locals() |
returns current Locales |
How To Use #
- add
localize_and_translate: ^<latest>
to pubspec.yaml dependencies - run
flutter pub get
into root dir of the app - add
import 'package:flutter_localizations/flutter_localizations.dart';
to useGlobalMaterialLocalizations.delegate
- add
import 'package:localize_and_translate/localize_and_translate.dart';
to use plugin 😁 - wrap app entry into
LocalizedApp()
, and 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 your languages
LIST_OF_LANGS = ['ar', 'en'];
- add
.json
translation files as assets
- For example :
'assets/langs/ar.json'
| `'assets/langs/en.json' - structure should look like
{
"appTitle" : "Example",
"buttonName" : "التحول للعربية",
}
{
"appTitle" : "تجربة",
"buttonName" : "English",
}
- define them as assets into pubspec.yaml
flutter:
assets:
- assets/langs/en.json
- assets/langs/ar.json
- run
flutter pub get
- into
main()
define your root directory
LANGS_DIR = 'assets/langs/';
- intialize plugin
await 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: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
locale: translator.locale,
supportedLocales: translator.locals(),
);
}
}
- enjoy like next example
- 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'),
style: TextStyle(fontSize: 35),
),
SizedBox(height: 150),
OutlineButton(
onPressed: () {
translator.setNewLanguage(
context,
newLanguage: translator.currentLanguage == 'ar' ? 'en' : 'ar',
remember: true,
restart: true,
);
},
child: Text(translator.translate('buttonTitle')),
),
],
),
),
);
}
}