[DevFestMilano]Enhancing Flutter Apps UX for Global Users

This is the slide, "Enhancing Flutter Apps UX for Global Users" at DevFest Milano 2024
#devfestmilano #GDG #DevFest #DevFest2024 #Flutter

Transcript

1. Kenichi Kambara (@korodroid) November 23, 2024 Enhancing Flutter Apps UX for Global Users
2. •Mobile App Development •Speeches (e.g. 18 Int’l/100+ Domestic) •Writings (e.g. 10 Dev/Edu Books) •[Of fi cial] Evangelist at NTT TechnoCross •[Private] iplatform.org About me Kenichi Kambara (X:@korodroid)
3. Sekaiphone Pro(Flutter(+Kotlin/Swift)) About my product (Personal projects)
4. About my product and Me  Visited 47 Countries
5. •My Motivation •Various Language World •Supporting more Languages on Flutter Apps •Extra Tips MILANO Agenda
6. My Motivation 
7. My Motivation  English/Japanese… 4ZTUFN
   -BOHVBHF
   4FUUJOHT
   
   
   Arabic 
8. Left To Right (LTR) World [e.g. Japan🇯🇵] 
9. Left To Right (LTR) World [e.g. Italy🇮🇹] 
10.  Right To Left (RTL) World [e.g. Qatar🇶🇦/Egypt🇪🇬]
11. What’s RTL (Right To Left)?  Google Translation
12. RTL (Right To Left) Speakers  • Arabic: 370 million speakers/23 countries • Persian: 81 million speakers • Urdu: 70 million speakers • Hebrew: 8 million speakers • and some more… LingoHub: https://lingohub.com/academy/best-practices/rtl-language-list
13. 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 Generative AI]
14.  Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose 1. Checking RTL Basics
15. RTL Basics: Learning Guidelines  https://m2.material.io/design/usability/bidirectionality.html
16.  RTL Basics: Learning Guidelines 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 LTR World RTL World
19.  RTL Basics: Learning Guidelines LTR World RTL World ?
20.  RTL Basics: Learning Guidelines
21.  Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose 2. Getting Started for i18n
22. 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…
23. fl utter_localizations https://docs. fl utter.dev/ui/accessibility-and-internationalization/internationalization 
24. Installing “ fl utter_localization” 
25. Setting Up { "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… 
26. Using resources <project>/lib/main.dart Text(AppLocalizations.of(context)!.greeting); import 'package:flutter_gen/gen_l10n/app_localizations.dart'; 
27.  Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose 3. Testing our UI without modi fi cations
28. Testing our UI without modi fi cations  Good Bad
29. 1st Found Problem  Good Bad
30.  Good Bad 2nd Found Problem
31.  Good Bad 3rd Found Problem
32.  Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose 4. Deep Dive into Implementation
33. Deep Dive 1 (Icon)  b. Material a. Original on RTL on LTR
34. a. Original  Image.asset( 'assets/images/chara.png', matchTextDirection: true, ), on LTR on RTL
35. b. Material  https://api. fl utter.dev/ fl utter/material/Icons-class.html
36. b. Material 
37. b. Material  Icon( Icons.arrow_back, size: 80.0, ), on LTR on RTL
38. b. Material  Icon( Icons.euro, size: 80.0, ), on LTR on RTL
39. Deep Dive 1 (Icon): Result  on LTR on RTL
40. Deep Dive 2 (Layout)  Row( children: [ BlueArea(), GreyArea(), ], ), on LTR on RTL
41. Deep Dive 2 (Layout)  on LTR on RTL Row( mainAxisAlignment: MainAxisAlignment.start, children: [ BlueArea(), GreyArea(), ], ), Row( mainAxisAlignment: MainAxisAlignment.end, children: [ BlueArea(), GreyArea(), ], ),
42. Deep Dive 2 (Layout): Result  on LTR on RTL
43. Deep Dive 3 (Text)  Column( children: [ Text( “Text1", ), Text( “Text2", ), ], ), on LTR on RTL
44. Deep Dive 3 (Text)  Column( children: [ Text( “TextAlign.left", textAlign: TextAlign.left, ), Text( "TextAlign.right", textAlign: TextAlign.right, ), ], ), on LTR on RTL
45. Deep Dive 3 (Text): Result  old ver. new ver. LTR LTR RTL RTL
46. Deep Dive 4 (Combined)  on RTL
47. Deep Dive 4 (Combined)  on LTR Components(5 Image Widget in 1 Row)
48.  How would it look on RTL devices with no modi fi cations? Deep Dive 4 (Combined)
49. Deep Dive 4 (Combined)  on RTL Components(The order of Widgets?)
50. Deep Dive 4 (Combined)  Any solutions?
51. 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
52. Deep Dive 4 (Combined): Result  on LTR on RTL 㲔 㲔 old ver.
53. Deep Dive more Widget…  8JUIPVU
    DPOTJEFSJOH
    (MPCBM 8JUI
    DPOTJEFSJOH
    (MPCBM "MJHONFOU "MJHONFOU%JSFDUJPOBM #PSEFS #PSEFS%JSFDUJPOBM #PSEFS3BEJVT #PSEFS3BEJVT%JSFDUJPOBM &EHF*OTFUT &EHF*OTFUT%JSFDUJPOBM
54.  Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose Extra Tips for i18n with Generative AI
55. Mobile Apps Development with Generative AI  •Gemini •ChatGPT •Cloude •And more…
56. Complicated Task…(Language Resources)  English Arabic Japanese
57. 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 // … },
58. Preparations with Gemini 
59. Reference  X: @korodroid
60. Supporting more Languages for getting more Users🚀 Conclusion
61. Facebook:http://fb.com/kanbara.kenichi X:@korodroid LinkedIn:http://www.linkedin.com/in/korodroid Thank you so much Feel free to reach out for technical speeches, writing, or other inquiries