[FlutterAlliance]Designing Borderless UX in Flutter: Insights from 50 Countries

This is the slide, "Designing Borderless UX in Flutter: Insights from 50 Countries" at Flutter Alliance 2025.
#FlutterAlliance #FlutterDev

Transcript

1. Kenichi Kambara (@korodroid) October 19, 2025 Designing Borderless UX in Flutter : Insights from 50 Countries 2025
2. •Mobile App Development •Speeches (e.g. 23 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. Agenda 1. Intro to the World of Languages 2. Supporting more Languages on Flutter 3. Designing for Global UX 4. AI-Driven Localization
5. 1. Intro to the World of Languages A journey through languages around the world ͜Μʹͪ͸ উ֞ೞࣁਃ 㟬޷ اًبحرم
6. My Product and What I’ve Learned  Visited 50+ Countries
7. My Motivation 
8. My Motivation  English/Japanese… 4ZTUFN
   -BOHVBHF
   4FUUJOHT
   
   
   Arabic 
9. Left To Right (LTR) World [e.g. South Korea🇰🇷/Taiwan🇹🇼] 
10. Left To Right (LTR) World [e.g. Japan🇯🇵] 
11.  Right To Left (RTL) World [e.g. Qatar🇶🇦/Egypt🇪🇬]
12. RTL (Right To Left) Speakers  • Arabic: 370 million speakers • 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 WorldData.info: https://www.worlddata.info/languages/arabic.php Arabic-speaking countries (incl. non-native regions)
13. Supporting more Languages on Flutter 2. Foundation for Right-to-Left language support RTL Support Bidirectionality Widget/Layout Code Examples
14. Supporting more Languages on Flutter  (1) Understanding RTL Basics (2) Getting Started with i18n (3) Testing Before Code Changes (4) Deep Dive into Implementation
15. (1) Understanding RTL Basics 
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 LTR World RTL World ?
20.  RTL Basics: Learning Guidelines
21. (2) Getting Started with 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 known for its state management) •And more…
23. Implementation Example with slang { "greeting":Hello, {name}! } Create some new fi les i18n/strings.i18n.json { "greeting":"͜Μʹͪ͸ɺ{name}͞Μʂ" } { "greeting":"ﺎﺒﺣﺮﻣ، {name}!" } i18n/strings_ja.i18n.json i18n/strings_ar.i18n.json > fl utter pub get >dart run build_runner build -d Automatically Generated…  ar
24. Implementation Example with slang <project>/lib/main.dart Text(t.Translations.of(context).greeting(name: "Kenichi")); import ‘package:slang_flutter/slang_flutter.dart'; import 'i18n/strings.g.dart'; 
25. (3) Testing Before Code Changes 
26. Testing Before Code Changes  Good Bad
27. 1st Found Problem  After Before
28.  2nd Found Problem After Before
29.  3rd Found Problem After Before
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): Result  on LTR on RTL
40. Deep Dive 3 (Text)  Column( children: [ Text( “Text1", ), Text( “Text2", ), ], ), on LTR on RTL
41. Deep Dive 3 (Text)  Column( children: [ Text( “TextAlign.left", textAlign: TextAlign.left, ), Text( "TextAlign.right", textAlign: TextAlign.right, ), ], ), on LTR on RTL
42. Deep Dive 3 (Text): Result  LTR LTR RTL RTL After Before
43. Deep Dive 4 (Combined)  on RTL
44. Deep Dive 4 (Combined)  on LTR Components(5 Image Widgets in a Row)
45. Deep Dive 4 (Combined): Result  on LTR on RTL 㲔 㲔 After Before
46. Designing for Global UX 3. Beyond language support to borderless experiences Cultural Empathy Regional Behaviors Accessibility Measurement
47.  User Onboarding Across Regions based on my experience Best Practice 🌎8FTUFSO
    6TFST •Self-driven exploration •Speed and ef fi ciency focused •Prefer minimal guidance 🌎"TJBO
    6TFST •Prefer guided learning •Trust detailed explanations •Instruction-oriented behavior Observed patterns, but actual behavior depends on the user and the product. Continuous testing and feedback are essential.
48.  Cultural UX Differences Color Meanings 🔴Red: "Warning" (West) / “Celebration” (Asia) Gesture Icons 👍 “Good” (US) vs Offensive (Middle East) 👌 “OK” (US, JP) vs Vulgar (Brazil) App Contexts and Relationship UX e.g. Single user or Multiple users 💬
49.  e.g. App Contexts and Relationship UX 💬 㲔 㲔
50.  Accessibility Matters Contrast & Size Ensure clear text and color contrast for easy reading in any environment. Ref.) WCAG Guidelines Reduce Motion Design simply — use motion only when it adds meaning, not distraction. Accessibility Features Tap Targets Make buttons large enough (at least 48 dp) for comfortable tapping. 🔧 e.g. Screen reader, focus order, dark mode, and font scaling
51. AI-Driven Localization 4. AI + Human Continuous Improvement Multilingual UX through AI + Human collaboration
52. Mobile Apps Development with Generative AI  Natural language prompts for: •Translation •UI/UX strategy •Cultural insights $IBUCBTFE
    "* 🧠ChatGPT 🧠Claude 🧠Gemini "HFOUCBTFE
    "* 🛠Cursor 🛠Claude Code 🛠Codex Embedded in your IDE for: •Refactoring •Layout fi xing •Multilingual bug checking
53.  Sample App (Counter) $IBUCBTFE
    "* "HFOUCBTFE
    "* Use Case: Localize a Flutter App
54. Accelerating with Cursor  Processing with Cursor
55. AI + Human Collaboration  •Translate quickly •Ensure consistency •Generate Drafts Continuous Learning < > > > AI •Design from Real Experience •Re fi ne Nuance •Review & Improve Human
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