56 migrate chapter 4 to flutter v3160 - part 1

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 
@@ -57,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": {
@@ -73,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",
@@ -126,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",
@@ -201,25 +207,22 @@ class HomePage extends StatelessWidget {
 ```
 
 As a result, users can see the home page according to the system language of their device:
-en| hu 
-:-: | :-:
-<img src="https://user-images.githubusercontent.com/15221068/117217332-87b63e00-ae01-11eb-9ef5-fac34c7a3648.png" width="375" height="812"> | <img src="https://user-images.githubusercontent.com/15221068/117216778-8e908100-ae00-11eb-9ecf-7b75e7fbaeaf.png" width="375" height="812">
-
-
 
+| 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.
-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.
 
-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.
 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),
@@ -279,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