[DevFestKC]Go Global with Flutter Apps 101

This is the slide, "Go Global with Flutter Apps 101" at DevFest KC 2023
#devfestkc #GDG #DevFest #DevFest2023 #Flutter

Transcript

1. Kenichi Kambara (@korodroid) December 2, 2023 KC 2023 Go Global with Flutter Apps 101
2. About me •Mobile App Development •Speeches (e.g. 15 Int’l/100+ Domestic) •Writings (e.g. 8 Dev Books) •[Of fi cial] Evangelist at NTT TechnoCross •[Private] iplatform.org Kenichi Kambara (X:@korodroid) NEW
3. About my Flutter product (Private works) Sekaiphone Pro(Flutter/Kotlin/Swift) MyToDo(Flutter)
4. Agenda •My Motivation •Various Language World •Supporting more Languages on Flutter •Extra Tips
5. My Motivation 
6. My Motivation  English/Japanese… 4ZTUFN
   -BOHVBHF
   4FUUJOHT
   
   
   Arabic 
7. Left To Right (LTR) World [e.g. Japan🇯🇵] 
8. Left To Right (LTR) World [e.g. Greece🇬🇷] 
9.  Right To Left (RTL) World [e.g. Qatar🇶🇦/Egypt🇪🇬]
10. What’s RTL (Right To Left)?  Google Translation
11. RTL (Right To Left) Speakers  • Arabic: 310 million speakers/26 countries • Urdu: 101 million speakers • Hebrew: 9 million speakers • and some more… LingoHub: https://lingohub.com/academy/best-practices/rtl-language-list
12. Supporting more Languages on Flutter  1. Checking RTL Basics 2. Getting Started for i18n 3. Testing our UI without modi fi cations 4. Deep Dive into Implementation Extra Tips for i18n with ChatGPT
13.  Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose 1. Checking RTL Basics
14. RTL Basics: Learning Guidelines  https://m2.material.io/design/usability/bidirectionality.html
15.  RTL Basics: Learning Guidelines LTR World RTL World
16.  RTL Basics: Learning Guidelines ? ? LTR World RTL World LTR World RTL World
17.  RTL Basics: Learning Guidelines LTR World RTL World LTR World RTL World
18.  RTL Basics: Learning Guidelines LTR World RTL World ?
19.  RTL Basics: Learning Guidelines
20.  Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose 2. Getting Started for i18n
21. Flutter i18n packages  • fl utter_localizations (Inspired by Flutter SDK) •slang (Of fi cial successor of “fast_i18n”) • fl utter_translate •easy_localization •getx (also famous as State Management ) •And more…
22. fl utter_localizations https://docs. fl utter.dev/ui/accessibility-and-internationalization/internationalization 
23. Installing “ fl utter_localization” 
24. Setting Up 1/3 return MaterialApp( title: ‘App', localizationsDelegates: const [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, ], supportedLocales: const [ Locale('en'), // English(LTR) Locale('ja'), // Japanese(LTR) Locale('ar'), // Arabic(RTL) ], import 'package:flutter_localizations/flutter_localizations.dart'; <project>/lib/main.dart 
25. Setting Up 2/3 arb-dir: lib/l10n template-arb-file: app_en.arb output-localization-file: app_localizations.dart flutter: generate: true # Add this line <project>/l10n.dart Create a new fi le called “l10n.dart” <project>/pubspec.yaml 
26. Setting Up 3/3 { "greeting": "Hello" } Create some new fi les lib/l10n/app_en.arb { "greeting": "͜Μʹͪ͸" } { "greeting": "ﺎً ﺒﺣﺮﻣ" } lib/l10n/app_ja.arb lib/l10n/app_ar.arb > fl utter pub get Automatically Generated… 
27. Using resources <project>/lib/main.dart Text(AppLocalizations.of(context)!.greeting); import 'package:flutter_gen/gen_l10n/app_localizations.dart'; 
28. One problem…->Better Approach return MaterialApp( title: ‘App', localizationsDelegates: const [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, ], supportedLocales: const [ Locale('en'), // English(LTR) Locale('ja'), // Japanese(LTR) Locale('ar'), // Arabic(RTL) ], return MaterialApp( title: ‘App', localizationsDelegates: AppLocalizations.localizationsDelegates, supportedLocales: AppLocalizations.supportedLocales, 
29.  Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose 3. Testing our UI without modi fi cations
30. Testing our UI without modi fi cations  Good Bad
31. Found Problems (1)  Good Bad
32.  Good Bad Found Problems (2)
33.  Good Bad Found Problems (3)
34.  Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose 4. Deep Dive into Implementation
35. Deep Dive 1 (Icon)  b. Material a. Original on RTL on LTR
36. a. Original  Image.asset( 'assets/images/chara.png', matchTextDirection: true, ), on LTR on RTL
37. b. Material  https://api. fl utter.dev/ fl utter/material/Icons-class.html
38. b. Material 
39. b. Material  Icon( Icons.arrow_back, size: 80.0, ), on LTR on RTL
40. b. Material  Icon( Icons.attach_money, size: 80.0, ), on LTR on RTL
41. Deep Dive 1 (Icon): Result  on LTR on RTL
42. Deep Dive 2 (Layout)  Row( children: [ BlueArea(), GreyArea(), ], ), on LTR on RTL
43. Deep Dive 2 (Layout)  on LTR on RTL Row( mainAxisAlignment: MainAxisAlignment.start, children: [ BlueArea(), GreyArea(), ], ), Row( mainAxisAlignment: MainAxisAlignment.end, children: [ BlueArea(), GreyArea(), ], ),
44. Deep Dive 2 (Layout): Result  on LTR on RTL
45. Deep Dive 3 (Text)  Column( children: [ Text( “Text1", ), Text( “Text2", ), ], ), on LTR on RTL
46. Deep Dive 3 (Text)  Column( children: [ Text( “TextAlign.left", textAlign: TextAlign.left, ), Text( "TextAlign.right", textAlign: TextAlign.right, ), ], ), on LTR on RTL
47. Deep Dive 3 (Text): Result  old ver. new ver. LTR LTR RTL RTL
48. Deep Dive 4 (Combined)  on RTL
49. Deep Dive 4 (Combined)  on LTR Components(5 Image Widget in 1 Row)
50. Deep dive 4 (Combined)  How would it look on RTL devices with no modi fi cations?
51. Deep Dive 4 (Combined)  on RTL Components(The order of Widgets?)
52. Deep Dive 4 (Combined)  Any solutions?
53. Deep Dive 4 (Combined)  on LTR on RTL •Icon •Layout matchTextDirection: true for reversing Widget The order of each Widget is automatically reversed in a Row
54. Deep Dive 4 (Combined): Result  on LTR on RTL 㲔 㲔 old ver.
55. Deep Dive more Widget…  8JUIPVU
    DPOTJEFSJOH
    (MPCBM 8JUI
    DPOTJEFSJOH
    (MPCBM "MJHONFOU "MJHONFOU%JSFDUJPOBM #PSEFS #PSEFS%JSFDUJPOBM #PSEFS3BEJVT #PSEFS3BEJVT%JSFDUJPOBM &EHF*OTFUT &EHF*OTFUT%JSFDUJPOBM
56.  Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose Extra Tips for i18n with ChatGPT
57. Complicated Task…(Language Resources)  English Arabic Japanese
58. Examples of Language Resources  // English Resource "en": { // Top Screen "appName": "SekaiPhone Pro", "modeTalkSpeech": "Talk Mode\n(Speech)", "modeTalkText": "Talk Mode\n(Text)", "modePhone": "Phone Mode", "modeCamera": "Camera Mode", // Hoge Screen // … }, // Japanese Resource "jp": { // Top Screen "appName": "SekaiPhone Pro", "modeTalkSpeech": “͜ͷ৔Ͱ຋༁\n(Ի੠)”, …
59. Preparations with ChatGPT 
60. Reference  Slide X: @korodroid
61. Supporting more Languages for getting more Users🚀 Conclusion
62. Please let me know if you have any requests such as technical speeches, technical writings and so on. Facebook:http://fb.com/kanbara.kenichi X:@korodroid LinkedIn:http://www.linkedin.com/in/korodroid Thank you so much