Mein neues Projekt hat eben erst begonnen, aber es ist niemals zu früh, um ordentliche Lokalisierung einzuführen. Je länger man damit wartet, desto mehr Arbeit kommt schließlich auf einen zu.

Das Problem

Selbst wenn man nicht mehrere Sprachen beherrscht möchte man seine App vielleicht auch den Märkten anderer Länder zugänglicher machen.
Oder man spricht durchaus mehrere Sprachen und baut Lokalisierung ein, einfach weil mann es kann.
Oder man möchte einfach alle Label, Texte und Strings an einem Ort versammelt haben, wie es sich für einen guten Programmierer gehört.

Einfach niemals eine Zeile Klartext mitten im Quellcode verwenden, abgesehen von den Lokalisierungs-Dateien. Das gehört sich einfach nicht…

Die Lehrbuch-Lösung

Ich verdiene kaum Anerkennung für den Code weiter unten, bitte schaut einfach in die Flutter-Dokumentation zur Internationalisierung von Flutter Apps.

Kurz gesagt benötigt man eine Hilfsklasse, welche sich um die Lokalisierung kümmert, muss der Hauptklasse einmal beibringen, welche Sprache verwendet werden soll und dann noch Dateien für die Übersetzungen anlegen.

Das Programmieren

Wieder stelle ich nur die mindestens benötigten Dateien für eine Umsetzung der Lokalisierung vor. Diese App kann nicht viel mehr, als (lokalisierten) Text anzeigen. Aber es ist ein guter Ausgangspunkt.

pubspec.yaml (Dependency hinzufügen und assets einkommentieren)

flutter_localizations:
sdk: flutter
assets:
- assets/lang/

localization.dart

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';


class DemoLocalizations {
DemoLocalizations(this.locale);

final Locale locale;

static DemoLocalizations of(BuildContext context) {
return Localizations.of<DemoLocalizations>(context, DemoLocalizations);
}

Map<String, String> _sentences;

Future<bool> load() async {
String data = await rootBundle.loadString(
'assets/lang/${this.locale.languageCode}.json');
Map<String, dynamic> _result = json.decode(data);

this._sentences = new Map();
_result.forEach((String key, dynamic value) {
this._sentences[key] = value.toString();
});

return true;
}

String trans(String key) {
return this._sentences[key];
}
}

class DemoLocalizationsDelegate
extends LocalizationsDelegate<DemoLocalizations> {
const DemoLocalizationsDelegate();

@override
bool isSupported(Locale locale) => ['de', 'en'].contains(locale.languageCode);

@override
Future<DemoLocalizations> load(Locale locale) async {
DemoLocalizations localizations = new DemoLocalizations(locale);
await localizations.load();

print("Load ${locale.languageCode}");

return localizations;
}

@override
bool shouldReload(DemoLocalizationsDelegate old) => false;
}

main.dart

Dieser Code wird die Sprache des Systems nutzen, bzw. auf das definierte Fallback zurück greifen.

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

import 'localization.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
localizationsDelegates: [
const DemoLocalizationsDelegate(),
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
const Locale('en', 'US'), // English
const Locale('de', 'DE'), // German
],
localeResolutionCallback: (Locale locale,
Iterable<Locale> supportedLocales) {
if (locale != null) {
for (Locale supportedLocale in supportedLocales) {
if (supportedLocale.languageCode == locale.languageCode ||
supportedLocale.countryCode == locale.countryCode) {
return supportedLocale;
}
}
}
return supportedLocales.first;
},
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(DemoLocalizations.of(context).trans('title')),
),
body: Column(
children: [
Text(DemoLocalizations.of(context).trans('text1')),
],
)
);
}
}


In einem Ordner assets/lang/ wie im pubspec.yaml beschrieben, werden Dateien für jede Sprache angelegt, die unterstützt werden soll.

de.json

{
  "title": "Lokalisierung",
  "text1": "Hallo Welt"
}

Das Ergebnis

Wie man sieht arbeitet mein System auf deutsch.
Es sieht nicht nach viel aus, aber je größer die App wird, desto besser ist es, wenn man seine Lokalisierung bereits eingerichtet hat.

This image has an empty alt attribute; its file name is Bildschirmfoto-2021-03-08-um-22.21.09-990x1024.png

Zusätzlich…

Wenn man für iOS entwickelt, bitte daran denken, die unterstützten Sprachen in info.plist einzutragen (wie es so schön im oben verlinken Tutorial aufgeführt wird).

Seid ihr multilingual oder warum ist für euch eine Lokalisierung eurer App noch interessant?

Meine Flutter-Fahrt – Lokalisierung

Beitragsnavigation


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert