{"id":134,"date":"2021-03-10T10:00:00","date_gmt":"2021-03-10T10:00:00","guid":{"rendered":"http:\/\/erdbeerbeet.com\/?p=134"},"modified":"2021-09-06T13:43:30","modified_gmt":"2021-09-06T13:43:30","slug":"my-flutter-flight-localization","status":"publish","type":"post","link":"https:\/\/erdbeerbeet.com\/de\/my-flutter-flight-localization","title":{"rendered":"Meine Flutter-Fahrt – Lokalisierung"},"content":{"rendered":"\n

Mein neues Projekt hat eben erst begonnen, aber es ist niemals zu fr\u00fch, um ordentliche Lokalisierung einzuf\u00fchren. Je l\u00e4nger man damit wartet, desto mehr Arbeit kommt schlie\u00dflich auf einen zu.<\/p>\n\n\n\n

\n

Das Problem<\/h2>\n\n\n\n

Selbst wenn man nicht mehrere Sprachen beherrscht m\u00f6chte man seine App vielleicht auch den M\u00e4rkten anderer L\u00e4nder zug\u00e4nglicher machen.
Oder man spricht durchaus mehrere Sprachen und baut Lokalisierung ein, einfach weil mann es kann.
Oder man m\u00f6chte einfach alle Label, Texte und Strings an einem Ort versammelt haben, wie es sich f\u00fcr einen guten Programmierer geh\u00f6rt.<\/p>\n\n\n\n

Einfach niemals eine Zeile Klartext mitten im Quellcode verwenden, abgesehen von den Lokalisierungs-Dateien. Das geh\u00f6rt sich einfach nicht…<\/p>\n<\/div><\/div>\n\n\n\n

Die Lehrbuch-L\u00f6sung<\/h2>\n\n\n\n

Ich verdiene kaum Anerkennung f\u00fcr den Code weiter unten, bitte schaut einfach in die Flutter-Dokumentation zur Internationalisierung von Flutter Apps<\/a>.<\/p>\n\n\n\n

Kurz gesagt ben\u00f6tigt man eine Hilfsklasse, welche sich um die Lokalisierung k\u00fcmmert, muss der Hauptklasse einmal beibringen, welche Sprache verwendet werden soll und dann noch Dateien f\u00fcr die \u00dcbersetzungen anlegen.<\/p>\n\n\n\n

Das Programmieren<\/h2>\n\n\n\n

Wieder stelle ich nur die mindestens ben\u00f6tigten Dateien f\u00fcr eine Umsetzung der Lokalisierung vor. Diese App kann nicht viel mehr, als (lokalisierten) Text anzeigen. Aber es ist ein guter Ausgangspunkt.<\/p>\n\n\n\n

pubspec.yaml<\/strong> (Dependency hinzuf\u00fcgen und assets einkommentieren)<\/p>\n\n\n\n

flutter_localizations:
    sdk: flutter<\/code><\/pre>\n\n\n\n
assets:
    - assets\/lang\/<\/code><\/pre>\n\n\n\n
localization.dart<\/strong><\/p>\n\n\n\n
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;
}<\/code><\/pre>\n\n\n\n
main.dart<\/strong><\/p>\n\n\n\n
Dieser Code wird die Sprache des Systems nutzen, bzw. auf das definierte Fallback zur\u00fcck greifen.<\/p>\n\n\n\n
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')),
        ],
      )
    );
  }
}
\ufeff<\/code><\/pre>\n\n\n\n
In einem Ordner assets\/lang\/ wie im pubspec.yaml beschrieben, werden Dateien f\u00fcr jede Sprache angelegt, die unterst\u00fctzt werden soll.<\/p>\n\n\n\n
de.json<\/strong><\/p>\n\n\n\n
{\n  \"title\": \"Lokalisierung\",\n  \"text1\": \"Hallo Welt\"\n}<\/code><\/pre>\n\n\n\n
\n
Das Ergebnis<\/h2>\n\n\n\n
Wie man sieht arbeitet mein System auf deutsch.
Es sieht nicht nach viel aus, aber je gr\u00f6\u00dfer die App wird, desto besser ist es, wenn man seine Lokalisierung bereits eingerichtet hat.<\/p>\n<\/div><\/div>\n\n\n\n
\"This<\/figure>\n\n\n\n
\n
Zus\u00e4tzlich…<\/h2>\n\n\n\n
Wenn man f\u00fcr iOS entwickelt, bitte daran denken, die unterst\u00fctzten Sprachen in info.plist einzutragen (wie es so sch\u00f6n im oben verlinken Tutorial aufgef\u00fchrt wird).<\/p>\n<\/div><\/div>\n\n\n\n
Seid ihr multilingual oder warum ist f\u00fcr euch eine Lokalisierung eurer App noch interessant?<\/p>\n","protected":false},"excerpt":{"rendered":"
Man kann gar nicht fr\u00fch genug anfangen, seine App zu lokalisieren. Ganz egal, ob f\u00fcr mehrere Sprachen, oder weil man seinen Text aufger\u00e4umt haben m\u00f6chte.<\/p>\n","protected":false},"author":1,"featured_media":384,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[48,13,12],"tags":[16,14,17],"class_list":["post-134","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-companero","category-flutter","category-programming","tag-app","tag-flutter","tag-localization"],"translation":{"provider":"WPGlobus","version":"3.0.0","language":"de","enabled_languages":["en","de"],"languages":{"en":{"title":true,"content":true,"excerpt":true},"de":{"title":true,"content":true,"excerpt":true}}},"_links":{"self":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/comments?post=134"}],"version-history":[{"count":4,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/134\/revisions"}],"predecessor-version":[{"id":397,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/134\/revisions\/397"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/media\/384"}],"wp:attachment":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/media?parent=134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/categories?post=134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/tags?post=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}