From 51becabdad207c1eccfd99bc7fd8058ec4796683 Mon Sep 17 00:00:00 2001 From: Csongor Vogel Date: Mon, 22 Jan 2024 00:57:06 +0400 Subject: [PATCH 1/7] Start to use yaml code blocks --- material/04.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/material/04.md b/material/04.md index 11b8cd4..0f86c65 100644 --- a/material/04.md +++ b/material/04.md @@ -17,7 +17,7 @@ If we want to deploy apps to users who speak a different language than our defau By default, Flutter only supports US English localization. To add support for other languages, the Flutter team recommends using a package called [flutter_localizations](https://api.flutter.dev/flutter/flutter_localizations/flutter_localizations-library.html). To use flutter_localizations, we have to add it to our `pubspec.yaml` file: -``` +``` yaml dependencies: flutter: sdk: flutter @@ -32,18 +32,20 @@ After a successfully completed `pub get packages` command, we have to specify ad Next, we have to add predefined global values (`GlobalMaterialLocalizations.delegate`, `const Locale(’hu’)`) to make the application's widgets adapt to the current language. Besides the `flutter_localizations` package, we can add the [intl](https://pub.dev/packages/intl) package too, which provides internationalization and localization facilities, including message translation, plurals and genders, date/number formatting and parsing, and bidirectional text support. Let's include this package too in the project's `pubspec.yaml` file: -``` + +``` yaml dependencies: intl: ^0.17.0 ``` Additionally, we should enable the generate flag in the `pubspec.yaml` file: -``` + +``` yaml flutter: generate: true ``` This flag is essential to generate localizations. To configure where these files are generated, we can add a new `l10n.yaml` file to the root directory of the project with the following content: -``` +``` yaml arb-dir: lib/l10n template-arb-file: app_en.arb output-localization-file: l10n.dart From b3f872eee8ca563661708bdc77a051004678cfee Mon Sep 17 00:00:00 2001 From: Csongor Vogel Date: Mon, 22 Jan 2024 00:57:55 +0400 Subject: [PATCH 2/7] Specify the code samples of the .arb files as 'json' for better readability --- material/04.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/material/04.md b/material/04.md index 0f86c65..8f80af1 100644 --- a/material/04.md +++ b/material/04.md @@ -59,7 +59,8 @@ With this file we can specify the following settings: In the generated `l10n.dart` file, the class that we'll need is named `L10n`. We can add the default English localization to the `app_en.arb` (*ARB* format = *Application Resource Bundle*) template file. For example, to store the localization of our home screen's title we can add the following key-value pairs: -``` + +``` json { "homeTitle": "Know your Santa", "@homeTitle": { @@ -75,14 +76,16 @@ Because the `app_en.arb` file is the template file, we have to add an attribute - **`context`**: It describes the context in which this resource applies. When this piece of information is missing, it defaults to global `context`. In the same directory, let's create the `app_hu.arb` file for Hungarian translations and add a translation for the title string: -``` + +``` json { "homeTitle": "Ismerd meg a Mikulásod" } ``` Here's the complete `app_en.arb` file for the example project: -``` + +``` json { "@@locale": "en", "homeTitle": "Know your Santa", @@ -128,7 +131,8 @@ Here's the complete `app_en.arb` file for the example project: And this is the complete `app_hu.arb` file: -``` + +``` json { "@@locale": "hu", "homeTitle": "Ismerd meg a Mikulásod", From 87117d8cc2cdd80ecbedd71237227cc5d1b625be Mon Sep 17 00:00:00 2001 From: Csongor Vogel Date: Mon, 22 Jan 2024 00:58:14 +0400 Subject: [PATCH 3/7] Remove typo --- material/04.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/material/04.md b/material/04.md index 8f80af1..2d2bb13 100644 --- a/material/04.md +++ b/material/04.md @@ -218,8 +218,6 @@ en| hu In some languages, for instance, in Arabic writing goes from the right to the left (RTL) instead of from the left to the right like in English or Hungarian. Localization for RTL languages needs the text direction to be changed. To demonstrate RTL support we can add and `.arb` file for Arabic string resources and we use the `start` and `end` properties of the `EdgeInsetsDirectional` class instead of the basic `left` and `right` of the `EdgeInsets` class. -ar -:-: ![image](https://user-images.githubusercontent.com/15221068/134827523-69c41179-e61a-45ce-b3f9-87503909d108.png) ### Text-to-Speech People with visual disabilities often use the default [TalkBack](https://support.google.com/accessibility/android/answer/6283677?hl=en) (Android) or [VoiceOver](https://www.apple.com/lae/accessibility/vision/) (iOS) assistants to read the content of screens for them. From 55d6754d909b6bc0f32ec9bf6500ec857d827736 Mon Sep 17 00:00:00 2001 From: Csongor Vogel Date: Mon, 22 Jan 2024 00:58:36 +0400 Subject: [PATCH 4/7] Fix table with the english and hungarian l10 screens --- material/04.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/material/04.md b/material/04.md index 2d2bb13..bbb8878 100644 --- a/material/04.md +++ b/material/04.md @@ -207,12 +207,11 @@ class HomePage extends StatelessWidget { ``` As a result, users can see the home page according to the system language of their device: -en| hu -:-: | :-: - | - + en | hu | +:------------------------------------------------------------------------------------------------------------:|:-: +![en](https://user-images.githubusercontent.com/15221068/117217332-87b63e00-ae01-11eb-9ef5-fac34c7a3648.png) | ![hu](https://user-images.githubusercontent.com/15221068/117216778-8e908100-ae00-11eb-9ecf-7b75e7fbaeaf.png) ### RTL support In some languages, for instance, in Arabic writing goes from the right to the left (RTL) instead of from the left to the right like in English or Hungarian. Localization for RTL languages needs the text direction to be changed. From 6ddaa2c6d5e23743c8de1c8f12196c6d2f053ce3 Mon Sep 17 00:00:00 2001 From: Csongor Vogel Date: Mon, 22 Jan 2024 01:00:55 +0400 Subject: [PATCH 5/7] Fix the alignment for the table --- material/04.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/material/04.md b/material/04.md index bbb8878..70efaf9 100644 --- a/material/04.md +++ b/material/04.md @@ -209,9 +209,8 @@ class HomePage extends StatelessWidget { As a result, users can see the home page according to the system language of their device: en | hu | - :------------------------------------------------------------------------------------------------------------:|:-: -![en](https://user-images.githubusercontent.com/15221068/117217332-87b63e00-ae01-11eb-9ef5-fac34c7a3648.png) | ![hu](https://user-images.githubusercontent.com/15221068/117216778-8e908100-ae00-11eb-9ecf-7b75e7fbaeaf.png) + ![en](https://user-images.githubusercontent.com/15221068/117217332-87b63e00-ae01-11eb-9ef5-fac34c7a3648.png) | ![hu](https://user-images.githubusercontent.com/15221068/117216778-8e908100-ae00-11eb-9ecf-7b75e7fbaeaf.png) ### RTL support In some languages, for instance, in Arabic writing goes from the right to the left (RTL) instead of from the left to the right like in English or Hungarian. Localization for RTL languages needs the text direction to be changed. From fdea524278c70c737ea78e3b19621a6c55c7e993 Mon Sep 17 00:00:00 2001 From: Csongor Vogel Date: Mon, 22 Jan 2024 01:02:05 +0400 Subject: [PATCH 6/7] Fix the alignment for the table --- material/04.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/material/04.md b/material/04.md index 70efaf9..63c0fdf 100644 --- a/material/04.md +++ b/material/04.md @@ -208,9 +208,9 @@ class HomePage extends StatelessWidget { As a result, users can see the home page according to the system language of their device: - en | hu | -:------------------------------------------------------------------------------------------------------------:|:-: - ![en](https://user-images.githubusercontent.com/15221068/117217332-87b63e00-ae01-11eb-9ef5-fac34c7a3648.png) | ![hu](https://user-images.githubusercontent.com/15221068/117216778-8e908100-ae00-11eb-9ecf-7b75e7fbaeaf.png) +| en | hu | +|:------------------------------------------------------------------------------------------------------------:|:------------------------------------------------------------------------------------------------------------:| +| ![en](https://user-images.githubusercontent.com/15221068/117217332-87b63e00-ae01-11eb-9ef5-fac34c7a3648.png) | ![hu](https://user-images.githubusercontent.com/15221068/117216778-8e908100-ae00-11eb-9ecf-7b75e7fbaeaf.png) | ### RTL support In some languages, for instance, in Arabic writing goes from the right to the left (RTL) instead of from the left to the right like in English or Hungarian. Localization for RTL languages needs the text direction to be changed. From d4f00ea2b1f9aebfabbd33253933e1fbe6b44191 Mon Sep 17 00:00:00 2001 From: Csongor Vogel Date: Mon, 22 Jan 2024 01:02:58 +0400 Subject: [PATCH 7/7] Fix the other tables with the screenshots --- material/04.md | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/material/04.md b/material/04.md index 63c0fdf..31365ce 100644 --- a/material/04.md +++ b/material/04.md @@ -214,14 +214,15 @@ As a result, users can see the home page according to the system language of the ### RTL support In some languages, for instance, in Arabic writing goes from the right to the left (RTL) instead of from the left to the right like in English or Hungarian. Localization for RTL languages needs the text direction to be changed. -To demonstrate RTL support we can add and `.arb` file for Arabic string resources and we use the `start` and `end` properties of the `EdgeInsetsDirectional` class instead of the basic `left` and `right` of the `EdgeInsets` class. +To demonstrate RTL support we can add and `.arb` file for Arabic string resources, and we use the `start` and `end` +properties of the `EdgeInsetsDirectional` class instead of the basic `left` and `right` of the `EdgeInsets` class. ![image](https://user-images.githubusercontent.com/15221068/134827523-69c41179-e61a-45ce-b3f9-87503909d108.png) ### Text-to-Speech People with visual disabilities often use the default [TalkBack](https://support.google.com/accessibility/android/answer/6283677?hl=en) (Android) or [VoiceOver](https://www.apple.com/lae/accessibility/vision/) (iOS) assistants to read the content of screens for them. If we want to specify exactly what will these assistants say about our apps' screens, we can do that using the [Semantics](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget which has tons of properties regarding such settings. It can be used for analytics too. -For example, we can wrap one of our `Text` widgets into a `Semantics` widget and we can add a `label` property. +For example, we can wrap one of our `Text` widgets into a `Semantics` widget, and we can add a `label` property. ``` dart title: Semantics( child: Text(l10n.homeAppbarTitle), @@ -281,16 +282,13 @@ Besides those, we can also use the `.w()`, `.h()`, and `.r()` extension function ## As a result, we can see that our UI display a reasonable layout on different screen sizes. -Normal Android Device (1440x2560) dpi| Small Device (240x320) ldpi | Galaxy Tab S7 (1600x2560) hdpi -:-: | :-: | :-: -![basic_android_after](https://user-images.githubusercontent.com/15221068/134827358-8d4e4abd-9c34-4d7b-b141-fe5048fdb6e5.png) | ![small_device_after](https://user-images.githubusercontent.com/15221068/134827372-c8d2aa1f-9877-4c5d-bb52-7af4e523a713.png) |![tablet_after](https://user-images.githubusercontent.com/15221068/134827379-f8ed5b9b-2ecd-4be2-8135-4957821c2fb1.png) - -iPhone 11 Pro| **WEB** -:-: | :-: -![iOS_after](https://user-images.githubusercontent.com/15221068/134827692-e37705bf-30cf-47fb-8101-566718ce16d8.png) | ![web_after_2](https://user-images.githubusercontent.com/15221068/134827834-1ede60f8-7e95-4530-9b2f-a2ac7ae9cc95.png) - - +| Normal Android Device (1440x2560) dpi | Small Device (240x320) ldpi | Galaxy Tab S7 (1600x2560) hdpi | +|:-----------------------------------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------------------------:| +| ![basic_android_after](https://user-images.githubusercontent.com/15221068/134827358-8d4e4abd-9c34-4d7b-b141-fe5048fdb6e5.png) | ![small_device_after](https://user-images.githubusercontent.com/15221068/134827372-c8d2aa1f-9877-4c5d-bb52-7af4e523a713.png) | ![tablet_after](https://user-images.githubusercontent.com/15221068/134827379-f8ed5b9b-2ecd-4be2-8135-4957821c2fb1.png) | +| iPhone 11 Pro | **WEB** | +|:-------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------:| +| ![iOS_after](https://user-images.githubusercontent.com/15221068/134827692-e37705bf-30cf-47fb-8101-566718ce16d8.png) | ![web_after_2](https://user-images.githubusercontent.com/15221068/134827834-1ede60f8-7e95-4530-9b2f-a2ac7ae9cc95.png) | ## Further reading, materials