137 lines
4.7 KiB
Plaintext
137 lines
4.7 KiB
Plaintext
---
|
|
id: adding_localization
|
|
sidebar_position: 2
|
|
title: Adding Localization
|
|
---
|
|
|
|
Adding Localization To UI Widgets
|
|
|
|
### Introduction
|
|
|
|
We have a dedicated package for adding localization to our UI widgets. It's called `stream_chat_localizations` and you can find it [here](https://pub.dev/packages/stream_chat_localizations).
|
|
|
|
### Supported languages
|
|
|
|
At the moment we support the following languages:
|
|
- [English](https://github.com/GetStream/stream-chat-flutter/blob/master/packages/stream_chat_localizations/lib/src/stream_chat_localizations_en.dart)
|
|
- [Hindi](https://github.com/GetStream/stream-chat-flutter/blob/master/packages/stream_chat_localizations/lib/src/stream_chat_localizations_hi.dart)
|
|
- [Italian](https://github.com/GetStream/stream-chat-flutter/blob/master/packages/stream_chat_localizations/lib/src/stream_chat_localizations_it.dart)
|
|
- [French](https://github.com/GetStream/stream-chat-flutter/blob/master/packages/stream_chat_localizations/lib/src/stream_chat_localizations_fr.dart)
|
|
|
|
More languages will be added in the future. Feel free to [contribute](https://github.com/GetStream/stream-chat-flutter/blob/master/CONTRIBUTING.md) to add more languages.
|
|
|
|
### Add dependency
|
|
|
|
Add this to your package's pubspec.yaml file, use the latest version [](https://pub.dartlang.org/packages/stream_chat_localizations)
|
|
```yaml
|
|
dependencies:
|
|
stream_chat_localizations: ^latest_version
|
|
```
|
|
|
|
You should then run `flutter packages get`
|
|
|
|
### Usage
|
|
|
|
Flutter generally and the Stream Chat SDK will use the system locale of the users device, if that locale is supported (see below), if the locale is not supported we will default to `en`
|
|
|
|
```dart
|
|
import 'package:flutter/material.dart';
|
|
import 'package:stream_chat_localizations/stream_chat_localizations.dart';
|
|
|
|
void main() {
|
|
WidgetsFlutterBinding.ensureInitialized();
|
|
runApp(MyApp());
|
|
}
|
|
|
|
class MyApp extends StatelessWidget {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return MaterialApp(
|
|
// Add all the supported locales
|
|
supportedLocales: const [
|
|
Locale('en'),
|
|
Locale('hi'),
|
|
Locale('fr'),
|
|
Locale('it'),
|
|
],
|
|
// Add GlobalStreamChatLocalizations.delegates
|
|
localizationsDelegates: GlobalStreamChatLocalizations.delegates,
|
|
builder: (context, widget) => StreamChat(
|
|
client: client,
|
|
child: widget,
|
|
),
|
|
home: StreamChannel(
|
|
channel: channel,
|
|
child: const ChannelPage(),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
```
|
|
|
|
### Adding a new language
|
|
|
|
To add a new language, create a new class extending `GlobalStreamChatLocalizations` and create a delegate for it, adding it to the `delegates` array.
|
|
|
|
Checkout [this example](https://github.com/GetStream/stream-chat-flutter/blob/master/packages/stream_chat_localizations/example/lib/add_new_lang.dart) to see how to add a new language.
|
|
|
|
### Override exisiting languages
|
|
|
|
To override an existing language, create a new class extending that particular language class and create a delegate for it, adding it to the `delegates` array.
|
|
|
|
Checkout [this example](https://github.com/GetStream/stream-chat-flutter/blob/master/packages/stream_chat_localizations/example/lib/override_lang.dart) to see how to override an existing language.
|
|
|
|
### Changing the default language
|
|
|
|
To change the default language you can use the `MaterialApp.localeListResolutionCallback` property.
|
|
Here is an example of how that would look like:
|
|
|
|
```dart
|
|
MaterialApp(
|
|
theme: ThemeData.light(),
|
|
darkTheme: ThemeData.dark(),
|
|
// Add all the supported locales
|
|
supportedLocales: const [
|
|
Locale('en'),
|
|
Locale('hi'),
|
|
Locale('fr'),
|
|
Locale('it'),
|
|
],
|
|
localeListResolutionCallback: (locales, supportedLocales) {
|
|
final supportedLanguageCodes =
|
|
supportedLocales.map((e) => e.languageCode);
|
|
if (locales != null) {
|
|
for (final locale in locales) {
|
|
if (supportedLanguageCodes.contains(locale.languageCode)) {
|
|
return locale;
|
|
}
|
|
}
|
|
}
|
|
|
|
return const Locale('it');
|
|
},
|
|
// Add GlobalStreamChatLocalizations.delegates
|
|
localizationsDelegates: GlobalStreamChatLocalizations.delegates,
|
|
...
|
|
|
|
```
|
|
|
|
In this case we're using Italian as the default language.
|
|
|
|
### ⚠️ Note on **iOS**
|
|
|
|
For translation to work on **iOS** you need to add supported locales to
|
|
`ios/Runner/Info.plist` as described [here](https://flutter.dev/docs/development/accessibility-and-localization/internationalization#specifying-supportedlocales).
|
|
|
|
Example:
|
|
|
|
```xml
|
|
<key>CFBundleLocalizations</key>
|
|
<array>
|
|
<string>en</string>
|
|
<string>nb</string>
|
|
<string>fr</string>
|
|
<string>it</string>
|
|
</array>
|
|
```
|