[FlutterNinjas]Adapting Flutter App UX for Users Across the World

This is the slide, "Adapting Flutter App UX for Users Across the World" at Flutter Ninjas 2025
#FlutterNinjas #flutter #flutterjp #flutterdev

Transcript

1. Kenichi Kambara (@korodroid) May 29, 2025 Adapting Flutter App UX for Users Across the World
2. •Mobile App Development •Speeches (e.g. 20 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) NEW
3. Sekaiphone Pro(Flutter(+Kotlin/Swift)) Behind the Scenes of My Personal Project
4. My Product and What I’ve Learned  Visited 50+ Countries
5. Agenda •My Motivation •Intro to the World of Languages •Supporting more Languages on Flutter Apps •AI-Driven Localization Tips & Tools
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. 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
12. Supporting more Languages on Flutter  1. Understanding RTL Basics 2. Getting Started with i18n 3. Testing Before Code Changes 4. Deep Dive into Implementation [+AI-Driven Localization Tips & Tools]
13. 1. Understanding RTL Basics 
14.  https://m3.material.io/foundations/layout/understanding-layout/bidirectionality-rtl LTR and RTL Implementation in the Same App
15.  RTL Basics: Learning Guidelines LTR World RTL World
16.  RTL Basics: Learning Guidelines LTR World RTL World ?
17.  RTL Basics: Learning Guidelines LTR World RTL World
18.  RTL Basics: Learning Guidelines LTR World RTL World ?
19.  RTL Basics: Learning Guidelines
20. 2. Getting Started with 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 known for its state management) •And more…
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. 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… 
24. Using resources <project>/lib/main.dart Text(AppLocalizations.of(context)!.greeting); import 'package:flutter_gen/gen_l10n/app_localizations.dart'; 
25. 3. Testing Before Code Changes 
26. Testing Before Code Changes  Good Bad
27. 1st Found Problem  Good Bad
28.  Good Bad 2nd Found Problem
29.  Good Bad 3rd Found Problem
30. 4. Deep Dive into Implementation 
31. Deep Dive 1 (Icon)  b. Material a. Original on RTL on LTR
32. a. Original  Image.asset( 'assets/images/chara.png', matchTextDirection: true, ), on LTR on RTL
33. b. Material  https://api. fl utter.dev/ fl utter/material/Icons-class.html
34. b. Material 
35. b. Material  Icon( Icons.arrow_back, size: 80.0, ), on LTR on RTL
36. b. Material  Icon( Icons.euro, size: 80.0, ), on LTR on RTL
37. Deep Dive 1 (Icon): Result  on LTR on RTL
38. Deep Dive 2 (Layout)  Row( children: [ BlueArea(), GreyArea(), ], ), on LTR on RTL
39. Deep Dive 2 (Layout)  on LTR on RTL Row( mainAxisAlignment: MainAxisAlignment.start, children: [ BlueArea(), GreyArea(), ], ), Row( mainAxisAlignment: MainAxisAlignment.end, children: [ BlueArea(), GreyArea(), ], ),
40. Deep Dive 2 (Layout): Result  on LTR on RTL
41. Deep Dive 3 (Text)  Column( children: [ Text( “Text1", ), Text( “Text2", ), ], ), on LTR on RTL
42. Deep Dive 3 (Text)  Column( children: [ Text( “TextAlign.left", textAlign: TextAlign.left, ), Text( "TextAlign.right", textAlign: TextAlign.right, ), ], ), on LTR on RTL
43. Deep Dive 3 (Text): Result  old ver. new ver. LTR LTR RTL RTL
44. Deep Dive 4 (Combined)  on RTL
45. Deep Dive 4 (Combined)  on LTR Components(5 Image Widgets in a Row)
46. Deep Dive 4 (Combined)  on LTR on RTL •Icon •Layout matchTextDirection: true for reversing a Widget The order of each Widget is automatically reversed in a Row
47. Deep Dive 4 (Combined): Result  on LTR on RTL 㲔 㲔 old ver.
48. AI-Driven Localization Tips & Tools 
49. Mobile Apps Development with Generative AI  Natural language prompts for: •Translation •UI/UX strategy •Cultural insights $POWFSTBUJPOBM
    "* 🧠Gemini 🧠ChatGPT 🧠Claude *%&*OUFHSBUFE
    "* 🛠Cursor 🛠Cline 🛠GitHub Copilot Embedded in your IDE for: •Refactoring •Layout fi xing •Multilingual bug checking
50. Use Case 1: Using Conversational AI  English Arabic Japanese
51. 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 // … },
52. Preparations with Gemini 
53. Use Case 2: Using IDE-Integrated AI  Initial project *OTUBMMJOH
    UIF
    JO
    QBDLBHF 1SFQBSJOH
    JO
    SFTPVSDFT 3FGBDUPSJOH
    UIF
    DPEF BOE
    NPSF
54. Accelerating with Cursor 
55. Accelerating with Cursor 
56. Reference  X: @korodroid
57. Supporting More Languages to Reach More Users🚀 Conclusion
58. 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