[FlutterKaigi] Building Better Flutter UX: Insights from 50+ Countries

This is the slide, "Building Better Flutter UX: Insights from 50+ Countries" at FlutterKaigi 2026.
#FlutterKaigi #FlutterDev #UX

Transcript

1. FlutterKaigi 2026 Building Better Flutter UX: Insights from 50+ Countries Kenichi Kambara (@korodroid) October 30, 2026 FlutterKaigi 2026
2. About me Kenichi Kambara (X:@korodroid) Mobile App Development Talks (28 Int’l/100+ Domestic) Writings (10 Dev/Edu Books) [Official] Evangelist at NTT TechnoCross e.g. Enterprise GenAI/Security, Voice Product, Smart livestock monitoring • [Private] iplatform.org • • • • • FlutterKaigi 2026 2
3. Inside My Project: SekaiPhone Pro FlutterKaigi 2026 Speech Translation: Developed with Flutter (+Kotlin/Swift) 3
4. Inside My Project: SekaiPals FlutterKaigi 2026 Language Learning: Developed with Flutter 4
5. UX Issues Across 50+ Countries FlutterKaigi 2026 Localization worked. The UX did not always work. 5
6. Reproducing real-app issues in a demo app 1 Real App Real issues and context 2 Demo App Reproduce the difference in a minimal setup 3 Implementation Code and design decisions Credibility of real experience × clarity of a minimal demo FlutterKaigi 2026 6
7. Agenda: Five Discoveries 1 Users do not behave as expected Speech / onboarding 2 When direction changes, UI meaning changes RTL 3 One layout is not enough Responsive 4 Support localization with architecture L10n 5 Accelerate the improvement cycle with AI Review / iteration FlutterKaigi 2026 7
8. 1 Users do not behave as expected Real-app voice UX and onboarding → Minimal demos → Flutter implementation FlutterKaigi 2026 8
9. Real App: Reducing uncertainty during speech recognition Before After From waiting for results to seeing feedback while speaking FlutterKaigi 2026 9
10. Design four states for speech UI FlutterKaigi 2026 1 2 3 4 Listening Processing Completed Error Start speaking Wait Review Try again 10
11. Demo 01: Show recognition status in real time DEMO What to Watch • Status chip clearly shows idle / listening • Display listen() results in real time • Highlight the latest characters in large bold text • Show unavailability or errors in the same location speech_to_text → UI state → RichText FlutterKaigi 2026 11
12. Implementation: Show priority with RichText / TextSpan Text.rich( TextSpan(children: [ TextSpan(text: recognizedWords, style: historyStyle), TextSpan(text: recentWords, style: activeStyle), ]), ) FlutterKaigi 2026 • Do not redesign the entire screen • Emphasize only the latest words • Use weight, not color alone • Communicate state and content together 12
13. Real App: Onboarding is often skipped Challenge Even if everything is explained at first, users may not remember it when they act. Design when guidance appears, not how much guidance exists. FlutterKaigi 2026 13
14. Demo 02: Show guidance near the target when users hesitate DEMO What to Watch • No overlay in the normal state — the screen stays clean • Hesitation triggers a spotlight on just the widget in question • Guidance appears near the target, not as a fullscreen takeover TargetFocus + GlobalKey to point directly to the target UI FlutterKaigi 2026 14
15. Decide when onboarding is necessary High frequency × High impact Always visible High frequency × Low impact Short hint FlutterKaigi 2026 Low frequency × High impact Confirm before action Low frequency × Low impact No explanation 15
16. 2 When direction changes, UI meaning changes Real-app RTL issue → Reproduce on one screen → Directional API FlutterKaigi 2026 16
17. Real App: The layout broke in an Arabic environment Designed for LTR RTL Environment Not only text, but placement, flow, and icon meaning also change FlutterKaigi 2026 17
18. Observe the UI in RTL before changing code FlutterKaigi 2026 Check Good Fix Check the meaning Direction changes automatically Explicit handling required Images / gestures Row / Material icons Fixed positions / mixeddirection text 18
19. Demo 03: One side breaks with the same toggle DEMO What to Watch • Toggling LTR → RTL flips the whole layout direction • "Before" is pinned to the start edge; only "After" moves to match • The arrow icon mirrors automatically; the airplane icon does not EdgeInsetsDirectional + AlignmentDirectional → start/end, not left/right FlutterKaigi 2026 19
20. Implementation: Use start / end instead of left / right NG OK EdgeInsets.only(left: 16) Alignment.centerLeft EdgeInsetsDirectional.only(start: 16) AlignmentDirectional.centerStart Express reading direction in code, not physical direction FlutterKaigi 2026 20
21. What to mirror and what not to mirror FlutterKaigi 2026 Back arrow Flags and logos Airplane / status icons Direction carries meaning Shape carries meaning Decide whether mirroring changes meaning Mirror Keep Usually keep 21
22. 3 One layout is not enough Real-app device support → Responsive demo → Text-length stress test FlutterKaigi 2026 22
23. Real App: Natural on phones, broken on wide screens Before After On wide screens, reorganize information instead of merely scaling up FlutterKaigi 2026 23
24. Use responsive and adaptive design appropriately FlutterKaigi 2026 Responsive Adaptive Fit the same structure to the available size Change structure and behavior for device, posture, and input method Flexible / Wrap / LayoutBuilder Compact / Dual Pane / Expanded 24
25. Demo 04: Change information structure from 1 pane to 2 DEMO What to Watch • Narrow width shows a single list, nothing else • Widening past the breakpoint adds a second pane automatically • Selecting an item fills the second pane with details, same screen LayoutBuilder: List only → Recompose as list + details FlutterKaigi 2026 25
26. As the same way: Provide the appropriate layout Face-to-Face Layout FlutterKaigi 2026 Layout for the Other Person 26
27. Real App: Translated strings change length FlutterKaigi 2026 Short in Japanese Long after translation 保存 (means Save) Alle vorgenommenen Änderungen jetzt dauerhaft speichern (German) The problem is invisible during development Fixed widths and lines break 27
28. Demo 05: Reproduce issues hidden with longer text DEMO What to Watch • Short text looks fine in both versions • Long text overflows and breaks the "before" layout • The "after" version holds — text truncates with an ellipsis instead Expanded + ellipsis → absorb growth, truncate gracefully FlutterKaigi 2026 28
29. Implementation: Design for flexible growth and shrinkage Before Row(children: [ Icon(Icons.settings), Text(label, maxLines: 1), ]) FlutterKaigi 2026 After Row(children: [ Icon(Icons.settings), Expanded(child: Text( label, overflow: TextOverflow.ellipsis)), ]) 29
30. Extra Topic: Time away from the screen is also UX + • Walking • Looking at the other person during a conversation • Using earphones • Phone in a pocket Off-screen is also UX Screenless Interaction FlutterKaigi 2026 30
31. 4 Support localization with architecture Real-app localization → Demo-app l10n foundation → Change workflow FlutterKaigi 2026 31
32. Hardcoded text does not scale with more languages UI ≠ STRINGS Separate UI from string resources Adding a language should not require screen redesign FlutterKaigi 2026 32
33. Localization Architecture: Separate concerns UI Widgets Resources Locale Resolver Directionality UX Feedback Layout / interaction ARB Device settings LTR / RTL Real usage Build a structure where translation changes do not require redesigning the entire screen FlutterKaigi 2026 33
34. Shorten the localization change workflow 1 2 3 4 5 Design keys Translation draft Check the actual UI RTL / long text Apply Completion means a natural experience in the actual UI, not merely finished translation files FlutterKaigi 2026 34
35. Cultural UX Considerations LANGUAGE Translation ➜ CULTURAL INTERPRETATION ➜ UX THAT FEELS NATURAL & SAFE 01 Instructions 02 Interactions 03 Expressions How guidance is understood What behavior feels natural What feels safe and trustworthy Translation makes the app readable. Cultural UX makes it usable. Language translation is only the starting point. FlutterKaigi 2026 35
36. Cultural UX Considerations Asian Users Western Users • Self-driven exploration • Speed and efficiency focused • Prefer minimal guidance • Prefer guided learning • Trust detailed explanations • Instruction-oriented behavior BEST PRACTICE Observed patterns, but actual behavior depends on the user and the product. Continuous testing and feedback are essential. FlutterKaigi 2026 36
37. Cultural UX Differences Color Meanings Red: “Warning” (West) / “Celebration” (Asia) Gesture Icons Thumbs-up: “Good” in many regions / Can be offensive in some regions OK hand: “OK” (US) / “Money” (Japan) / Can be vulgar in Brazil App Contexts and Relationship UX e.g. Single user or Multiple users Meaning depends on culture, region, and usage context. FlutterKaigi 2026 37
38. Accessibility Matters Contrast & Size Reduce Motion Ensure clear text and color contrast for easy reading in any environment. Ref.) WCAG Guidelines Design simply — use motion only when it adds meaning, not distraction. Tap Targets Accessibility Features Make buttons large enough (at least 48 dp) for comfortable tapping. Screen reader, focus order, dark mode, and font scaling. Accessibility is a foundation for comfortable use across many environments. FlutterKaigi 2026 38
39. 5 Accelerate the improvement cycle with AI Review RTL, long text, onboarding, and test perspectives, not translation alone FlutterKaigi 2026 39
40. Divide roles between AI and humans Generative AI • Draft translations • List RTL considerations • Explore long-text risks • Generate test cases FlutterKaigi 2026 Human • Understand local context • Judge subtle discomfort • Prioritize value • Verify in the real app 40
41. Example AI Review Prompt Required Information Role: Arabic RTL user and Flutter UX reviewer Context: Speech translation app used while traveling Check: reading order, mirrored icons, text expansion, recovery Output: Issue / Why / Flutter fix / Test case FlutterKaigi 2026 • Who uses it • Where it is used • What to evaluate • How the output should be structured 41
42. AI can execute improvements, not only review 1 2 3 4 5 Find issues Propose fixes Implement Test Human verification Start small and improve checklists and Skills every time they are used FlutterKaigi 2026 42
43. Minimum Pre-release Checklist FlutterKaigi 2026 Language Long translations / plurals / numbers Direction LTR / RTL / mixed-direction text Device Narrow width / wide width / rotation / hinge Access Text scaling / contrast / screen reader Recovery Cancel / retry / error recovery 43
44. One more important point FlutterKaigi 2026 44
45. Every person prefers to use their mother language Full Language Support (Major Language) FlutterKaigi 2026 Minimum Support (Regional Language) 45
46. Takeaways 1 2 3 4 Observe Reproduce Implement Iterate Discover issues in the real app Show the difference with a minimal demo Explain the small Flutter change Keep improving with AI and humans FlutterKaigi 2026 46
47. Three Actions You Can Take Tomorrow FlutterKaigi 2026 01 Switch the device language to RTL and review key screens 02 Triple string length and find where layouts break 03 Pick one issue you found, and fix it in your own product 47
48. Conclusion Great UX isn't universal by default. We make it universal by learning from real users. FlutterKaigi 2026
49. Thank you so much Feel free to reach out for technical speeches, writing, or other inquiries. Facebook:http://fb.com/kanbara.kenichi X:@korodroid LinkedIn:http://www.linkedin.com/in/korodroid FlutterCon EU 2026 FlutterKaigi 2026 66