Kenichi Kambara (@korodroid)
November 23, 2024
Enhancing Flutter Apps UX
for Global Users
Slide 2
Slide 2 text
•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)
Slide 3
Slide 3 text
Sekaiphone Pro(Flutter(+Kotlin/Swift))
About my product (Personal projects)
Slide 4
Slide 4 text
About my product and Me
Visited 47 Countries
Slide 5
Slide 5 text
•My Motivation
•Various Language World
•Supporting more Languages on Flutter Apps
•Extra Tips
MILANO
Agenda
Slide 6
Slide 6 text
My Motivation
Slide 7
Slide 7 text
My Motivation
English/Japanese…
4ZTUFN-BOHVBHF4FUUJOHT
Arabic
Slide 8
Slide 8 text
Left To Right (LTR) World [e.g. Japan🇯🇵]
Slide 9
Slide 9 text
Left To Right (LTR) World [e.g. Italy🇮🇹]
Slide 10
Slide 10 text
Right To Left (RTL) World [e.g. Qatar🇶🇦/Egypt🇪🇬]
Slide 11
Slide 11 text
What’s RTL (Right To Left)?
Google Translation
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
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]
Slide 14
Slide 14 text
Wear OS ΞϓϦ։ൃೖ with Jetpack Compose
1. Checking RTL Basics
RTL Basics: Learning Guidelines
LTR World RTL World
Slide 17
Slide 17 text
RTL Basics: Learning Guidelines
? ?
LTR World RTL World LTR World RTL World
Slide 18
Slide 18 text
RTL Basics: Learning Guidelines
LTR World RTL World LTR World RTL World
Slide 19
Slide 19 text
RTL Basics: Learning Guidelines
LTR World RTL World
?
Slide 20
Slide 20 text
RTL Basics: Learning Guidelines
Slide 21
Slide 21 text
Wear OS ΞϓϦ։ൃೖ with Jetpack Compose
2. Getting Started for i18n
Slide 22
Slide 22 text
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…
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…
Slide 26
Slide 26 text
Using resources
/lib/main.dart
Text(AppLocalizations.of(context)!.greeting);
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
Slide 27
Slide 27 text
Wear OS ΞϓϦ։ൃೖ with Jetpack Compose
3. Testing our UI without modi
fi
cations
Slide 28
Slide 28 text
Testing our UI without modi
fi
cations
Good
Bad
Slide 29
Slide 29 text
1st Found Problem
Good
Bad
Slide 30
Slide 30 text
Good
Bad
2nd Found Problem
Slide 31
Slide 31 text
Good
Bad
3rd Found Problem
Slide 32
Slide 32 text
Wear OS ΞϓϦ։ൃೖ with Jetpack Compose
4. Deep Dive into Implementation
Slide 33
Slide 33 text
Deep Dive 1 (Icon)
b. Material
a. Original
on RTL
on LTR
Slide 34
Slide 34 text
a. Original
Image.asset(
'assets/images/chara.png',
matchTextDirection: true,
),
on LTR on RTL
Slide 35
Slide 35 text
b. Material
https://api.
fl
utter.dev/
fl
utter/material/Icons-class.html
Slide 36
Slide 36 text
b. Material
Slide 37
Slide 37 text
b. Material
Icon(
Icons.arrow_back,
size: 80.0,
),
on LTR on RTL
Slide 38
Slide 38 text
b. Material
Icon(
Icons.euro,
size: 80.0,
),
on LTR on RTL
Slide 39
Slide 39 text
Deep Dive 1 (Icon): Result
on LTR on RTL
Slide 40
Slide 40 text
Deep Dive 2 (Layout)
Row(
children: [
BlueArea(),
GreyArea(),
],
),
on LTR on RTL
Slide 41
Slide 41 text
Deep Dive 2 (Layout)
on LTR on RTL
Row(
mainAxisAlignment:
MainAxisAlignment.start,
children: [
BlueArea(),
GreyArea(),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment.end,
children: [
BlueArea(),
GreyArea(),
],
),
Slide 42
Slide 42 text
Deep Dive 2 (Layout): Result
on LTR on RTL
Slide 43
Slide 43 text
Deep Dive 3 (Text)
Column(
children: [
Text(
“Text1",
),
Text(
“Text2",
),
],
),
on LTR on RTL
Slide 44
Slide 44 text
Deep Dive 3 (Text)
Column(
children: [
Text(
“TextAlign.left",
textAlign: TextAlign.left,
),
Text(
"TextAlign.right",
textAlign: TextAlign.right,
),
],
),
on LTR on RTL
Slide 45
Slide 45 text
Deep Dive 3 (Text): Result
old ver. new ver.
LTR LTR
RTL RTL
Slide 46
Slide 46 text
Deep Dive 4 (Combined)
on RTL
Slide 47
Slide 47 text
Deep Dive 4 (Combined)
on LTR
Components(5 Image Widget in 1 Row)
Slide 48
Slide 48 text
How would it look on RTL devices
with no modi
fi
cations?
Deep Dive 4 (Combined)
Slide 49
Slide 49 text
Deep Dive 4 (Combined)
on RTL
Components(The order of Widgets?)
Slide 50
Slide 50 text
Deep Dive 4 (Combined)
Any solutions?
Slide 51
Slide 51 text
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
Slide 52
Slide 52 text
Deep Dive 4 (Combined): Result
on LTR on RTL
㲔 㲔
old ver.
Slide 53
Slide 53 text
Deep Dive more Widget…
8JUIPVUDPOTJEFSJOH(MPCBM 8JUIDPOTJEFSJOH(MPCBM
"MJHONFOU "MJHONFOU%JSFDUJPOBM
#PSEFS #PSEFS%JSFDUJPOBM
#PSEFS3BEJVT #PSEFS3BEJVT%JSFDUJPOBM
&EHF*OTFUT &EHF*OTFUT%JSFDUJPOBM
Slide 54
Slide 54 text
Wear OS ΞϓϦ։ൃೖ with Jetpack Compose
Extra Tips for i18n with Generative AI
Slide 55
Slide 55 text
Mobile Apps Development with Generative AI
•Gemini
•ChatGPT
•Cloude
•And more…
Slide 56
Slide 56 text
Complicated Task…(Language Resources)
English Arabic
Japanese
Slide 57
Slide 57 text
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
// …
},
Slide 58
Slide 58 text
Preparations with Gemini
Slide 59
Slide 59 text
Reference
X: @korodroid
Slide 60
Slide 60 text
Supporting more Languages
for getting more Users🚀
Conclusion
Slide 61
Slide 61 text
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