locale_switcher_dev
A widget for switching the locale of your application.
Content
About
This package will dynamically generate version of package locale_switcher which allows you to add locale-switching functionality to your app with just 2 lines of code.
Unlike locale_switcher, it required a few more lines to set up, but allow you to control which flags are included (or none) and which packages it depend on (or none). See setup below.
Setup
Full example of pubspec.yaml online.
This package should be in 'dev_dependencies:' section of pubspec.yaml
.
You will also needed to add generated package into
'dependencies:' section, like this:
locale_switcher:
# please note: these are country codes, not language codes!
flags: [ 'us', 'vn', 'de' ] # generated package will only have these svg flags, full list here https://github.com/cedvdb/flutter_circle_flags/tree/main/assets/svg
# also can be bool value:
# flags: true - by default(include all flags), set to false to not include flags
shared_preferences: false # default - true
#easy_localization: false # default - false, set true if you use easy_localization
# Note: after changing these lines, run: dart run build_runner build
dependencies:
locale_switcher: # version should be empty or any
# this will be generated by: dart run build_runner build (you need to run this command first, then add `path` line)
path: lib/src/packages/locale_switcher
dev_dependencies:
locale_switcher_dev: # this package
The locale_switcher is NOT a localization package, it is just a few useful widgets that extend functionality of localization systems, such as: intl, easy_localization, etc...
Features
-
LocaleManager widget:
- optionally: load/stores the last selected locale in
SharedPreferences
, - update locale of app (listen to
notifier
and rebuildMaterialApp
), - observes changes in the system locale,
- optionally: load/stores the last selected locale in
-
LocaleSwitcher - a widget to switch locale:
- show a list of locales and special option to use system locale,
- constructor LocaleSwitcher.segmentedButton,
- constructor LocaleSwitcher.menu,
- constructor LocaleSwitcher.custom,
- constructor LocaleSwitcher.iconButton - button/indicator which open popup window to select locale,
-
Some other helpers:
- LangIconWithToolTip class with additional constructor forIconBuilder ,
- showSelectLocaleDialog.
- Extension for Locale show flag - Locale.flag
Usage
- Wrap
MaterialApp
orCupertinoApp
with LocaleManager (example forintl
package):
@override
Widget build(BuildContext context, WidgetRef ref) {
return LocaleManager(
child: MaterialApp(
locale: LocaleSwitcher.localeBestMatch,
supportedLocales: AppLocalizations.supportedLocales,
localizationsDelegates: AppLocalizations.localizationsDelegates,
//...
- Add LocaleSwitcher widget anywhere into your app.
Troubleshooting
Note: localization should be set up before you start to use this package, if there some problems - please, check next section and/or documentation of localization system you use, before reporting bug.
Check that intl package is setup correctly:
The following instructions are from intl package, so you probably already did them:
In pubspec.yaml
:
dependencies: # in this section
intl:
flutter_localizations:
sdk: flutter
dev_dependencies: # in this section
build_runner:
flutter: # in this section
generate: true
Optionally - in l10n.yaml:
arb-dir: lib/src/l10n
template-arb-file: intl_en.arb
output-dir: lib/src/l10n/generated
output-localization-file: app_localizations.dart
untranslated-messages-file: desiredFileName.txt
preferred-supported-locales: [ "en", "vi", "de" ]
nullable-getter: false
Example
With intl package:
Another example code: LocaleSwitcher used without LocaleManager(not recommended).
Example with dynamic option switch: here.
With easy_localization package:
locale_switcher_dev + easy_localization: https://github.com/Alexqwesa/locale_switcher/tree/builder/examples/easy_localization (recommended)
locale_switcher + easy_localization: https://github.com/Alexqwesa/locale_switcher/tree/main/examples/easy_localization
TODO:
FAQ
- How to change order of languages?
Languages are shown in the same order as they listed in l10n.yaml.
- How to change flag of language?
Use LocaleManager.reassign
parameter like this:
LocaleManager(
reassign: {'en': ['GB', 'English', <Your_icon_optional>]}
// (first two options are required, third is optional)
// first option is the code of country which flag you want to use
...
)
- How to use localization outside of MaterialApp
(or CupertinoApp)?
Here is a useful example, although it is not depend on this package:
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
/// Access localization through locale
extension LocaleWithDelegate on Locale {
/// Get class with translation strings for this locale.
AppLocalizations get tr => lookupAppLocalizations(this);
}
Locale("en").tr.example
// or
LocaleManager.locale.value.tr.example