{"id":133282,"date":"2021-04-06T09:38:00","date_gmt":"2021-04-06T07:38:00","guid":{"rendered":"https:\/\/phrase.com\/blog\/posts\/der-ultimative-leitfaden-zur-flutter-lokalisierung\/"},"modified":"2026-04-15T17:48:23","modified_gmt":"2026-04-15T15:48:23","slug":"flutter-localization","status":"publish","type":"post","link":"https:\/\/phrase.com\/de\/blog\/posts\/flutter-localization\/","title":{"rendered":"Flutter-Lokalisierung: der ultimative Leitfaden"},"content":{"rendered":"\n<p><a href=\"https:\/\/flutter.dev\/\">Flutter<\/a>, Googles plattform\u00fcbergreifendes App-Framework, hat nicht nur an Popularit\u00e4t im Bereich der mobilen App-Entwicklung gewonnen, sondern sich nahtlos auf das Web, Linux, macOS und Windows ausgeweitet. Dar\u00fcber hinaus ist Flutter blitzschnell und es macht Spa\u00df, damit zu arbeiten.<\/p>\n\n\n\n<p>Wenn es um die Internationalisierung (i18n) von Flutter-Apps geht, hat das Flutter-Team eine solide integrierte L\u00f6sung entwickelt. In diesem Tutorial richtest du die i18n-Bibliotheken von Flutter ein und konfigurierst sie, l\u00e4dst und zeigst \u00dcbersetzungen an und arbeitest dich durch die Formatierung von Datum und Uhrzeit sowie andere Lokalisierungsfunktionen.<\/p>\n\n\n\n<p>\ud83e\udd3f&nbsp;<em>Mehr Info \u00bb<\/em> Flutters natives Lokalisierungspaket basiert auf dem hauseigenen <a href=\"https:\/\/pub.dev\/packages\/intl\">Dart intl-Paket<\/a>.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Overview<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/phrase.com\/de\/blog\/posts\/flutter-localization\/#unsere-demo-app\" >Unsere Demo-App<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/phrase.com\/de\/blog\/posts\/flutter-localization\/#verwendete-versionen\" >Verwendete Versionen<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/phrase.com\/de\/blog\/posts\/flutter-localization\/#installation-und-einrichtung\" >Installation und Einrichtung<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/phrase.com\/de\/blog\/posts\/flutter-localization\/#lokalisierung-konfigurieren\" >Lokalisierung konfigurieren<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/phrase.com\/de\/blog\/posts\/flutter-localization\/#uebersetzungsdateien-hinzufuegen\" >\u00dcbersetzungsdateien hinzuf\u00fcgen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/phrase.com\/de\/blog\/posts\/flutter-localization\/#konfigurieren-unserer-app\" >Konfigurieren unserer App<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/phrase.com\/de\/blog\/posts\/flutter-localization\/#automatische-codegenerierung\" >Automatische Codegenerierung<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/phrase.com\/de\/blog\/posts\/flutter-localization\/#so-nutzt-du-unsere-applocalizations\" >So nutzt du unsere AppLocalizations<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/phrase.com\/de\/blog\/posts\/flutter-localization\/#spracheinstellung\" >Spracheinstellung<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/phrase.com\/de\/blog\/posts\/flutter-localization\/#aktualisierung-des-ios-projekts\" >Aktualisierung des iOS-Projekts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/phrase.com\/de\/blog\/posts\/flutter-localization\/#abrufen-der-aktiven-sprache\" >Abrufen der aktiven Sprache<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/phrase.com\/de\/blog\/posts\/flutter-localization\/#grundlegende-uebersetzungsnachrichten\" >Grundlegende \u00dcbersetzungsnachrichten<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/phrase.com\/de\/blog\/posts\/flutter-localization\/#interpolation-in-nachrichten\" >Interpolation in Nachrichten<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/phrase.com\/de\/blog\/posts\/flutter-localization\/#pluralformen\" >Pluralformen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/phrase.com\/de\/blog\/posts\/flutter-localization\/#zahlenformatierung\" >Zahlenformatierung<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/phrase.com\/de\/blog\/posts\/flutter-localization\/#datumsformatierung\" >Datumsformatierung<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/phrase.com\/de\/blog\/posts\/flutter-localization\/#schreibrichtung-von-links-nach-rechts-und-von-rechts-nach-links\" >Schreibrichtung: von links nach rechts und von rechts nach links<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/phrase.com\/de\/blog\/posts\/flutter-localization\/#hinzufuegen-lokalisierter-assets\" >Hinzuf\u00fcgen lokalisierter Assets<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/phrase.com\/de\/blog\/posts\/flutter-localization\/#sprache-in-der-app-aendern\" >Sprache in der App \u00e4ndern<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/phrase.com\/de\/blog\/posts\/flutter-localization\/#flutter-lokalisierung-leicht-gemacht\" >Flutter-Lokalisierung leicht gemacht<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\" id=\"h-unsere-demo-app\"><span class=\"ez-toc-section\" id=\"unsere-demo-app\"><\/span>Unsere Demo-App<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Um die Dinge \u00fcbersichtlich und unterhaltsam zu halten, werden wir eine kleine Demo-App erstellen und lokalisieren.&nbsp;<em>Helden der Informatik<\/em> pr\u00e4sentiert eine Auswahl bemerkenswerter Pers\u00f6nlichkeiten aus der relativ kurzen Geschichte der Informatik.<\/p>\n\n\n\n<figure class=\"wp-block-image wp-image-13861\"><img decoding=\"async\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2021\/04\/flutteri18n2021p1-app-en-544x1024.png\" alt=\"Startbildschirm Heroes of Computer Science | Phrase\"\/><figcaption class=\"wp-element-caption\">Unsere App in Englisch&nbsp;\u2013&nbsp;und bald in anderen Sprachen<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-verwendete-versionen\"><span class=\"ez-toc-section\" id=\"verwendete-versionen\"><\/span>Verwendete Versionen<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Wir verwenden die folgenden Sprach-, Framework- und Paketversionen in diesem Artikel:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dart 3.1.1<\/li>\n\n\n\n<li>Flutter 3.13.3<\/li>\n\n\n\n<li>DevTools 2.25.0<\/li>\n\n\n\n<li>flutter_localizations (Version scheint an Flutter gebunden zu sein) \u2013 bietet Lokalisierungen f\u00fcr g\u00e4ngige Widgets wie Material- oder Cupertino-Widgets.<\/li>\n\n\n\n<li>intl 0.18.0&nbsp;\u2013 das R\u00fcckgrat des Lokalisierungssystems; es erm\u00f6glicht uns, unsere eigenen Lokalisierungen zu erstellen und zu verwenden; wird zur Formatierung von Datumsangaben und Zahlen verwendet.<\/li>\n<\/ul>\n\n\n\n<p>Schauen wir uns den Code f\u00fcr unsere Starter-App an, der ziemlich einfach ist.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"Dart\" data-shcb-language-slug=\"dart\"><span><code class=\"hljs language-dart\">\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter\/material.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'screens\/hero_list.dart'<\/span>;\n\n<span class=\"hljs-keyword\">void<\/span> main() =&gt; runApp(MyApp());\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">MyApp<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatelessWidget<\/span> <\/span>{\n  <span class=\"hljs-meta\">@override<\/span>\n  Widget build(BuildContext context) {\n    <span class=\"hljs-keyword\">return<\/span> MaterialApp(\n      title: <span class=\"hljs-string\">'Heroes of Computer Science'<\/span>,\n      theme: ThemeData(\n        primarySwatch: Colors.blue,\n      ),\n      home: HeroList(title: <span class=\"hljs-string\">'Heroes of Computer Science'<\/span>),\n    );\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">Dart<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">dart<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Unser Root-Widget ist eine grundlegende <code>MaterialApp<\/code>, mit einer <code>HeroList<\/code> an ihrer <code>home<\/code>-Route.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"Dart\" data-shcb-language-slug=\"dart\"><span><code class=\"hljs language-dart\"><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter\/material.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter_i18n_2021\/screens\/settings.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter_i18n_2021\/widgets\/hero_card.dart'<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">HeroList<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatelessWidget<\/span> <\/span>{\n  <span class=\"hljs-keyword\">final<\/span> <span class=\"hljs-built_in\">String<\/span> title;\n\n  HeroList({<span class=\"hljs-keyword\">this<\/span>.title = <span class=\"hljs-string\">''<\/span>});\n\n  <span class=\"hljs-meta\">@override<\/span>\n  Widget build(BuildContext context) {\n    <span class=\"hljs-keyword\">return<\/span> Scaffold(\n      appBar: AppBar(\n        title: Text(title),\n        actions: &lt;Widget&gt;&#91;\n          IconButton(\n            icon: Icon(Icons.settings),\n            tooltip: <span class=\"hljs-string\">'Open settings'<\/span>,\n            onPressed: () {\n              Navigator.push(\n                context,\n                MaterialPageRoute(builder: (context) =&gt; Settings()),\n              );\n            },\n          )\n        ],\n      ),\n      body: Padding(\n        padding: <span class=\"hljs-keyword\">const<\/span> EdgeInsets.all(<span class=\"hljs-number\">16<\/span>),\n        child: Column(\n          children: &#91;\n            Padding(\n              padding: <span class=\"hljs-keyword\">const<\/span> EdgeInsets.only(bottom: <span class=\"hljs-number\">8.0<\/span>),\n              child: Text(<span class=\"hljs-string\">'6 Heroes'<\/span>),\n            ),\n            Expanded(\n              child: ListView(\n                children: &lt;Widget&gt;&#91;\n                  HeroCard(\n                    name: <span class=\"hljs-string\">'Grace Hopper'<\/span>,\n                    born: <span class=\"hljs-string\">'9 December 1906'<\/span>,\n                    bio: <span class=\"hljs-string\">'Devised theory of machine...'<\/span>,\n                  ),\n                  HeroCard(\n                    name: <span class=\"hljs-string\">'Alan Turing'<\/span>,\n                    born: <span class=\"hljs-number\">23.<\/span> Juni <span class=\"hljs-number\">1912<\/span>\n                    bio: <span class=\"hljs-string\">'Father of theoretical computer...'<\/span>,\n                  ),\n                  <span class=\"hljs-comment\">\/\/ ...<\/span>\n                ],\n              ),\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">Dart<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">dart<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><code>HeroList<\/code> beherbergt haupts\u00e4chlich eine <code>ListView<\/code> mit parametrisierten <code>HeroCard<\/code>-Eintr\u00e4gen.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter\/material.dart'<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">HeroCard<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatelessWidget<\/span> <\/span>{\n  final <span class=\"hljs-built_in\">String<\/span> name;\n  final <span class=\"hljs-built_in\">String<\/span> born;\n  final <span class=\"hljs-built_in\">String<\/span> bio;\n  final <span class=\"hljs-built_in\">String<\/span> imagePath;\n  final <span class=\"hljs-built_in\">String<\/span> placeholderImagePath = <span class=\"hljs-string\">'assets\/images\/placeholder.jpg'<\/span>;\n\n  <span class=\"hljs-keyword\">const<\/span> HeroCard({\n    Key key,\n    <span class=\"hljs-keyword\">this<\/span>.name = <span class=\"hljs-string\">''<\/span>,\n    <span class=\"hljs-keyword\">this<\/span>.born = <span class=\"hljs-string\">''<\/span>,\n    <span class=\"hljs-keyword\">this<\/span>.bio = <span class=\"hljs-string\">''<\/span>,\n    <span class=\"hljs-keyword\">this<\/span>.imagePath,\n  }) : <span class=\"hljs-keyword\">super<\/span>(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    <span class=\"hljs-keyword\">var<\/span> theme = Theme.of(context);\n\n    <span class=\"hljs-keyword\">return<\/span> Card(\n      child: Padding(\n        padding: <span class=\"hljs-keyword\">const<\/span> EdgeInsets.all(<span class=\"hljs-number\">4.0<\/span>),\n        <span class=\"hljs-attr\">child<\/span>: Row(\n          crossAxisAlignment: CrossAxisAlignment.start,\n          <span class=\"hljs-attr\">children<\/span>: &lt;Widget&gt;&#91;\n            Padding(\n              padding: const EdgeInsets.only(right: 8.0),\n              child: ClipRRect(\n                borderRadius: BorderRadius.circular(2),\n                child: Image.asset(\n                  imagePath ?? placeholderImagePath,\n                  width: 100\n                  height: 100,\u00a0\n                ),\n              ),\n            ),\n            Expanded(\n              child: Column(\n                crossAxisAlignment: CrossAxisAlignment.start,\n                children: &lt;Widget&gt;&#91;\n                  Padding(\n                    padding: const EdgeInsets.only(top: 4),\n                    child: Text(\n                      name,\n                      style: theme.textTheme.headline6,\n                    ),\n                  ),\n                  Padding(\n                    padding: const EdgeInsets.only(top: 2, bottom: 4),\n                    child: Text(\n                      born.isEmpty ? '' : 'Born $born',\n                      style: TextStyle(\n                        fontSize: 12,\n                        fontWeight: FontWeight.w300,\n                      ),\n                    ),\n                  ),\n                  Text(\n                    bio,\n                    style: TextStyle(fontSize: 14),\n                  ),\n                ],\n              ),\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><code>HeroCard<\/code> zeigt das angegebene Bild und die Textparameter in einem schicken Material-<code>Card<\/code>-Widget und ordnet alles attraktiv an. Gut, dann sollten wir mit der Lokalisierung loslegen!<\/p>\n\n\n\n<p>\ud83d\udd17 <em>Ressource \u00bb<\/em> Du kannst den Code der App bis zu diesem Punkt aus dem <a href=\"https:\/\/github.com\/PhraseApp-Blog\/flutter-2-i18n-2021\/tree\/start\">start-Branch unseres GitHub-Repository<\/a> erhalten. Der <a href=\"https:\/\/github.com\/PhraseApp-Blog\/flutter-2-i18n-2021\/tree\/main\">main branch<\/a> enth\u00e4lt au\u00dferdem die vollst\u00e4ndig lokalisierte App.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-installation-und-einrichtung\"><span class=\"ez-toc-section\" id=\"installation-und-einrichtung\"><\/span>Installation und Einrichtung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Wir k\u00f6nnen unsere Pakete installieren, indem wir ein paar Zeilen zu <code>pubspec.yaml<\/code> hinzuf\u00fcgen.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"YAML\" data-shcb-language-slug=\"yaml\"><span><code class=\"hljs language-yaml\"><span class=\"hljs-attr\">Version:<\/span> <span class=\"hljs-number\">1.0<\/span><span class=\"hljs-number\">.0<\/span><span class=\"hljs-string\">+1<\/span>\n\n<span class=\"hljs-attr\">environment:<\/span>\n\u00a0\u00a0<span class=\"hljs-string\">sdk:<\/span>\u00a0<span class=\"hljs-string\">'&gt;=3.1.1\u00a0&lt;4.0.0'<\/span>\n\n<span class=\"hljs-attr\">dependencies:<\/span>\n\u00a0\u00a0<span class=\"hljs-attr\">flutter:<\/span>\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">sdk:<\/span> <span class=\"hljs-string\">flutter<\/span>\n\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0<span class=\"hljs-string\">cupertino_icons:<\/span>\u00a0<span class=\"hljs-string\">^1.0.2<\/span>\n\n  <span class=\"hljs-comment\"># F\u00fcge das flutter_localizations-Paket hinzu<\/span>\n\u00a0\u00a0<span class=\"hljs-attr\">flutter_localizations:<\/span>\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">sdk:<\/span> <span class=\"hljs-string\">flutter<\/span>\n  <span class=\"hljs-comment\"># F\u00fcge das intl-Paket hinzu<\/span>\n\u00a0\u00a0<span class=\"hljs-attr\">intl:<\/span> <span class=\"hljs-string\">^0.18.0<\/span>\n\n<span class=\"hljs-attr\">dev_dependencies:<\/span>\n\u00a0\u00a0<span class=\"hljs-attr\">flutter_test:<\/span>\n\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attr\">sdk:<\/span> <span class=\"hljs-string\">flutter<\/span>\n\n<span class=\"hljs-attr\">flutter:<\/span>\n\u00a0\u00a0<span class=\"hljs-string\">generate:<\/span>\u00a0<span class=\"hljs-literal\">true<\/span> <span class=\"hljs-comment\"># F\u00fcg diese Zeile hinzu<\/span>\n \u00a0<span class=\"hljs-string\">uses-material-design:<\/span>\u00a0<span class=\"hljs-literal\">true<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">YAML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">yaml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Nachdem du die oben hervorgehobenen Zeilen hinzugef\u00fcgt hast, kannst du&nbsp;<code>flutter pub get<\/code>&nbsp;im Terminal ausf\u00fchren, um unsere Pakete zu installieren. Die&nbsp;Zeile <code>generate: true<\/code> ist notwendig f\u00fcr die automatische Codegenerierung, die die Lokalisierungspakete f\u00fcr uns bereitstellen. Wir schauen uns gleich genauer an, wie Code generiert wird. F\u00fcg f\u00fcrs Erste diese Zeile hinzu. Sie kann dir eine Menge Zeit sparen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lokalisierung-konfigurieren\"><span class=\"ez-toc-section\" id=\"lokalisierung-konfigurieren\"><\/span>Lokalisierung konfigurieren<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Wenn die Pakete installiert sind, f\u00fcge eine <code>l10n.yaml<\/code>-Datei zum Stammverzeichnis deines Projekts hinzu. Diese Datei konfiguriert, wo sich unsere \u00dcbersetzungsdateien befinden und welche Namen die automatisch generierten Dart-Dateien haben.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"YAML\" data-shcb-language-slug=\"yaml\"><span><code class=\"hljs language-yaml\"><span class=\"hljs-attr\">arb-dir:<\/span> <span class=\"hljs-string\">lib\/l10n<\/span>\n<span class=\"hljs-attr\">template-arb-file:<\/span> <span class=\"hljs-string\">app_en.arb<\/span>\n<span class=\"hljs-attr\">output-localization-file:<\/span> <span class=\"hljs-string\">app_localizations.dart<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">YAML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">yaml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>\ud83d\udd17 <em>Quelle \u00bb<\/em> Der <a href=\"https:\/\/docs.google.com\/document\/d\/10e0saTfAv32OZLRmONy866vnaw0I2jwL8zukykpgWBc\/edit#heading=h.upij01jgi58m\">offizielle Internationalization User Guide<\/a> zeigt dir viele weitere Optionen, die du in <code>l10n.yaml<\/code> eintragen kannst, um den Flutter i18n-Codegenerator zu steuern.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ubersetzungsdateien-hinzufugen\"><span class=\"ez-toc-section\" id=\"uebersetzungsdateien-hinzufuegen\"><\/span>\u00dcbersetzungsdateien hinzuf\u00fcgen<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Die Flutter-Lokalisierung verwendet standardm\u00e4\u00dfig ARB (Application Resource Bundle)-Dateien, um die \u00dcbersetzungen zu verwalten. Dies sind einfache Dateien, die in JSON-Syntax geschrieben sind. Zumindest ben\u00f6tigen wir eine Vorlagendatei, die unserer Standardsprache (in unserem Fall Englisch) entspricht. Wir haben in unserer obigen Konfiguration angegeben, dass unsere Vorlagendatei <code>lib\/l10n\/app_en.arb<\/code> ist. Lass uns dieses \u00dcbersetzungsverzeichnis erstellen und unsere \u00dcbersetzungsvorlagendatei hinzuf\u00fcgen.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JSON \/ JSON mit Kommentaren\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json\">{\n  <span class=\"hljs-attr\">\"appTitle\"<\/span>: <span class=\"hljs-string\">\"Heroes of Computer Science\"<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON mit Kommentaren<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Nat\u00fcrlich w\u00fcrden all diese Spielereien nicht viel Sinn ergeben, wenn wir keine \u00dcbersetzungen f\u00fcr andere Sprachen bereitstellen k\u00f6nnten. Hier werden wir eine arabische \u00dcbersetzungsdatei hinzuf\u00fcgen. Du kannst jede Sprache hinzuf\u00fcgen, die du m\u00f6chtest. Wir gehen sp\u00e4ter noch kurz auf Layouts von rechts nach links (RTL) ein. Wenn du daran interessiert bist, bleib am besten bei Arabisch oder einer anderen RTL-Sprache.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JSON \/ JSON mit Kommentaren\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json\">{\n  <span class=\"hljs-attr\">\"appTitle\"<\/span>: <span class=\"hljs-string\">\"\u0623\u0628\u0637\u0627\u0644 \u0639\u0644\u0648\u0645 \u0627\u0644\u0643\u0645\u0628\u064a\u0648\u062a\u0631\"<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON mit Kommentaren<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Wir k\u00f6nnen so viele Sprachversionen hinzuf\u00fcgen, wie wir m\u00f6chten. Wir m\u00fcssen nur darauf achten, dass unsere Dateien der konfigurierten Namenskonvention entsprechen: <code>lib\/l10n\/app_&lt;locale&gt;.arb<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-konfigurieren-unserer-app\"><span class=\"ez-toc-section\" id=\"konfigurieren-unserer-app\"><\/span>Konfigurieren unserer App<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Lass uns unserer App von unserem gro\u00dfen Interesse an i18n erz\u00e4hlen. Du musst deine Datei <code>main.dart<\/code> so konfigurieren, dass die Flutter-Lokalisierungspakete verwendet werden.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter\/material.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter_localizations\/flutter_localizations.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'screens\/hero_list.dart'<\/span>;\n\n<span class=\"hljs-keyword\">void<\/span> main() =&gt; runApp(MyApp());\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">MyApp<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatelessWidget<\/span> <\/span>{\n  @override\n  Widget build(BuildContext context) {\n    <span class=\"hljs-keyword\">return<\/span> MaterialApp(\n      title: <span class=\"hljs-string\">'Heroes of Computer Science'<\/span>,\n      <span class=\"hljs-attr\">localizationsDelegates<\/span>: &#91;\n        GlobalMaterialLocalizations.delegate,\n        GlobalWidgetsLocalizations.delegate,\n        GlobalCupertinoLocalizations.delegate,\n      ],\n      <span class=\"hljs-attr\">supportedLocales<\/span>: &#91;\n        <span class=\"hljs-comment\">\/\/ 'en' ist der Sprachcode. Wir k\u00f6nnten optional einen<\/span>\n        <span class=\"hljs-comment\">\/\/ L\u00e4ndercode als zweiten Parameter angeben, z. B.<\/span>\n        <span class=\"hljs-comment\">\/\/ Locale('en', 'US'). Wenn wir das tun, sollten wir vielleicht<\/span>\n        <span class=\"hljs-comment\">\/\/ eine zus\u00e4tzliche app_en_US.arb-Datei f\u00fcr<\/span>\n        <span class=\"hljs-comment\">\/\/ regionsspezifische \u00dcbersetzungen bereitstellen.<\/span>\n        <span class=\"hljs-keyword\">const<\/span> Locale(<span class=\"hljs-string\">'en'<\/span>, <span class=\"hljs-string\">''<\/span>),\n        <span class=\"hljs-keyword\">const<\/span> Locale(<span class=\"hljs-string\">'ar'<\/span>, <span class=\"hljs-string\">''<\/span>),\n      ],\n      <span class=\"hljs-attr\">theme<\/span>: ThemeData(\n        primarySwatch: Colors.blue,\n      ),\n      <span class=\"hljs-attr\">home<\/span>: HeroList(title: <span class=\"hljs-string\">'Heroes of Computer Science'<\/span>),\n    );\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Nachdem du <code>flutter_localizations.dart<\/code> importiert hast, f\u00fcgst du die <code>localizationsDelegates<\/code>&#8211; und <code>supportedLocales<\/code>-Eigenschaften zum <code>MaterialApp<\/code>-Konstruktor hinzu. <code>localizationsDelegates<\/code> stellen die Lokalisierungen f\u00fcr deine App bereit. Die oben aufgef\u00fchrten bieten Lokalisierungen f\u00fcr Flutter Widgets, Material und Cupertino, die bereits vom Flutter-Team lokalisiert wurden.<\/p>\n\n\n\n<p>Zum Beispiel, stell dir vor, wir h\u00e4tten eine <code>MaterialApp<\/code> und w\u00fcrden irgendwo darin die Funktion <a href=\"https:\/\/api.flutter.dev\/flutter\/material\/showDatePicker.html\">showDatePicker()<\/a> aufrufen. Angenommen, dein Betriebssystem ist auf Arabisch eingestellt, w\u00fcrdest du etwa Folgendes sehen.<\/p>\n\n\n\n<figure class=\"wp-block-image wp-image-13862\"><img decoding=\"async\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2021\/04\/flutteri18n2021p1-date-picker-ar.png\" alt=\"Flutter showDatePicker() Kalender | Phrase\"\/><\/figure>\n\n\n\n<p>Beachte, dass wir nichts selbst \u00fcbersetzen mussten, um das zu bekommen. Das Datumsauswahl-Widget wurde bereits vom Flutter-Team lokalisiert. Wir m\u00fcssen nur die richtigen Delegates in unseren App-Konstruktor einbinden, wie wir es oben gemacht haben. Ein gro\u00dfes Lob an das Flutter-Team daf\u00fcr: Was f\u00fcr eine Zeitersparnis!<\/p>\n\n\n\n<p>\ud83d\uddd2\ufe0f <em>Hinweis \u00bb<\/em> Zum Zeitpunkt des Schreibens unterst\u00fctzt <code>flutter_localizations<\/code> <a href=\"https:\/\/flutter.dev\/docs\/development\/accessibility-and-localization\/internationalization#setting-up\">78 Sprachen<\/a>.<\/p>\n\n\n\n<p>\ud83d\udd17 <em>Quelle \u00bb<\/em> Die <a href=\"https:\/\/flutter.dev\/docs\/development\/accessibility-and-localization\/internationalization#how-internationalization-in-flutter-works\">offizielle Flutter-Dokumentation<\/a> erkl\u00e4rt gut, wie die verschiedenen Teile, wie Delegates und die <code>Localizations<\/code>-Klasse, zusammenarbeiten, um i18n\/l10n zu erm\u00f6glichen.<\/p>\n\n\n\n<p>Die <code>supportedLocales<\/code>-Eigenschaft, die wir dem <code>MaterialApp<\/code>-Konstruktor \u00fcbergeben haben, listet die Sprachen auf, die unsere App unterst\u00fctzt. Flutter wird <em>nur<\/em> Widgets als Reaktion auf eine \u00c4nderung der Spracheinstellung neu erstellen, wenn sich die Spracheinstellung in der Liste <code>supportedLocales<\/code> befindet. Wir kommen gleich auf <code>supportedLocales<\/code> zur\u00fcck, wenn wir die Sprachauswahl besprechen. Lass uns jetzt etwas Code generieren!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-automatische-codegenerierung\"><span class=\"ez-toc-section\" id=\"automatische-codegenerierung\"><\/span>Automatische Codegenerierung<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Um die \u00dcbersetzungen aus den ARB-Dateien in unserer Flutter-App zu verwenden, m\u00fcssen wir einige Dart-Dateien generieren, die wir importieren, wenn wir \u00dcbersetzungen brauchen. Um diese Dateien zu generieren, stelle einfach sicher, dass du die Installations- und Einrichtungsschritte bis zu diesem Punkt befolgt hast und die App ausf\u00fchrst. Du hast richtig gelesen: F\u00fchr einfach die App aus. Der Code wird automatisch generiert, und wenn alles gut gelaufen ist, solltest du die folgenden Dateien in deinem Projektverzeichnis sehen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>.dart_tool\/flutter_gen\/gen_l10n\/app_localizations.dart<\/code><\/li>\n\n\n\n<li><code>.dart_tool\/flutter_gen\/gen_l10n\/app_localizations_en.dart<\/code><\/li>\n\n\n\n<li><code>.dart_tool\/flutter_gen\/gen_l10n\/app_localizations_ar.dart<\/code><\/li>\n<\/ul>\n\n\n\n<p>\ud83d\uddd2\ufe0f<em> Hinweis \u00bb<\/em> Wenn diese Dateien nicht generiert wurden, stelle sicher, dass deine Flutter-App keine Kompilierungsfehler hat und \u00fcberpr\u00fcfe deine Debug-Konsole, wenn du die App ausf\u00fchrst.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-so-nutzt-du-unsere-applocalizations\"><span class=\"ez-toc-section\" id=\"so-nutzt-du-unsere-applocalizations\"><\/span>So nutzt du unsere AppLocalizations<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Lass uns die neu generierten Code-Dateien nutzen, um unseren App-Titel zu lokalisieren.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"Dart\" data-shcb-language-slug=\"dart\"><span><code class=\"hljs language-dart\"><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter\/material.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter_i18n_2021\/screens\/settings.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter_localizations\/flutter_localizations.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter_gen\/gen_l10n\/app_localizations.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'screens\/hero_list.dart'<\/span>;\n\n<span class=\"hljs-keyword\">void<\/span> main() =&gt; runApp(MyApp());\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">MyApp<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatelessWidget<\/span> <\/span>{\n  <span class=\"hljs-meta\">@override<\/span>\n  Widget build(BuildContext context) {\n    <span class=\"hljs-keyword\">return<\/span> MaterialApp(\n      onGenerateTitle: (context) {\n        <span class=\"hljs-keyword\">return<\/span> AppLocalizations.of(context).appTitle;\n      },\n      localizationsDelegates: &#91;\n        AppLocalizations.delegate,\n        GlobalMaterialLocalizations.delegate,\n        GlobalWidgetsLocalizations.delegate,\n        GlobalCupertinoLocalizations.delegate,\n      ],\n      supportedLocales: &#91;\n        <span class=\"hljs-keyword\">const<\/span> Locale(<span class=\"hljs-string\">'en'<\/span>, <span class=\"hljs-string\">''<\/span>),\n        <span class=\"hljs-keyword\">const<\/span> Locale(<span class=\"hljs-string\">'ar'<\/span>, <span class=\"hljs-string\">''<\/span>),\n      ],\n      theme: ThemeData(\n        primarySwatch: Colors.blue,\n      ),\n      <span class=\"hljs-comment\">\/\/ Startseite entfernen: HeroList(...)<\/span>\n      initialRoute: <span class=\"hljs-string\">'\/'<\/span>,\n      routes: {\n        <span class=\"hljs-string\">'\/'<\/span>: (context) =&gt; HeroList(title: AppLocalizations.of(context).appTitle),\n        <span class=\"hljs-string\">'\/settings'<\/span>: (context) =&gt; Settings(),\n      },\n    );\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">Dart<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">dart<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Importiere <code>app_localizations.dart<\/code> und f\u00fcge den automatisch generierten <code>AppLocalizations.delegate<\/code> zu deiner Liste der Delegates hinzu. Damit bekommst du das <code>AppLocalizations<\/code>-Widget, mit dem du den App-Titel und den <code>HeroList<\/code>-Titel \u00fcbersetzen kannst. Die automatisch generierte Eigenschaft <code>appTitle<\/code> enth\u00e4lt die \u00dcbersetzung, die der aktiven Sprache entspricht und aus unserer Datei <code>app_&lt;locale&gt;.arb<\/code> entnommen wird.<\/p>\n\n\n\n<p>\u270b <em>Hinweis \u00bb<\/em> Aufgrund der Ladereihenfolge sind unsere \u00dcbersetzungen nicht bereit, wenn wir unsere <code>MaterialApp<\/code> erstellen. Deshalb benutzen wir die <code>onGenerateTitle<\/code>&#8211; und <code>routes<\/code>-Props sowie deren Builder-Funktionen <code>(context) {}<\/code>, damit die \u00dcbersetzungen bereit sind, wenn man die Titel festlegt.<\/p>\n\n\n\n<p>Dann stellen wir die Sprache unseres Betriebssystems auf Arabisch ein, f\u00fchren unsere App aus, und siehe da&nbsp;&#8230;<\/p>\n\n\n\n<figure class=\"wp-block-image wp-image-13863\"><img decoding=\"async\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2021\/04\/flutteri18n2021p1-ar-title-544x1024.png\" alt=\"Helden der Informatik mit arabischem Titel | Phrase\"\/><\/figure>\n\n\n\n<p>Unser Titel wird jetzt auf Arabisch angezeigt. Au\u00dferdem sehen wir, dass Flutter viele seiner Widgets automatisch von rechts nach links f\u00fcr uns angeordnet hat. Da Arabisch eine von rechts nach links geschriebene Sprache ist, spart uns das eine Menge Zeit! Wir m\u00fcssen das Padding links vom Bild in den <code>HeroCard<\/code>-Einstellungen korrigieren, und das machen wir, wenn wir uns sp\u00e4ter um die Ausrichtung k\u00fcmmern.<\/p>\n\n\n\n<p>\ud83e\udd3f <em>Mehr Info \u00bb<\/em> Scharfsichtige Leser*innen haben warscheinlich bemerkt, dass <code>AppLocalizations.of(context)<\/code> sich sehr \u00e4hnlich anf\u00fchlt wie das Aufrufen eines <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/InheritedWidget-class.html\">InheritedWidget<\/a>. Das liegt daran, dass Lokalisierungsobjekte \u00e4hnlich wie <code>InheritedWidget<\/code> funktionieren.<\/p>\n\n\n\n<p>Das war&#8217;s mit dem Setup. Wir haben jetzt die Grundlage f\u00fcr die Lokalisierung unserer App. Eine Frage, die du an diesem Punkt haben k\u00f6nntest, ist: \u201eWie entscheidet Flutter, welche Sprache verwendet wird?\u201c Lass uns dar\u00fcber sprechen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-spracheinstellung\"><span class=\"ez-toc-section\" id=\"spracheinstellung\"><\/span>Spracheinstellung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Die Locales, die wir <code>MaterialApp(supportedLocales: [...])<\/code> bereitgestellt haben, sind die einzigen, die Flutter verwendet, um die aktive Locale zu bestimmen, wenn die App ausgef\u00fchrt wird. Um dies zu tun, verwendet Flutter drei Eigenschaften eines Gebietsschemas:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Den Sprachcode, z.&nbsp;B. <code>'en'<\/code> f\u00fcr Englisch<\/li>\n\n\n\n<li>Den L\u00e4ndercode (optional), z.&nbsp;B. den <code>US<\/code> Teil in <code>en_US<\/code><\/li>\n\n\n\n<li><a href=\"https:\/\/flutter.dev\/docs\/development\/accessibility-and-localization\/internationalization#advanced-locale-definition\">Den Skriptcode<\/a> (optional) \u2013 der verwendete Schriftsatz, z. B. traditionelles (<code>Hant<\/code>) oder vereinfachtes Chinesisch (<code>Hans<\/code>)<\/li>\n<\/ul>\n\n\n\n<p>Standardm\u00e4\u00dfig liest Flutter die bevorzugten Systemsprachen und -regionen deines Ger\u00e4ts aus und sagt sich:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Versuche, den <code>languageCode<\/code>, <code>scriptCode<\/code> und <code>countryCode<\/code> mit einem Code in <code>supportedLocales<\/code> abzugleichen. Wenn das fehlschl\u00e4gt:<\/li>\n\n\n\n<li>Versuche, den <code>languageCode<\/code> und <code>scriptCode<\/code> mit einem Code in <code>supportedLocales<\/code> abzugleichen. Wenn das fehlschl\u00e4gt:<\/li>\n\n\n\n<li>Versuche, den <code>languageCode<\/code> und <code>countryCode<\/code> mit einem Code in <code>supportedLocales<\/code> abzugleichen. Wenn das fehlschl\u00e4gt:<\/li>\n\n\n\n<li>Versuche, den <code>languageCode<\/code> mit einem Code in <code>supportedLocales<\/code> abzugleichen. Wenn das fehlschl\u00e4gt:<\/li>\n\n\n\n<li>Versuche, den <code>countryCode<\/code> nur dann mit einem in <code>supportedLocales<\/code> abzugleichen, wenn alle bevorzugten Gebietsschemata nicht \u00fcbereinstimmen. Wenn das fehlschl\u00e4gt:<\/li>\n\n\n\n<li>Gib das erste Element von <code>supportedLocales<\/code> als Standardwert zur\u00fcck.<\/li>\n<\/ol>\n\n\n\n<p>In unserer App siehst du unsere <code>ar<\/code> Lokalisierungen (siehe 4.), wenn deine iOS-Sprache auf <code>ar_SA<\/code> eingestellt ist. Wenn deine iOS-Sprache auf <code>fr<\/code> (Franz\u00f6sisch) eingestellt ist, siehst du unsere <code>en<\/code> \u00dcbersetzungen (siehe 6. oben). In Android kannst du eine Liste bevorzugter Gebietsschemata haben, nicht nur ein einzelnes. Dies wird von Flutter im obigen Aufl\u00f6sungs-Algorithmus behandelt.<\/p>\n\n\n\n<p>\ud83d\udd17 Quelle \u00bb Der obige Algorithmus ist eine Umschreibung der <a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/WidgetsApp\/supportedLocales.html\">offiziellen Dokumentation der supportedLocales property<\/a>.<\/p>\n\n\n\n<p>\u270b <em>Hinweis \u00bb<\/em> Wenn deine App eine Sprache mit einem L\u00e4ndercode unterst\u00fctzt, wie <code>fr_CA<\/code> (Kanadisches Franz\u00f6sisch), solltest du zus\u00e4tzlich eine Version ohne L\u00e4ndercode bereitstellen, wie <code>fr<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-aktualisierung-des-ios-projekts\"><span class=\"ez-toc-section\" id=\"aktualisierung-des-ios-projekts\"><\/span>Aktualisierung des iOS-Projekts<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Die offizielle Flutter-Dokumentation erw\u00e4hnt die Notwendigkeit, die <code>Info.plist<\/code> direkt im iOS App-Bundle zu aktualisieren und unsere unterst\u00fctzten Gebietsschemata hinzuzuf\u00fcgen. Wenn <code>Info.plist<\/code> nicht aktualisiert wird, funktioniert unsere iOS-App m\u00f6glicherweise nicht wie erwartet. Um das Update durchzuf\u00fchren, \u00f6ffne einfach <code>ios\/Runner\/Info.plist<\/code> in einem beliebigen Texteditor und sorge daf\u00fcr, dass die folgenden Eintr\u00e4ge vorhanden sind.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"Klartext\" data-shcb-language-slug=\"plaintext\"><span><code class=\"hljs language-plaintext\">&lt;key&gt;CFBundleLocalizations&lt;\/key&gt;\n&lt;array&gt;\n  &lt;string&gt;en&lt;\/string&gt;\n  &lt;string&gt;ar&lt;\/string&gt;\n&lt;\/array&gt;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">Klartext<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">plaintext<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-abrufen-der-aktiven-sprache\"><span class=\"ez-toc-section\" id=\"abrufen-der-aktiven-sprache\"><\/span>Abrufen der aktiven Sprache<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Manchmal m\u00fcssen wir wissen, welche runtime locale in unserem Code verwendet wird. Das geht mit folgendem Snippet.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"Dart\" data-shcb-language-slug=\"dart\"><span><code class=\"hljs language-dart\">Locale activeLocale = Localizations.localeOf(context);\n\n<span class=\"hljs-comment\">\/\/ angenommen, unsere aktive Sprache ist fr_CA\u00a0...<\/span>\ndebugPrint(activeLocale.languageCode);\n<span class=\"hljs-comment\">\/\/ =&gt; fr<\/span>\n\ndebugPrint(activeLocale.countryCode);\n<span class=\"hljs-comment\">\/\/ =&gt; CA<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">Dart<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">dart<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>\u270b <em>Hinweis \u00bb<\/em> Beachte, dass wir <code>Localizations<\/code> verwenden, ein in Flutter integriertes Widget, und nicht die automatisch generierten <code>AppLocalizations<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-grundlegende-ubersetzungsnachrichten\"><span class=\"ez-toc-section\" id=\"grundlegende-uebersetzungsnachrichten\"><\/span>Grundlegende \u00dcbersetzungsnachrichten<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Wir haben uns schon mit den grundlegenden \u00dcbersetzungsnachrichten besch\u00e4ftigt, als wir unsere <code>appTitle<\/code>-Nachricht hinzugef\u00fcgt haben. Lass uns aber kurz den Workflow zum Hinzuf\u00fcgen von Nachrichten durchgehen. Als N\u00e4chstes \u00fcbersetzen wir das Tooltip des App-Bar-Icon-Buttons von <code>HeroList<\/code>. Wir k\u00f6nnen ja <em>etwas<\/em> davon nutzen, wo wir schon nicht einmal einen Einstellungsbildschirm bauen \ud83d\ude05.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"Dart\" data-shcb-language-slug=\"dart\"><span><code class=\"hljs language-dart\"><span class=\"hljs-comment\">\/\/ ...<\/span>\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">HeroList<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatelessWidget<\/span> <\/span>{\n  <span class=\"hljs-keyword\">final<\/span> <span class=\"hljs-built_in\">String<\/span> title;\n\n  HeroList({<span class=\"hljs-keyword\">this<\/span>.title = <span class=\"hljs-string\">''<\/span>});\n\n  <span class=\"hljs-meta\">@override<\/span>\n  Widget build(BuildContext context) {\n    <span class=\"hljs-keyword\">return<\/span> Scaffold(\n      appBar: AppBar(\n        title: Text(title),\n        actions: &lt;Widget&gt;&#91;\n          IconButton(\n            <span class=\"hljs-built_in\">Symbol<\/span>: Icon(Icons.settings),\n            tooltip: <span class=\"hljs-string\">'Open settings'<\/span>,\n            onPressed: () {\n              Navigator.push(\n                context,\n                MaterialPageRoute(builder: (context) =&gt; Settings()),\n              );\n            },\n          )\n        ],\n      ),\n      body: ...\n  );\n}\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">Dart<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">dart<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Lass uns den Tooltip lokalisieren, okay? Zuerst f\u00fcgen wir die relevanten Eintr\u00e4ge zu unseren ARB-Dateien hinzu.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"JSON \/ JSON mit Kommentaren\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json\"><span class=\"hljs-comment\">\/\/Englisch<\/span>\n{\n  <span class=\"hljs-attr\">\"appTitle\"<\/span>: <span class=\"hljs-string\">\"Heroes of Computer Science\"<\/span>,\n  <span class=\"hljs-attr\">\"openSettings\"<\/span>: <span class=\"hljs-string\">\"Open Settings\"<\/span>\n}\n\n<span class=\"hljs-comment\">\/\/ Arabisch<\/span>\n{\n  <span class=\"hljs-attr\">\"appTitle\"<\/span>: <span class=\"hljs-string\">\"\u0623\u0628\u0637\u0627\u0644 \u0639\u0644\u0648\u0645 \u0627\u0644\u0643\u0645\u0628\u064a\u0648\u062a\u0631\"<\/span>,\n  <span class=\"hljs-attr\">\"openSettings\"<\/span>: <span class=\"hljs-string\">\"\u0625\u0641\u062a\u062d \u0627\u0644\u0625\u0639\u062f\u0627\u062f\u0627\u062a\"<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON mit Kommentaren<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Als n\u00e4chstes lass uns <em>unsere App neu laden, um unsere Code-Dateien neu zu generieren<\/em>. Dieser Schritt ist wirklich wichtig und sollte nicht vergessen werden, wenn man Frustrationen vermeiden will. Beachte, dass dies ein vollst\u00e4ndiger Neustart der App ist (<\/p>\n\n\n\n<figure class=\"wp-block-image alignnone wp-image-13872\"><img decoding=\"async\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2021\/04\/flutteri18n2021p1-app-reload-1.png\" alt=\"Aktualisieren | Phrase\"\/><\/figure>\n\n\n\n<p>), kein Hot Reload.<\/p>\n\n\n\n<p>Jetzt k\u00f6nnen wir unseren Code aktualisieren, um unsere neue lokalisierte Nachricht zu verwenden.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"Dart\" data-shcb-language-slug=\"dart\"><span><code class=\"hljs language-dart\"><span class=\"hljs-comment\">\/\/ ... <\/span>\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter_gen\/gen_l10n\/app_localizations.dart'<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">HeroList<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatelessWidget<\/span> <\/span>{\n  <span class=\"hljs-keyword\">final<\/span> <span class=\"hljs-built_in\">String<\/span> title;\n\n  HeroList({<span class=\"hljs-keyword\">this<\/span>.title = <span class=\"hljs-string\">''<\/span>});\n\n  <span class=\"hljs-meta\">@override<\/span>\n  Widget build(BuildContext context) {\n    <span class=\"hljs-keyword\">var<\/span> t = AppLocalizations.of(context);\n\n    <span class=\"hljs-keyword\">return<\/span> Scaffold(\n      appBar: AppBar(\n        title: Text(title),\n        actions: &lt;Widget&gt;&#91;\n          IconButton(\n            <span class=\"hljs-built_in\">Symbol<\/span>: Icon(Icons.settings),\n            Tooltip: t.openSettings,\n            onPressed: () {\n              Navigator.push(\n                context,\n                MaterialPageRoute(builder: (context) =&gt; Settings()),\n              );\n            },\n          )\n        ],\n      ),\n      body: ... \n    );\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">Dart<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">dart<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Mit diesem Code siehst du beim Neuladen deiner App den lokalisierten Wert deines Tooltips im <em>Widget Inspector<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image wp-image-13864 size-full\"><img decoding=\"async\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2021\/04\/flutteri18n2021p1-ar-tooltip.png\" alt=\"Widget Inspector Tooltip | Phrase\"\/><\/figure>\n\n\n\n<p>\u270b <em>Hinweis \u00bb<\/em> Du bekommst m\u00f6glicherweise h\u00e4ufig <a href=\"https:\/\/docs.google.com\/document\/d\/10e0saTfAv32OZLRmONy866vnaw0I2jwL8zukykpgWBc\/edit#heading=h.xru0hle4tb2x\">Fehlerhervorhebungen<\/a> in deiner IDE, nachdem du neue \u00dcbersetzungsnachrichten hinzugef\u00fcgt hast. Wenn du deine App neu geladen hast, k\u00f6nnte der Fehler falsch sein (vielleicht ist alles in Ordnung). Wenn du eine Nachricht bekommst, dass es Build-Fehler gibt, kannst du trotzdem versuchen, die App zu starten. Solange die App gebaut und ausgef\u00fchrt wird und du deine neuen \u00dcbersetzungen siehst, ist wahrscheinlich alles in Ordnung. Um den Fehler in der IDE zu beheben, fahr deine App komplett herunter und starte sie dann neu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-interpolation-in-nachrichten\"><span class=\"ez-toc-section\" id=\"interpolation-in-nachrichten\"><\/span>Interpolation in Nachrichten<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Wir sind auf dem Weg, unsere App zu \u00fcbersetzen. Aber was ist mit dem Interpolieren von dynamischen Laufzeitwerten in unseren \u00dcbersetzungen? Zum Beispiel enth\u00e4lt Steve Wozniaks Biografie die Produktnamen <em>Apple I<\/em> und <em>Apple II<\/em>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-15\" data-shcb-language-name=\"Dart\" data-shcb-language-slug=\"dart\"><span><code class=\"hljs language-dart\"><span class=\"hljs-comment\">\/\/ ... <\/span>\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">HeroList<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatelessWidget<\/span> <\/span>{\n  <span class=\"hljs-comment\">\/\/ ... <\/span>\n\n  <span class=\"hljs-meta\">@override<\/span>\n  Widget build(BuildContext context) {\n    <span class=\"hljs-keyword\">return<\/span> Scaffold(\n      <span class=\"hljs-comment\">\/\/ ... <\/span>\n      body: HeroCard(\n        name: <span class=\"hljs-string\">'Steve Wozniak'<\/span>,\n        born: <span class=\"hljs-number\">11.<\/span> August <span class=\"hljs-number\">1950<\/span>,\n        bio: <span class=\"hljs-string\">'Designed &amp; developed the Apple I &amp; '<\/span>\n             <span class=\"hljs-string\">'Apple II microcomputers.'<\/span>,\n        imagePath: <span class=\"hljs-string\">'assets\/images\/steve_wozniak.jpg'<\/span>,\n      ),\n      <span class=\"hljs-comment\">\/\/ ... <\/span>\n    );\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-15\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">Dart<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">dart<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Wenn wir diese Nachricht lokalisieren, sollten wir wahrscheinllich <em>Apple I<\/em> und <em>Apple II<\/em> in ihrem urspr\u00fcnglichen Englisch beibehalten, unabh\u00e4ngig von der aktiven Locale. Wir k\u00f6nnen Platzhalter in unseren \u00dcbersetzungsdateien verwenden, um dies zu erreichen.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-16\" data-shcb-language-name=\"JSON \/ JSON mit Kommentaren\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json\"><span class=\"hljs-comment\">\/\/Englisch<\/span>\n{\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n  <span class=\"hljs-attr\">\"wozniakBio\"<\/span>: <span class=\"hljs-string\">\"Developed the {appleOne} &amp; {appleTwo} microcomputers.\"<\/span>,\n  <span class=\"hljs-attr\">\"@wozniakBio\"<\/span>: {\n    <span class=\"hljs-attr\">\"placeholders\"<\/span>: {\n      <span class=\"hljs-attr\">\"appleOne\"<\/span>: {},\n      <span class=\"hljs-attr\">\"appleTwo\"<\/span>: {}\n    }\n  },\n  \n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n}\n\n<span class=\"hljs-comment\">\/\/ Arabisch<\/span>\n{\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n  <span class=\"hljs-attr\">\"wozniakBio\"<\/span>: <span class=\"hljs-string\">\"\u0637\u0648\u0631 \u062c\u0647\u0627\u0632\u064a \u0643\u0645\u0628\u064a\u0648\u062a\u0631 {appleOne} \u0648 {appleTwo}\"<\/span>,\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-16\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON mit Kommentaren<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Wir verwenden die Syntax <code>{placeholderName}<\/code>, um die Platzhalter f\u00fcr unsere dynamischen Werte festzulegen und wir k\u00f6nnen so viele Platzhalter haben, wie wir in einer Nachricht m\u00f6chten.<\/p>\n\n\n\n<p>Du hast wahrscheinlich auch den Key <code>@wozniakBio<\/code>in unseren oben genannten englischen \u00dcbersetzungen bemerkt. Dieser Eintrag ist ein Begleittext zur Nachricht <code>wozniakBio<\/code> in derselben Datei. Begleittexte sind f\u00fcr grundlegende Nachrichten optional, aber f\u00fcr Nachrichten mit Platzhaltern erforderlich. Tats\u00e4chlich verwenden wir Begleiteintr\u00e4ge, um Nachrichtenplatzhalter zu definieren (<a href=\"https:\/\/docs.google.com\/document\/d\/10e0saTfAv32OZLRmONy866vnaw0I2jwL8zukykpgWBc\/edit#heading=h.emv7twpb8iyo\">unter anderem<\/a>).<\/p>\n\n\n\n<p>\ud83d\uddd2\ufe0f <em>Hinweis \u00bb<\/em> Der Begleiteintrag f\u00fcr eine Nachricht mit dem Key <code>foo<\/code> muss einen Key namens <code>@foo<\/code> haben. Wir ben\u00f6tigen nur Begleiteintr\u00e4ge in unserer Standard-\/Vorlagen-\u00dcbersetzungsdatei (in unserem Fall Englisch).<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-17\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-string\">\"@wozniakBio\"<\/span>: { <span class=\"hljs-string\">\"placeholders\"<\/span>: { <span class=\"hljs-string\">\"appleOne\"<\/span>: {}, <span class=\"hljs-string\">\"appleTwo\"<\/span>: {} } }<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-17\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>\u270b <em>Hinweis \u00bb<\/em> Platzhalternamen m\u00fcssen g\u00fcltige Dart-Methodenparameternamen sein.<\/p>\n\n\n\n<p>Wir k\u00f6nnten das Objekt <code>placeholders<\/code> Objekt verwenden, um den Typ jedes Wertes anzugeben und nach Wunsch sogar Beispiele als Dokumentation bereitstellen. Wir k\u00f6nnen die Definition aber auch als leeres <code>{}<\/code> belassen.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-18\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-string\">\"@wozniakBio\"<\/span>: {\n    <span class=\"hljs-string\">\"placeholders\"<\/span>: {\n      <span class=\"hljs-string\">\"appleOne\"<\/span>: {\n        <span class=\"hljs-comment\">\/\/ Expliziter Typ<\/span>\n        <span class=\"hljs-string\">\"type\"<\/span>: <span class=\"hljs-string\">\"String\"<\/span>,\n        <span class=\"hljs-comment\">\/\/ Eine kleine Doku<\/span>\n        <span class=\"hljs-string\">\"example\"<\/span>: <span class=\"hljs-string\">\"Apple I\"<\/span>\n      },\n      <span class=\"hljs-comment\">\/\/ Es ist vollkommen in Ordnung, nur den Namen anzugeben<\/span>\n      <span class=\"hljs-string\">\"appleTwo\"<\/span>: {}\n    }\n  }<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-18\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Der <code>type<\/code> wird in der Methode verwendet, die Flutter auf <code>AppLocalizations<\/code> f\u00fcr unsere <code>wozniakBio<\/code> Nachricht generiert.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-19\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ ... <\/span>\n\nabstract <span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">AppLocalizations<\/span> <\/span>{\n  <span class=\"hljs-comment\">\/\/ ... <\/span>\n\n  <span class=\"hljs-comment\">\/\/ Diese Methode ist in app_localizations_en.dart und<\/span>\n  <span class=\"hljs-comment\">\/\/ app_localizations_ar.dart implementiert.<\/span>\n  <span class=\"hljs-comment\">\/\/ Expliziter Typ f\u00fcr den appleOne-Parameter. Implicit appleTwo<\/span>\n  <span class=\"hljs-comment\">\/\/ Parameter.<\/span>\n  <span class=\"hljs-built_in\">String<\/span> wozniakBio(<span class=\"hljs-built_in\">String<\/span> appleOne, <span class=\"hljs-built_in\">Object<\/span> appleTwo);\n\n  <span class=\"hljs-comment\">\/\/ ... <\/span>\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-19\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>\ud83d\uddd2\ufe0f<em> Hinweis \u00bb<\/em> Es ist in den meisten F\u00e4llen v\u00f6llig okay, leere <code>{}<\/code> f\u00fcr Platzhalterdefinitionen zu verwenden. Eine leere Definition f\u00fchrt dazu, dass der Parameter vom Typ <code>Object<\/code> sein wird. Im Hintergrund verwendet Flutter einfach den Wert <code>theParameter.toString()<\/code> des gegebenen Parameters, sodass ein <code>Object<\/code>-Parameter gut funktioniert. Ein impliziter <code>Object<\/code> Platzhalter h\u00e4lt unsere Nachrichten flexibel, sodass sie jeden Typ akzeptieren k\u00f6nnen, da alle Dart-Typen von <a href=\"https:\/\/api.dart.dev\/stable\/2.12.4\/dart-core\/Object-class.html\">Object<\/a> abgeleitet sind und \u00fcber <code>toString()<\/code> verf\u00fcgen.<\/p>\n\n\n\n<p>Okay: Nachdem du die App neu gestartet hast, um <code>AppLocalizations<\/code> zu aktualisieren, kannst du die Bio von Woz mit der neuen Methode lokalisieren.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-20\" data-shcb-language-name=\"Dart\" data-shcb-language-slug=\"dart\"><span><code class=\"hljs language-dart\"><span class=\"hljs-comment\">\/\/ ... <\/span>\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">HeroList<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatelessWidget<\/span> <\/span>{\n  <span class=\"hljs-comment\">\/\/ ... <\/span>\n\n  <span class=\"hljs-meta\">@override<\/span>\n  Widget build(BuildContext context) {\n    <span class=\"hljs-keyword\">var<\/span> t = AppLocalizations.of(context);\n\n    <span class=\"hljs-keyword\">return<\/span> Scaffold(\n      <span class=\"hljs-comment\">\/\/ ... <\/span>\n      body: HeroCard(\n        name: <span class=\"hljs-string\">'Steve Wozniak'<\/span>,\n        born: <span class=\"hljs-string\">'11 August 1950'<\/span>,\n        bio: t.wozniakBio(<span class=\"hljs-string\">'Apple I'<\/span>, <span class=\"hljs-string\">'Apple II'<\/span>),\n        imagePath: <span class=\"hljs-string\">'assets\/images\/steve_wozniak.jpg'<\/span>,\n      ),\n      <span class=\"hljs-comment\">\/\/ ... <\/span>\n    );\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-20\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">Dart<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">dart<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Damit wissen wir, dass wir niemals von fruchtaromatisierten Unternehmen verklagt werden k\u00f6nnen, weil wir ihre Produkte in <em>irgendeiner<\/em> Sprache falsch darstellen.<\/p>\n\n\n\n<figure class=\"wp-block-image wp-image-14105\"><img decoding=\"async\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2021\/05\/flutteri18n2021p2-woz-bio-ar-en-1024x702.png\" alt=\"Interpolierte Werte in Arabisch und Englisch | Phrase\"\/><figcaption class=\"wp-element-caption\">Interpolierte Werte in Arabisch und Englisch<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-pluralformen\"><span class=\"ez-toc-section\" id=\"pluralformen\"><\/span>Pluralformen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>H\u00e4ufig m\u00fcssen wir mit dynamischen Pluralformen in unserer Lokalisierung umgehen. Ein Beispiel w\u00e4re: \u201eDu hast <em>eine Nachricht<\/em> erhalten\u201c und \u201eDu hast <em>3 Nachrichten<\/em> erhalten\u201c.<\/p>\n\n\n\n<p>Es ist wichtig zu beachten, dass <a href=\"https:\/\/unicode-org.github.io\/cldr-staging\/charts\/latest\/supplemental\/language_plural_rules.html\">verschiedene Sprachen Pluralformen unterschiedlich behandeln<\/a>. Zum Beispiel hat Englisch zwei Pluralformen: one und other (other == null und &gt;1). Arabisch hat sechs Pluralformen. Das kann ein bisschen Kopfschmerzen bereiten, wenn du Bibliotheken verwendest, die keine komplexen Pluralregeln unterst\u00fctzen. Gl\u00fccklicherweise behandelt die i18n-L\u00f6sung von Flutter komplexe Pluralformen direkt. Damit bist du auf der sicheren Seite. Lass uns damit den Heldenz\u00e4hler in unserer App lokalisieren.<\/p>\n\n\n\n<figure class=\"wp-block-image wp-image-14106\"><img decoding=\"async\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2021\/05\/flutteri18n2021p2-hero-count-before-l10n-1024x616.png\" alt=\"Helden der Informatik Startbildschirm, englische Pluralisierung | Phrase\"\/><\/figure>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-21\" data-shcb-language-name=\"Dart\" data-shcb-language-slug=\"dart\"><span><code class=\"hljs language-dart\"><span class=\"hljs-comment\">\/\/ ...<\/span>\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">HeroList<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatelessWidget<\/span> <\/span>{\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n\n  <span class=\"hljs-meta\">@override<\/span>\n  Widget build(BuildContext context) {\n    <span class=\"hljs-keyword\">return<\/span> Scaffold(\n      <span class=\"hljs-comment\">\/\/ ...<\/span>\n      body: Padding(\n        <span class=\"hljs-comment\">\/\/ ...<\/span>\n        child: Column(\n          children: &#91;\n            Padding(\n              padding: <span class=\"hljs-keyword\">const<\/span> EdgeInsets.only(bottom: <span class=\"hljs-number\">8.0<\/span>),\n              <span class=\"hljs-comment\">\/\/ Lokalisierte Zeichenfolge soll '6 Heroes' ersetzen<\/span>\n              child: Text(<span class=\"hljs-string\">'6 Heroes'<\/span>), \n            ),\n            <span class=\"hljs-comment\">\/\/ ...<\/span>\n          ],\n        ),\n      ),\n    );\n  }\n}\n\n<span class=\"hljs-comment\">\/\/ ...<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-21\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">Dart<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">dart<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Zuerst f\u00fcgen wir die Nachricht unserer englischen ARB-Vorlagendatei hinzu.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-22\" data-shcb-language-name=\"JSON \/ JSON mit Kommentaren\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json\">{\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n  <span class=\"hljs-attr\">\"heroCount\"<\/span>: <span class=\"hljs-string\">\"{count,plural, =0{No heroes yet} =1{1 hero} other{{count} heroes}}\"<\/span>,\n  <span class=\"hljs-attr\">\"@heroCount\"<\/span>: {\n    <span class=\"hljs-attr\">\"placeholders\"<\/span>: {\n      <span class=\"hljs-attr\">\"count\"<\/span>: {}\n    }\n  },\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-22\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON mit Kommentaren<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Dann geben wir den Platzhalter <code>count<\/code> in der Nachricht ein und verwenden ihn mit der speziellen <code>{count,plural,...}<\/code> Syntax, um die verschiedenen Pluralformen zu definieren.<\/p>\n\n\n\n<p>\u270b <em>Hinweis \u00bb<\/em> Der <code>count<\/code>-Parameter ist immer vom Typ <code>int<\/code>. Wenn du einen anderen Typ f\u00fcr <code>count<\/code> angibst, ignoriert Flutter ihn und verwendet trotzdem <code>int<\/code>.<\/p>\n\n\n\n<p>\ud83d\uddd2\ufe0f <em>Hinweis \u00bb<\/em> Du kannst neben <code>count<\/code> auch andere Platzhalter zu einer Pluralnachricht hinzuf\u00fcgen; sie werden wie gewohnt angegeben (siehe <em>Interpolation<\/em> oben).<\/p>\n\n\n\n<p>Flutter unterst\u00fctzt die folgenden Pluralformen.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>zero \u279e <code>=0{No heroes}<\/code><\/li>\n\n\n\n<li>one \u279e <code>=1{One hero}<\/code><\/li>\n\n\n\n<li>two \u279e <code>=2(Two heroes}<\/code><\/li>\n\n\n\n<li>few \u279e <code>few{The {count} heroes}<\/code><\/li>\n\n\n\n<li>many \u279e <code>many{{count} heroes}<\/code><\/li>\n\n\n\n<li>other \u279e <code>other{{count} heroes}<\/code><\/li>\n<\/ul>\n\n\n\n<p><code>few<\/code>, <code>many<\/code>, and <code>other<\/code> <a href=\"https:\/\/unicode-org.github.io\/cldr-staging\/charts\/latest\/supplemental\/language_plural_rules.html\">haben unterschiedliche Bedeutungen, abh\u00e4ngig von der aktiven Sprache<\/a>. Die einzige erforderliche Form in <em>jeder<\/em> Sprache ist die Form <code>other<\/code>.<\/p>\n\n\n\n<p>\ud83d\uddd2\ufe0f <em>Hinweis \u00bb<\/em> Wir mussten die zero-<code>=0<\/code>-Form in unserer englischen Nachricht oben nicht verwenden. H\u00e4tten wir sie weggelassen, h\u00e4tte Flutter stattdessen unsere Form <code>other<\/code> verwendet.<\/p>\n\n\n\n<p>Alles klar, lass uns unsere arabische Nachricht hinzuf\u00fcgen. Wie wir bereits erw\u00e4hnt haben, hat Arabisch sechs Pluralformen.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-23\" data-shcb-language-name=\"JSON \/ JSON mit Kommentaren\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json\">{\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n  <span class=\"hljs-attr\">\"heroCount\"<\/span>: <span class=\"hljs-string\">\"{count,plural, =0{\u0644\u0627 \u062a\u0648\u062c\u062f \u0623\u0628\u0637\u0627\u0644 \u0628\u0639\u062f} =1{\u0628\u0637\u0644 \u0648\u0627\u062d\u062f} =2{\u0628\u0637\u0644\u0627\u0646} few{{count} \u0623\u0628\u0637\u0627\u0644} many{{count} \u0628\u0637\u0644} other{{count} \u0628\u0637\u0644}}\"<\/span>,\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-23\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON mit Kommentaren<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Jetzt lass uns alles verbinden und unsere neue Nachricht in unserem <code>HeroList<\/code>-Widget verwenden.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-24\" data-shcb-language-name=\"Dart\" data-shcb-language-slug=\"dart\"><span><code class=\"hljs language-dart\"><span class=\"hljs-comment\">\/\/ ...<\/span>\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">HeroList<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatelessWidget<\/span> <\/span>{\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n\n  <span class=\"hljs-meta\">@override<\/span>\n  Widget build(BuildContext context) {\n    <span class=\"hljs-keyword\">var<\/span> t = AppLocalizations.of(context);\n    <span class=\"hljs-keyword\">return<\/span> Scaffold(\n      <span class=\"hljs-comment\">\/\/ ...<\/span>\n      body: Padding(\n        <span class=\"hljs-comment\">\/\/ ...<\/span>\n        child: Column(\n          children: &#91;\n            Padding(\n              padding: <span class=\"hljs-keyword\">const<\/span> EdgeInsets.only(bottom: <span class=\"hljs-number\">8.0<\/span>),\n              child: Text(t.heroCount(<span class=\"hljs-number\">6<\/span>)),\n            ),\n            <span class=\"hljs-comment\">\/\/ ...<\/span>\n          ],\n        ),\n      ),\n    );\n  }\n}\n\n<span class=\"hljs-comment\">\/\/ ...<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-24\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">Dart<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">dart<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Nat\u00fcrlich w\u00e4re der count-Parameter, der an <code>t.heroCount()<\/code> \u00fcbergeben wird, in einer Produktivanwendung dynamisch. Flutter w\u00e4hlt je nach aktivem Gebietsschema die korrekte Pluralform aus unserer Nachricht aus.<\/p>\n\n\n\n<figure class=\"wp-block-image wp-image-14107\"><img decoding=\"async\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2021\/05\/flutteri18n2021p2-en-plural-forms-1024x379.png\" alt=\"Englische Pluralformen in unserer App | Phrase\"\/><figcaption class=\"wp-element-caption\">Englische Pluralformen in unserer App<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image wp-image-14108\"><img decoding=\"async\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2021\/05\/flutteri18n2021p2-ar-plural-forms-1024x716.png\" alt=\"Arabische Pluralformen in unserer App | Phrase\"\/><figcaption class=\"wp-element-caption\">Arabische Pluralformen in unserer App<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-zahlenformatierung\"><span class=\"ez-toc-section\" id=\"zahlenformatierung\"><\/span>Zahlenformatierung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Du kannst Zahlen in deinen lokalisierten Nachrichten formatieren, indem du das <code>placeholders<\/code>-Objekt in den Begleit-Eintr\u00e4gen deiner ARB-Vorlagendatei (in unserem Fall Englisch) verwendest. Es gibt keinen guten Platz, um die Zahlenformatierung in unserer kleinen Demo-App unterzubringen, also tun wir einfach so, als h\u00e4tten wir eine E-Commerce-App, um das zu demonstrieren.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-25\" data-shcb-language-name=\"JSON \/ JSON mit Kommentaren\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json\"><span class=\"hljs-comment\">\/\/ app_en.arb in der Beispiel-App, die einen Warenkorb hat <\/span>\n{\n  <span class=\"hljs-attr\">\"itemTotal\"<\/span>: <span class=\"hljs-string\">\"Your total is: {value}\"<\/span>,\n  <span class=\"hljs-attr\">\"@itemTotal\"<\/span>: {\n    <span class=\"hljs-attr\">\"placeholders\"<\/span>: {\n      <span class=\"hljs-attr\">\"value\"<\/span>: {\n        <span class=\"hljs-attr\">\"type\"<\/span>: <span class=\"hljs-string\">\"double\"<\/span>,\n        <span class=\"hljs-attr\">\"format\"<\/span>: <span class=\"hljs-string\">\"currency\"<\/span>\n      }\n    }\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-25\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON mit Kommentaren<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Beachte, dass wir einen expliziten <code>type<\/code> und <code>format<\/code> angegeben haben, um zu steuern, wie die Zahl angezeigt wird. Wie gewohnt k\u00f6nnen wir unsere Nachricht in unseren anderen Sprachdateien \u00fcbersetzen.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-26\" data-shcb-language-name=\"JSON \/ JSON mit Kommentaren\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json\"><span class=\"hljs-comment\">\/\/ app_ar.arb in der Beispiel-App, die einen Warenkorb hat<\/span>\n{ <span class=\"hljs-attr\">\"itemTotal\"<\/span>: <span class=\"hljs-string\">\"\u0625\u062c\u0645\u0627\u0644\u064a: {value}\"<\/span> }<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-26\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON mit Kommentaren<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Nachdem wir unsere App neu geladen haben, k\u00f6nnen wir unsere Nachricht wie gewohnt verwenden.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-27\" data-shcb-language-name=\"Dart\" data-shcb-language-slug=\"dart\"><span><code class=\"hljs language-dart\"><span class=\"hljs-comment\">\/\/ In einem Widget<\/span>\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter_gen\/gen_l10n\/app_localizations.dart'<\/span>;\n\n<span class=\"hljs-comment\">\/\/ In einem Widget-Builder mit einem Kontext<\/span>\n<span class=\"hljs-keyword\">var<\/span> t = AppLocalizations.of(context);\n<span class=\"hljs-keyword\">var<\/span> message = t.itemTotal(<span class=\"hljs-number\">56.12<\/span>);\n<span class=\"hljs-comment\">\/\/ =&gt; \"Your total is USD56.12\", wenn die aktuelle Sprache Englisch ist<\/span>\n<span class=\"hljs-comment\">\/\/ =&gt; \"\u0625\u062c\u0645\u0627\u0644\u064a: EGP56,12, wenn die aktuelle Sprache Arabisch ist<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-27\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">Dart<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">dart<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>\u270b <em>Hinweis \u00bb<\/em> Du kannst die Zahlen <code>format<\/code>e pro Sprache nicht \u00fcberschreiben. Das Format, das du in deiner Vorlagen-Sprache (Englisch in unserem Fall) angibst, wird in allen Sprachen verwendet, unabh\u00e4ngig von einer <code>format<\/code>-\u00dcberschreibung, die du in deinen anderen Sprachdateien angibst.<\/p>\n\n\n\n<p>Denk daran, dass Flutter im Hintergrund die <a href=\"https:\/\/pub.dev\/packages\/intl\">Dart intl<\/a>&#8211; Bibliothek f\u00fcr die meisten seiner Internationalisierungsaufgaben verwendet. Das W\u00e4hrungsformat, das wir oben verwendet haben, ist eines von mehreren Formaten, die im Intl NumberFormat vordefiniert sind. Andere Formate umfassen Dezimalzahlen, Prozents\u00e4tze und mehr.<\/p>\n\n\n\n<p>\ud83d\udd17 <em>Quelle \u00bb<\/em> Schau dir das <a href=\"https:\/\/docs.google.com\/document\/d\/10e0saTfAv32OZLRmONy866vnaw0I2jwL8zukykpgWBc\/edit#heading=h.4jrxhcva98zs\">offizielle Benutzerhandbuch<\/a> f\u00fcr alle verf\u00fcgbaren Formate an.<\/p>\n\n\n\n<p>Wir m\u00fcssen uns aber nicht auf Flutter verlassen, um unsere Zahlen an intl zu \u00fcbergeben. Wir k\u00f6nnen intl direkt verwenden, um mehr Kontrolle \u00fcber unsere Zahlenformatierung zu haben.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-28\" data-shcb-language-name=\"Dart\" data-shcb-language-slug=\"dart\"><span><code class=\"hljs language-dart\"><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter_gen\/gen_l10n\/app_localizations.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:intl\/intl.dart'<\/span>;\n\n<span class=\"hljs-comment\">\/\/ In einem Widget-Builder mit einem Kontext<\/span>\n<span class=\"hljs-keyword\">var<\/span> currentLocale = AppLocalizations.of(context).localeName;\n<span class=\"hljs-keyword\">var<\/span> compact = NumberFormat.compact(locale: currentLocale).format(<span class=\"hljs-number\">6000000<\/span>);\n<span class=\"hljs-comment\">\/\/ =&gt; \"6M\": wenn die aktuelle Sprache US-Englisch ist<\/span>\n<span class=\"hljs-comment\">\/\/ =&gt; \"\u0666 \u0645\u0644\u064a\u0648\u0646\", wenn das aktuelle Gebietsschema \u00e4gyptisches Arabisch ist<\/span>\n\n<span class=\"hljs-keyword\">var<\/span> simpleCurrency = NumberFormat.simpleCurrency(locale: currentLocale).format(<span class=\"hljs-number\">14.24<\/span>);\n<span class=\"hljs-comment\">\/\/ =&gt; \"$14.24\", wenn die aktuelle Sprache US-Englisch ist<\/span>\n<span class=\"hljs-comment\">\/\/ =&gt; \"\u062c.\u0645.\u200f \u0661\u0664\u066b\u0662\u0664\" wenn die aktuelle Sprache auf \u00c4gyptisch-Arabisch eingestellt ist<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-28\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">Dart<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">dart<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>\ud83d\udd17 <em>Ressource \u00bb<\/em> Du musst die vordefinierten Formate wie <code>compact<\/code> und <code>simpleCurrency<\/code> nicht verwenden. Der intl <code>NumberFormat<\/code>-Konstruktor gibt dir detaillierte Kontrolle \u00fcber deine Zahlenformate. Alle Informationen findest du in der <a href=\"https:\/\/pub.dev\/documentation\/intl\/latest\/intl\/NumberFormat-class.html\">offiziellen Dokumentation<\/a>.<\/p>\n\n\n\n<p>\u270b <em>Hinweis \u00bb<\/em> Der einzige Weg, wie ich \u00f6stliche arabische Ziffern (\u0661\u060c\u0662\u060c\u0663\u2026) f\u00fcr Arabisch anzeigen lassen konnte, bestand darin, den <code>locale<\/code>-Parameter auf <code>\"ar_EG\"<\/code> (\u00c4gyptisches Arabisch) zu setzen. Weder <code>\"ar\"<\/code> noch irgendeine <code>\"ar_XX\"<\/code> variante, au\u00dfer der \u00e4gyptischen Variante, hat bei mir funktioniert.<\/p>\n\n\n\n<p>\u270b <em>Hinweis \u00bb<\/em> Formate haben f\u00fcr mich mit der Pluralvariable <code>count<\/code> nicht funktioniert. Es scheint, dass Flutter das Format \u00fcberschreibt, wenn es Pluralformen verarbeitet. Wenn du in deinen Pluralformen Formate bekommen kannst, lass uns unten in den Kommentaren wissen, wie du das gemacht hast.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-datumsformatierung\"><span class=\"ez-toc-section\" id=\"datumsformatierung\"><\/span>Datumsformatierung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Unsere Helden haben derzeit hartcodierte Geburtsdaten, die nicht lokalisiert sind &#8211; was ziemlich uncool ist.<\/p>\n\n\n\n<figure class=\"wp-block-image wp-image-14109\"><img decoding=\"async\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2021\/05\/flutteri18n2021p2-unlocalized-date-1024x332.png\" alt=\"Englisches Datumsformat in arabischer Lokalisierung | Phrase\"\/><figcaption class=\"wp-element-caption\">Wir wollen, dass dieses Datum auf Arabisch lokalisiert wird.<\/figcaption><\/figure>\n\n\n\n<p>Denk daran, dass wir jeden unserer Helden mit einem <code>HeroCard<\/code>-Widget rendern.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-29\" data-shcb-language-name=\"Dart\" data-shcb-language-slug=\"dart\"><span><code class=\"hljs language-dart\"><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter\/material.dart'<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">HeroCard<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatelessWidget<\/span> <\/span>{\n  <span class=\"hljs-keyword\">final<\/span> <span class=\"hljs-built_in\">String<\/span> name;\n  <span class=\"hljs-keyword\">final<\/span> <span class=\"hljs-built_in\">String<\/span> born;\n  <span class=\"hljs-keyword\">final<\/span> <span class=\"hljs-built_in\">String<\/span> bio;\n  <span class=\"hljs-keyword\">final<\/span> <span class=\"hljs-built_in\">String<\/span> imagePath;\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n\n  <span class=\"hljs-keyword\">const<\/span> HeroCard({\n    Key key,\n    <span class=\"hljs-keyword\">this<\/span>.name = <span class=\"hljs-string\">''<\/span>,\n    <span class=\"hljs-keyword\">this<\/span>.born = <span class=\"hljs-string\">''<\/span>,\n    <span class=\"hljs-keyword\">this<\/span>.bio = <span class=\"hljs-string\">''<\/span>,\n    <span class=\"hljs-keyword\">this<\/span>.imagePath,\n  }) : <span class=\"hljs-keyword\">super<\/span>(key: key);\n\n  <span class=\"hljs-meta\">@override<\/span>\n  Widget build(BuildContext context) {\n    <span class=\"hljs-comment\">\/\/ ...<\/span>\n    <span class=\"hljs-keyword\">return<\/span> Card(\n      child: Padding(\n        <span class=\"hljs-comment\">\/\/ ...<\/span>\n        Padding(\n          padding: <span class=\"hljs-keyword\">const<\/span> EdgeInsets.only(top: <span class=\"hljs-number\">2<\/span>, bottom: <span class=\"hljs-number\">4<\/span>),\n          child: Text(\n            born.isEmpty ? <span class=\"hljs-string\">''<\/span> : <span class=\"hljs-string\">'Born <span class=\"hljs-subst\">$born<\/span>'<\/span>,\n            <span class=\"hljs-comment\">\/\/ ...<\/span>\n          ),\n        ),\n        <span class=\"hljs-comment\">\/\/ ...<\/span>\n      ),\n    );\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-29\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">Dart<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">dart<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Um das <code>born<\/code>-Datum f\u00fcr jedes Gebietsschema, das unsere App unterst\u00fctzt, zu formatieren, f\u00fcge zuerst ein paar neue lokalisierte Nachrichten mit interpolierten Datumswerten hinzu.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-30\" data-shcb-language-name=\"JSON \/ JSON mit Kommentaren\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json\"><span class=\"hljs-comment\">\/\/Englisch<\/span>\n{\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n  <span class=\"hljs-attr\">\"heroBorn\"<\/span>: <span class=\"hljs-string\">\"Born {date}\"<\/span>,\n  <span class=\"hljs-attr\">\"@heroBorn\"<\/span>: {\n    <span class=\"hljs-attr\">\"placeholders\"<\/span>: {\n      <span class=\"hljs-attr\">\"date\"<\/span>: {\n        <span class=\"hljs-attr\">\"type\"<\/span>: <span class=\"hljs-string\">\"DateTime\"<\/span>,\n        <span class=\"hljs-attr\">\"format\"<\/span>: <span class=\"hljs-string\">\"yMMMd\"<\/span>\n      }\n    }\n  },\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n}\n\n<span class=\"hljs-comment\">\/\/ Arabisch<\/span>\n{\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n  <span class=\"hljs-attr\">\"heroBorn\"<\/span>: <span class=\"hljs-string\">\"\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u0645\u064a\u0644\u0627\u062f {date}\"<\/span>,\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-30\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON mit Kommentaren<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Wenn wir unseren <code>date<\/code>-Platzhalter in unserer Vorlagendatei f\u00fcr die Lokalisierung definieren, m\u00fcssen wir ihm den Typ <code>DateTime<\/code> geben. Wir k\u00f6nnen dann ein <code>format<\/code> verwenden, um anzugeben, wie wir das Datum anzeigen m\u00f6chten. Das Format <code>yMMMd<\/code>, das wir oben definiert haben, steht f\u00fcr \u201eJahr, abgek\u00fcrzter Monat, Tag\u201c, was im US-Englisch etwa \u201eDec 9, 1906\u201c ergeben w\u00fcrde.<\/p>\n\n\n\n<p>\ud83d\udd17 <em>Quelle&nbsp;\u00bb<\/em> Tats\u00e4chlich verwendet Flutter im Hintergrund einfach die <code>DateFormat<\/code>-Klasse von intl, die Code wie <code>DateFormat.yMMMd(localeName).format(date)<\/code> generiert. Der <code>yMMMd<\/code> benannte Konstruktor ist eine praktische Abk\u00fcrzung, die als \u201eSkelett\u201c bezeichnet wird, und es gibt eine ganze Reihe dieser Skelette, die wir verwenden k\u00f6nnen. Schau sie dir in der <a href=\"https:\/\/pub.dev\/documentation\/intl\/latest\/intl\/DateFormat-class.html\"> offiziellen DateFormat-Dokumentation<\/a> an.<\/p>\n\n\n\n<p>\ud83d\uddd2\ufe0f <em>Hinweis \u00bb<\/em> Wir mussten die Platzhaltervariable nicht <code>date<\/code> nennen. Wir h\u00e4tten ihr jeden Namen geben k\u00f6nnen, solange es ein g\u00fcltiger Dart-Funktionsparameter ist.<\/p>\n\n\n\n<p>Alles klar: Lass uns das in unserem Widget einbauen, damit unsere neuen Nachrichten angezeigt werden.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-31\" data-shcb-language-name=\"Dart\" data-shcb-language-slug=\"dart\"><span><code class=\"hljs language-dart\"><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter\/material.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:intl\/intl.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter_gen\/gen_l10n\/app_localizations.dart'<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">HeroCard<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatelessWidget<\/span> <\/span>{\n  <span class=\"hljs-keyword\">final<\/span> <span class=\"hljs-built_in\">String<\/span> name;\n  <span class=\"hljs-keyword\">final<\/span> <span class=\"hljs-built_in\">String<\/span> born;\n  <span class=\"hljs-keyword\">final<\/span> <span class=\"hljs-built_in\">String<\/span> bio;\n  <span class=\"hljs-keyword\">final<\/span> <span class=\"hljs-built_in\">String<\/span> imagePath;\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n  <span class=\"hljs-keyword\">final<\/span> <span class=\"hljs-built_in\">DateTime<\/span> bornDateTime;\n\n  HeroCard({\n    Key key,\n    <span class=\"hljs-keyword\">this<\/span>.name = <span class=\"hljs-string\">''<\/span>,\n    <span class=\"hljs-keyword\">this<\/span>.born = <span class=\"hljs-string\">''<\/span>,\n    <span class=\"hljs-keyword\">this<\/span>.bio = <span class=\"hljs-string\">''<\/span>,\n    <span class=\"hljs-keyword\">this<\/span>.imagePath,\n  }) : bornDateTime = DateFormat(<span class=\"hljs-string\">'d MMMM yyyy'<\/span>).parse(born),\n       <span class=\"hljs-keyword\">super<\/span>(key: key);\n\n  <span class=\"hljs-meta\">@override<\/span>\n  Widget build(BuildContext context) {\n    <span class=\"hljs-comment\">\/\/ ...<\/span>\n    <span class=\"hljs-keyword\">var<\/span> t = AppLocalizations.of(context);\n    <span class=\"hljs-keyword\">return<\/span> Card(\n      child: Padding(\n        <span class=\"hljs-comment\">\/\/ ...<\/span>\n        Padding(\n          padding: <span class=\"hljs-keyword\">const<\/span> EdgeInsets.only(top: <span class=\"hljs-number\">2<\/span>, bottom: <span class=\"hljs-number\">4<\/span>),\n          child: Text(\n            born.isEmpty ? <span class=\"hljs-string\">''<\/span> : t.heroBorn(bornDateTime),\n            <span class=\"hljs-comment\">\/\/ ...<\/span>\n          ),\n        ),\n        <span class=\"hljs-comment\">\/\/ ...<\/span>\n      ),\n    );\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-31\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">Dart<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">dart<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Wir bekommen das Geburtsdatum eines Helden als <code>String<\/code>, also m\u00fcssen wir es zuerst in <code>DateTime<\/code> umwandeln. Daf\u00fcr verwenden wir die intl <code>DateFormat<\/code>-Klasse im Widget-Konstruktor.<\/p>\n\n\n\n<p>In der <code>build<\/code>-Methode \u00fcbergeben wir einfach das geparste <code>DateTime<\/code> an unsere lokalisierte Nachricht <code>t.heroBorn()<\/code>. Das ergibt sauber lokalisierte Datumsangaben.<\/p>\n\n\n\n<figure class=\"wp-block-image wp-image-14121\"><img decoding=\"async\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2021\/05\/flutteri18n2021p2-en-date-1.png\" alt=\"Englische Version der Alan Turing-Karte | Phrase\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image wp-image-14111\"><img decoding=\"async\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2021\/05\/flutteri18n2021p2-ar-date.png\" alt=\"Arabische Version der Alan Turing-Karte | Phrase\"\/><\/figure>\n\n\n\n<p>Was ist, wenn du keines der vordefinierten Skelette verwenden und deine Datumsformate vollst\u00e4ndig anpassen m\u00f6chtest? Nun, \u00e4hnlich wie bei der Zahlenformatierung (siehe oben), m\u00fcssten wir die Klasse <code>intl.DateFormat<\/code> direkt verwenden. Angenommen, wir m\u00f6chten die Geburtsdaten unserer Helden in einem Format wie \u201e1912-06-23\u201c anzeigen. Die Umsetzung w\u00fcrde wie folgt aussehen:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-32\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:intl\/intl.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter_gen\/gen_l10n\/app_localizations.dart'<\/span>;\n\n<span class=\"hljs-comment\">\/\/ Im Widget-Builder mit Kontext<\/span>\n<span class=\"hljs-keyword\">var<\/span> t = AppLocalizations.of(context);\n<span class=\"hljs-keyword\">var<\/span> bornDateTime = DateTime(<span class=\"hljs-number\">1912<\/span>, <span class=\"hljs-number\">6<\/span>, <span class=\"hljs-number\">23<\/span>);\n<span class=\"hljs-keyword\">var<\/span> formattedBorn = DateFormat(<span class=\"hljs-string\">'yyyy-MM-dd'<\/span>, t.localeName).format(bornDateTime);\n<span class=\"hljs-keyword\">var<\/span> message = t.heroBorn(formattedBorn);\n<span class=\"hljs-comment\">\/\/ =&gt; \"1912-06-23\" in US-Englisch<\/span>\n<span class=\"hljs-comment\">\/\/ =&gt; \"\u0661\u0669\u0661\u0662-\u0660\u0666-\u0662\u0663\" im \u00e4gyptischen Arabisch<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-32\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Unsere lokalisierten <code>heroBorn<\/code>-Nachrichten in unseren ARB-Dateien w\u00fcrden dann einfach regul\u00e4re <code>Object<\/code>&#8211; oder <code>String<\/code>-Parameter verwenden, da wir die Formatierung bereits f\u00fcr diese vorgenommen haben.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-schreibrichtung-von-links-nach-rechts-und-von-rechts-nach-links\"><span class=\"ez-toc-section\" id=\"schreibrichtung-von-links-nach-rechts-und-von-rechts-nach-links\"><\/span>Schreibrichtung: von links nach rechts und von rechts nach links<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>W\u00e4hrend Englisch eine Von-links-nach-rechts-Sprache (LTR) ist, geht Arabisch in die andere Richtung und ist von rechts nach links (RTL) angeordnet. Das verursacht derzeit ein Problem f\u00fcr uns, wenn unsere App auf einem Ger\u00e4t mit Arabisch als Systemsprache verwendet wird.<\/p>\n\n\n\n<figure class=\"wp-block-image wp-image-14114\"><img decoding=\"async\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2021\/05\/flutteri18n2021p2-broken-ar.png\" alt=\"Arabische Version von Heroes of Computer Science mit fehlendem Padding | Phrase\"\/><figcaption class=\"wp-element-caption\">Beachte das fehlende Padding zwischen Bildern und Text.<\/figcaption><\/figure>\n\n\n\n<p>Das Bild und der Text in jeder Karte sind b\u00fcndig, da wir <code>EdgeInsets.only(right)<\/code> verwenden, um den Abstand um unser Bild zu definieren.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-33\" data-shcb-language-name=\"Dart\" data-shcb-language-slug=\"dart\"><span><code class=\"hljs language-dart\"><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:intl\/intl.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter_gen\/gen_l10n\/app_localizations.dart'<\/span>;\n\n<span class=\"hljs-comment\">\/\/ Im Widget-Builder mit Kontext<\/span>\n<span class=\"hljs-keyword\">var<\/span> t = AppLocalizations.of(context);\n<span class=\"hljs-keyword\">var<\/span> bornDateTime = <span class=\"hljs-built_in\">DateTime<\/span>(<span class=\"hljs-number\">1912<\/span>, <span class=\"hljs-number\">6<\/span>, <span class=\"hljs-number\">23<\/span>);\n<span class=\"hljs-keyword\">var<\/span> formattedBorn = DateFormat(<span class=\"hljs-string\">'yyyy-MM-dd'<\/span>, t.localeName).format(bornDateTime);\n<span class=\"hljs-keyword\">var<\/span> message = t.heroBorn(formattedBorn);\n<span class=\"hljs-comment\">\/\/ =&gt; \"1912-06-23\" in US-Englisch<\/span>\n<span class=\"hljs-comment\">\/\/ =&gt; \"\u0661\u0669\u0661\u0662-\u0660\u0666-\u0662\u0663\" im \u00e4gyptischen Arabisch<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-33\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">Dart<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">dart<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Das funktioniert in LTR-Sprachen, wo wir einen rechten Rand zwischen dem Bild und dem Text wollen. In RTL-Sprachen hingegen wollen wir den Rand auf der <em>linken<\/em> Seite haben.<\/p>\n\n\n\n<p>Eine einfache L\u00f6sung besteht darin, <code>EdgeInsetsDirectional<\/code> statt <code>EdgeInsets<\/code> zu verwenden.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-34\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-comment\">\/\/...<\/span>\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">HeroCard<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatelessWidget<\/span> <\/span>{\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n\n  @override\n  Widget build(BuildContext context) {\n    <span class=\"hljs-comment\">\/\/ ...<\/span>\n    <span class=\"hljs-keyword\">return<\/span> Card(\n      child: Padding(\n        padding: <span class=\"hljs-keyword\">const<\/span> EdgeInsets.all(<span class=\"hljs-number\">4.0<\/span>),\n        child: Row(\n          crossAxisAlignment: CrossAxisAlignment.start,\n          children: &lt;Widget&gt;&#91;\n            Padding(\n              padding: <span class=\"hljs-keyword\">const<\/span> EdgeInsetsDirectional.only(end: <span class=\"hljs-number\">8.0<\/span>),\n              child: ClipRRect(\n                <span class=\"hljs-comment\">\/\/ Hochformatbild...<\/span>\n              ),\n            ),\n            Expanded(\n              <span class=\"hljs-comment\">\/\/ Text-Widgets...<\/span>\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-34\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Beachte, dass wir <code>end<\/code> statt <code>right<\/code> verwenden, um den Abstand zwischen dem Bild und dem Text festzulegen. <code>EdgeInsetsDirectional<\/code> ist eines der wenigen Layout-Widgets von Flutter, die sich an der Schreibrichtung der Sprache orientieren. Diese Widgets verwenden die Parameter <code>start<\/code> und <code>end<\/code> anstelle von <code>left<\/code> und <code>right<\/code>. Und das Tolle ist, dass diese Widgets mit Richtungserkennung automatisch das Richtige f\u00fcr das aktive Gebietsschema tun:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>start<\/code> == <code>left<\/code> f\u00fcr LTR-Sprachen<\/li>\n\n\n\n<li><code>start<\/code> == <code>right<\/code> f\u00fcr RTL-Sprachen<\/li>\n\n\n\n<li><code>end<\/code> == <code>right<\/code> f\u00fcr LTR-Sprachen<\/li>\n\n\n\n<li><code>end<\/code> == <code>left<\/code> f\u00fcr RTL-Sprachen<\/li>\n<\/ul>\n\n\n\n<p>Mit dieser kleinen Anpassung im Code ist unser Layout-Problem gel\u00f6st.<\/p>\n\n\n\n<figure class=\"wp-block-image wp-image-14115\"><img decoding=\"async\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2021\/05\/flutteri18n2021p2-fixed-ar.png\" alt=\"Arabische Version von Heroes of Computer Science mit Padding | Phrase\"\/><figcaption class=\"wp-element-caption\">Das Layout passt sich jetzt der Richtung des aktiven Gebietsschemas an.<\/figcaption><\/figure>\n\n\n\n<p>\ud83d\udd17 <em>Quelle \u00bb<\/em> Aktuell listet die offizielle Flutter-Dokumentation die folgenden Widgets mit Ausrichtung auf:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/api.flutter.dev\/flutter\/painting\/EdgeInsetsDirectional-class.html\">EdgeInsetsDirectional<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/api.flutter.dev\/flutter\/painting\/AlignmentDirectional-class.html\">AlignmentDirectional<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/api.flutter.dev\/flutter\/painting\/BorderDirectional-class.html\">BorderDirectional<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/api.flutter.dev\/flutter\/painting\/BorderRadiusDirectional-class.html\">BorderRadiusDirectional<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/PositionedDirectional-class.html\">PositionedDirectional<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/api.flutter.dev\/flutter\/widgets\/AnimatedPositionedDirectional-class.html\">AnimatedPositionedDirectional<\/a><\/li>\n<\/ul>\n\n\n\n<p>Mit all dem sieht unsere fertige App ziemlich globalisiert aus.<\/p>\n\n\n\n<figure class=\"wp-block-image wp-image-14142\"><img decoding=\"async\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2021\/05\/flutteri18n2021p2-final-en-ar-1-e1699439769197.png\" alt=\"Arabische und englische Versionen von Heroes of Computer Science nebeneinander | Phrase\"\/><\/figure>\n\n\n\n<p>\ud83d\udd17 Quelle \u00bb Hol dir den vollst\u00e4ndigen Code f\u00fcr unsere Demo-App von <a href=\"https:\/\/github.com\/PhraseApp-Blog\/flutter-2-i18n-2021\">unserem GitHub-Repository<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-hinzufugen-lokalisierter-assets\"><span class=\"ez-toc-section\" id=\"hinzufuegen-lokalisierter-assets\"><\/span>Hinzuf\u00fcgen lokalisierter Assets<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Die Lokalisierung von Bildern in Flutter umfasst die Verwendung verschiedener Bilds\u00e4tze f\u00fcr unterschiedliche Sprachen oder Regionen in deiner App. Dies wird h\u00e4ufig gemacht, um Bilder mit Text oder Inhalten anzuzeigen, die deiner bevorzugten Sprache entsprechen.<\/p>\n\n\n\n<p>F\u00fcge eine Flagge hinzu, die je nach Region des Nutzers unterschiedlich angezeigt wird.<\/p>\n\n\n\n<figure class=\"wp-block-image wp-image-68808\"><img decoding=\"async\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2023\/10\/flutter-l10n-flag-language.png\" alt=\"L\u00e4nderflagge zu lokalisierter Flutter-App hinzuf\u00fcgen | Phrase\"\/><\/figure>\n\n\n\n<p>Wir beginnen damit, die Bilder hinzuzuf\u00fcgen, eines f\u00fcr jede Region, die wir unterst\u00fctzen wollen. Wir sollten diese Bilder in einer Ordnerstruktur basierend auf den Sprachen organisieren, zum Beispiel:<!-- notionvc: fc5508b4-43d5-43ba-a914-18ef9baa152d --><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-35\" data-shcb-language-name=\"Klartext\" data-shcb-language-slug=\"plaintext\"><span><code class=\"hljs language-plaintext\">\u2514\u2500\u2500 assets\/\n    \u2514\u2500\u2500 images\/\n        \u251c\u2500\u2500 eg\/\n        \u2502   \u2514\u2500\u2500 flag.jpg\n        \u251c\u2500\u2500 us\/\n        \u2502   \u2514\u2500\u2500 flag.jpg\n        \u2514\u2500\u2500 flag.jpg<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-35\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">Klartext<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">plaintext<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>F\u00fcr dieses Tutorial werden wir Flaggenbilder f\u00fcr \u00c4gypten und die USA hinzuf\u00fcgen. Die Datei direkt im images-Ordner (ohne Sprachversion) ist ein Fallback-Bild f\u00fcr andere Regionen.<\/p>\n\n\n\n<p>Als n\u00e4chstes registrieren wir die Dateien in <code>pubspec.yml<\/code>.<\/p>\n\n\n\n<p><!-- notionvc: 8d2588ec-6a65-4ecd-a48b-892e51f0c4be --><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-36\" data-shcb-language-name=\"YAML\" data-shcb-language-slug=\"yaml\"><span><code class=\"hljs language-yaml\"><span class=\"hljs-comment\"># pubspec.yml<\/span>\n\n<span class=\"hljs-comment\"># ...<\/span>\n\n<span class=\"hljs-attr\">flutter:<\/span>\n  <span class=\"hljs-comment\"># ...<\/span>\n  <span class=\"hljs-attr\">assets:<\/span>\n  <span class=\"hljs-comment\"># ...<\/span>\n    <span class=\"hljs-bullet\">-<\/span> <span class=\"hljs-string\">assets\/images\/in\/flag.jpg<\/span>\n    <span class=\"hljs-bullet\">-<\/span> <span class=\"hljs-string\">assets\/images\/us\/flag.jpg<\/span>\n    <span class=\"hljs-bullet\">-<\/span> <span class=\"hljs-string\">assets\/images\/flag.jpg<\/span>\n\n<span class=\"hljs-comment\"># ...<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-36\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">YAML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">yaml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Jetzt k\u00f6nnen wir die Bilder in der Datei <code>hero_list.dart<\/code> laden:<!-- notionvc: 8a12d860-6906-4664-bced-66bf768073ee --><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-37\" data-shcb-language-name=\"Dart\" data-shcb-language-slug=\"dart\"><span><code class=\"hljs language-dart\">\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter\/material.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter_gen\/gen_l10n\/app_localizations.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'..\/widgets\/hero_card.dart'<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">HeroList<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatelessWidget<\/span> <\/span>{\n\n  <span class=\"hljs-meta\">@override<\/span>\n  Widget build(BuildContext context) {\n    <span class=\"hljs-comment\">\/\/ ...<\/span>\n    <span class=\"hljs-built_in\">String<\/span> getImagePath(<span class=\"hljs-built_in\">String<\/span> imageName) {\n      <span class=\"hljs-built_in\">String<\/span> basePath = <span class=\"hljs-string\">'assets\/images\/'<\/span>;\n\n      <span class=\"hljs-comment\">\/\/ Wenn der L\u00e4ndercode nicht unterst\u00fctzt wird,<\/span>\n      <span class=\"hljs-comment\">\/\/ zeigen wir das Fallback-Bild an.<\/span>\n      <span class=\"hljs-keyword\">if<\/span> (locale.countryCode?.isEmpty == <span class=\"hljs-keyword\">true<\/span>) {\n        <span class=\"hljs-keyword\">return<\/span>  basePath + <span class=\"hljs-string\">'flag.jpg'<\/span>;\n      }\n\n      <span class=\"hljs-built_in\">String<\/span> localePath = <span class=\"hljs-string\">'<span class=\"hljs-subst\">${locale.countryCode!.toLowerCase()}<\/span>\/'<\/span>;\n      <span class=\"hljs-keyword\">return<\/span> basePath + localePath + imageName;\n    }\n\n    <span class=\"hljs-keyword\">return<\/span> Scaffold(\n      <span class=\"hljs-comment\">\/\/ ...<\/span>\n      body: Padding(\n        padding: <span class=\"hljs-keyword\">const<\/span> EdgeInsets.all(<span class=\"hljs-number\">16<\/span>),\n        child: Column(\n          children: &#91;\n\t    <span class=\"hljs-comment\">\/\/ ...<\/span>\n            Padding(\n              padding: <span class=\"hljs-keyword\">const<\/span> EdgeInsets.only(bottom: <span class=\"hljs-number\">2.0<\/span>),\n              child: Image.asset(\n                getImagePath(<span class=\"hljs-string\">'flag.jpg'<\/span>),\n                width: <span class=\"hljs-number\">40<\/span>,\n                height: <span class=\"hljs-number\">40<\/span>,\n              ),\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-37\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">Dart<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">dart<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Nimm jetzt in der Datei <code>main.dart<\/code> die folgenden \u00c4nderungen vor.<!-- notionvc: bb9617c5-f2af-4173-becf-6ef08ae5d950 --><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-38\" data-shcb-language-name=\"Dart\" data-shcb-language-slug=\"dart\"><span><code class=\"hljs language-dart\">...\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">MyApp<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatelessWidget<\/span> <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> MyApp({<span class=\"hljs-keyword\">super<\/span>.key});\n\n  <span class=\"hljs-comment\">\/\/ Dieses Widget ist die Wurzel deiner Anwendung.<\/span>\n  <span class=\"hljs-meta\">@override<\/span>\n  Widget build(BuildContext context) {\n    <span class=\"hljs-keyword\">return<\/span> MaterialApp(\n    ...    \n    supportedLocales: &#91;\n        <span class=\"hljs-keyword\">const<\/span> Locale(<span class=\"hljs-string\">'ar'<\/span>, <span class=\"hljs-string\">''<\/span>),\n        <span class=\"hljs-keyword\">const<\/span> Locale(<span class=\"hljs-string\">'en'<\/span>, <span class=\"hljs-string\">''<\/span>),\n\t\t\t\t<span class=\"hljs-comment\">\/\/ F\u00fcge die unterst\u00fctzten Region-Codes hinzu <\/span>\n        <span class=\"hljs-keyword\">const<\/span> Locale(<span class=\"hljs-string\">'ar'<\/span>, <span class=\"hljs-string\">'EG'<\/span>),\n        <span class=\"hljs-keyword\">const<\/span> Locale(<span class=\"hljs-string\">'en'<\/span>, <span class=\"hljs-string\">'US'<\/span>),\n      ],\n   ...\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-38\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">Dart<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">dart<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Jetzt zeigt die App das passende Asset f\u00fcr deine Sprache und Region an und zeigt eine Ersatzl\u00f6sung, falls deine Sprache und Region nicht unterst\u00fctzt werden. <!-- notionvc: 11d89077-09d6-4de7-9bed-5fc1c4306970 --><\/p>\n\n\n\n<figure class=\"wp-block-image wp-image-69078 size-full\"><img decoding=\"async\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2023\/10\/computer-science-hero-demo-app-screen.png\" alt=\"Demo-App-Bildschirm, der das entsprechende Asset f\u00fcr die Locale des Benutzers und ein Fallback f\u00fcr nicht unterst\u00fctzte Locales anzeigt | Phrase\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-sprache-in-der-app-andern\"><span class=\"ez-toc-section\" id=\"sprache-in-der-app-aendern\"><\/span>Sprache in der App \u00e4ndern<!-- notionvc: 9d86816e-04be-46f7-a903-fcb6f0d3bae1 --><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Manchmal m\u00f6chtest du dein Betriebssystem in einer Sprache und eine bestimmte App in einer anderen Sprache haben. Um das zu erm\u00f6glichen, lass uns einen Sprachw\u00e4hler in unsere App einbauen. Es sollte auf allen von Flutter unterst\u00fctzten Plattformen funktionieren. <!-- notionvc: 9444f110-143a-471a-955f-a1a9bba64d3b --><\/p>\n\n\n\n<figure class=\"wp-block-image size-full wp-image-69084\"><img decoding=\"async\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2023\/10\/in-app-language.png\" alt=\"Demo-App-Bildschirm mit In-App-Sprachen | Phrase\"\/><\/figure>\n\n\n\n<p>In der Datei <code>main.dart<\/code> werden wir die folgenden \u00c4nderungen vornehmen:<\/p>\n\n\n\n<p><!-- notionvc: 0530a815-e9ef-468c-8f66-36c065263ac7 --><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-39\" data-shcb-language-name=\"Dart\" data-shcb-language-slug=\"dart\"><span><code class=\"hljs language-dart\"><span class=\"hljs-keyword\">void<\/span> main() {\n  runApp(<span class=\"hljs-keyword\">const<\/span> MyApp());\n}\n\n<span class=\"hljs-comment\">\/\/ Wir m\u00fcssen MyApp Stateful machen, weil<\/span>\n<span class=\"hljs-comment\">\/\/ es reagieren muss, wenn sich die Locale \u00e4ndert.<\/span>\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">MyApp<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatefulWidget<\/span> <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> MyApp({Key? key}) : <span class=\"hljs-keyword\">super<\/span>(key: key);\n\n  <span class=\"hljs-meta\">@override<\/span>\n  State&lt;MyApp&gt; createState() =&gt; _MyAppState();\n\n  <span class=\"hljs-keyword\">static<\/span> <span class=\"hljs-keyword\">void<\/span> setLocale(BuildContext context, Locale newLocale) {\n    _MyAppState? state = context.findAncestorStateOfType&lt;_MyAppState&gt;();\n    state?.setLocale(newLocale);\n  }\n}\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">_MyAppState<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">State<\/span>&lt;<span class=\"hljs-title\">MyApp<\/span>&gt; <\/span>{\n  Locale? _locale;\n\n  setLocale(Locale locale) {\n    setState(() {\n      _locale = locale;\n    });\n  }\n\n  <span class=\"hljs-comment\">\/\/ Dieses Widget ist die Wurzel deiner Anwendung.<\/span>\n  <span class=\"hljs-meta\">@override<\/span>\n  Widget build(BuildContext context) {\n\n    <span class=\"hljs-keyword\">return<\/span> MaterialApp(\n      <span class=\"hljs-comment\">\/\/ ...<\/span>\n      locale: _locale,\n      initialRoute: <span class=\"hljs-string\">'\/'<\/span>,\n      routes: {\n        <span class=\"hljs-string\">'\/'<\/span>: (context) {\n          <span class=\"hljs-keyword\">return<\/span> HeroList(title: AppLocalizations.of(context)!.appTitle);\n        },\n      },\n    );\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-39\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">Dart<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">dart<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Jetzt, in der Datei <code>hero_list.dart<\/code>, erstelle das Dropdown-Men\u00fc und ruf die Methode <code>setLocale()<\/code> auf, die wir oben definiert haben.<\/p>\n\n\n\n<p><!-- notionvc: a23338ef-f12b-4f8c-a1ac-fc207a9d47b9 --><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-40\" data-shcb-language-name=\"Dart\" data-shcb-language-slug=\"dart\"><span><code class=\"hljs language-dart\"><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter\/material.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'package:flutter_gen\/gen_l10n\/app_localizations.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'..\/main.dart'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'..\/widgets\/hero_card.dart'<\/span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">HeroList<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title\">StatelessWidget<\/span> <\/span>{\n  <span class=\"hljs-comment\">\/\/ ...<\/span>\n  <span class=\"hljs-meta\">@override<\/span>\n  Widget build(BuildContext context) {\n    <span class=\"hljs-keyword\">var<\/span> t = AppLocalizations.of(context)!;\n    <span class=\"hljs-keyword\">final<\/span> Locale locale = Localizations.localeOf(context);\n    <span class=\"hljs-comment\">\/\/ Dropdown-Optionen<\/span>\n    <span class=\"hljs-keyword\">var<\/span> items = &#91;\n      <span class=\"hljs-string\">'en'<\/span>,\n      <span class=\"hljs-string\">'ar'<\/span>,\n    ];\n\n    <span class=\"hljs-keyword\">return<\/span> Scaffold(\n      appBar: AppBar(\n        title: Text(title),\n        actions: &lt;Widget&gt;&#91;\n          DropdownButton(\n            <span class=\"hljs-comment\">\/\/ Abw\u00e4rtspfeil-Icon<\/span>\n            icon: <span class=\"hljs-keyword\">const<\/span> Icon(Icons.settings, color: Colors.white,),\n            items: items.map((<span class=\"hljs-built_in\">String<\/span> items) {\n              <span class=\"hljs-keyword\">return<\/span> DropdownMenuItem(\n                value: items,\n                child: Text(items),\n              );\n            }).toList(),\n            onChanged: (<span class=\"hljs-built_in\">String<\/span>? newValue) {\n              MyApp.setLocale(context, Locale(newValue));\n            },\n          ),\n        ],\n      ),\n      <span class=\"hljs-comment\">\/\/ ...<\/span>\n    );\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-40\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">Dart<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">dart<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Damit kannst du die App-Sprache unabh\u00e4ngig von der Systemsprache ausw\u00e4hlen.<\/p>\n\n\n\n<p>\ud83d\uddd2\ufe0f <em>Hinweis \u00bb<\/em> Bevor du ein Gebietsschema ausw\u00e4hlst, wird es auf das Standard-Gebietsschema deines Systems gesetzt.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full wp-image-69090\"><img decoding=\"async\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2023\/10\/simulator-screen-recording-iphone-14-plus.gif\" alt=\"Simulator-App-Bildschirmaufnahme auf iPhone 14 Plus | Phrase\"\/><\/figure>\n\n\n\n<p>\ud83d\uddd2\ufe0f <em>Hinweis \u00bb<\/em> Bevor du in der App manuell ein Gebietsschema ausw\u00e4hlst, wird das System-Gebietsschema standardm\u00e4\u00dfig verwendet. Die von dir manuell in der App ausgew\u00e4hlte Sprache <strong>wird nicht beibehalten<\/strong>, wenn die App neu gestartet wird. Um deine Spracheneinstellung in der App beizubehalten, musst du das Gebietsschema mit etwas wie dem <a href=\"https:\/\/pub.dev\/packages\/shared_preferences\">Shared Preferences Plugin<\/a> speichern und abrufen.<\/p>\n\n\n\n<p>Das fertige Produkt findest du auf <a href=\"https:\/\/github.com\/PhraseApp-Blog\/flutter-i18n-v2\">GitHub<\/a>.<\/p>\n\n\n\n<p><!-- notionvc: e6fc0d1e-c22a-45b2-8816-ef3f1c993cdc --><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-flutter-lokalisierung-leicht-gemacht\"><span class=\"ez-toc-section\" id=\"flutter-lokalisierung-leicht-gemacht\"><\/span>Flutter-Lokalisierung leicht gemacht<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Wir hoffen, dir hat unser Flutter-Lokalisierungstutorial gefallen und du hast ein paar n\u00fctzliche Tricks gelernt. Wenn du bereit bist, dein Lokalisierungs-Game aufs n\u00e4chste Level zu heben, ist <a href=\"https:\/\/phrase.com\/de\/platform\/strings\/\">Phrase Strings<\/a> genau die richtige L\u00f6sung f\u00fcr dich. Wie ein Lokalisierungsassistent f\u00fcr deine Flutter-Apps unterst\u00fctzt Phrase Strings ARB-Dateien und ist dank seiner einfach zu bedienenden API und CLI \u00e4u\u00dferst entwicklerfreundlich. Es gibt auch einen eleganten Strings-Editor, der das \u00dcbersetzen zum Kinderspiel macht.<\/p>\n\n\n\n<p>Au\u00dferdem synchronisiert es sich nahtlos mit GitHub, GitLab und Bitbucket und bietet sogar Over-the-Air-\u00dcbersetzungen f\u00fcr mobile Apps, um die Lokalisierung f\u00fcr dich zu \u00fcbernehmen \u2013 damit du dich auf den Code konzentrieren kannst, den du so sehr liebst. Schau dir alle <a href=\"https:\/\/phrase.com\/de\/roles\/developers\/\">Phrase-Funktionen f\u00fcr Entwickler<\/a> an und \u00fcberzeuge dich selbst, wie sie dir helfen k\u00f6nnen, deine Apps schneller global zu machen.<\/p>\n\n\n\n<p><!-- notionvc: 23cc7d5c-db75-40d3-a597-92c2e44cb6b5 --><\/p>\n\n\n\n<p><!-- notionvc: 91de31c5-0f6d-40c2-9d94-f70620d96540 --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lass uns die Geheimnisse der Flutter-Lokalisierung entschl\u00fcsseln, damit du die Sprache deiner Nutzer sprichst und deinen Weg zur globalen Dominanz programmierst.<\/p>\n","protected":false},"author":41,"featured_media":2612,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"post-refresh-updated","format":"standard","meta":{"_acf_changed":false,"_stopmodifiedupdate":false,"_modified_date":"","_searchwp_excluded":"","episode_type":"","audio_file":"","podmotor_file_id":"","podmotor_episode_id":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","footnotes":""},"categories":[46],"class_list":["post-133282","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-lokalisierung"],"acf":[],"_links":{"self":[{"href":"https:\/\/phrase.com\/de\/wp-json\/wp\/v2\/posts\/133282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phrase.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phrase.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phrase.com\/de\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/phrase.com\/de\/wp-json\/wp\/v2\/comments?post=133282"}],"version-history":[{"count":8,"href":"https:\/\/phrase.com\/de\/wp-json\/wp\/v2\/posts\/133282\/revisions"}],"predecessor-version":[{"id":140438,"href":"https:\/\/phrase.com\/de\/wp-json\/wp\/v2\/posts\/133282\/revisions\/140438"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phrase.com\/de\/wp-json\/wp\/v2\/media\/2612"}],"wp:attachment":[{"href":"https:\/\/phrase.com\/de\/wp-json\/wp\/v2\/media?parent=133282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phrase.com\/de\/wp-json\/wp\/v2\/categories?post=133282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}