Supporting RTL on Flutter Apps

Slide 1

Slide 1 text

2023.10.17 Kenichi Kambara (@korodroid) Mobileษڧձ#11 Supporting RTL on Flutter Apps

Slide 2

Slide 2 text

About me •Mobile App Development •Speeches (e.g. 15 Int’l/100+ Domestic) •Writings (e.g. 8 Dev Books) •[Of fi cial] Evangelist at NTT TechnoCross •[Private] iplatform.org Kenichi Kambara (X:@korodroid)

Slide 3

Slide 3 text

About my Flutter product (Private works) Sekaiphone Pro(Flutter/Kotlin/Swift) MyToDo(Flutter)

Slide 4

Slide 4 text

My Motivation

Slide 5

Slide 5 text

My Motivation English/Japanese… 4NBSU1IPOF -BOHVBHF4FUUJOHT Arabic

Slide 6

Slide 6 text

What’s RTL (Right To Left)? Google Translation

Slide 7

Slide 7 text

RTL (Right To Left) Speakers • Arabic: 310 million speakers/26 countries • Urdu: 101 million speakers • Hebrew: 9 million speakers • and some more… LingoHub: https://lingohub.com/academy/best-practices/rtl-language-list

Slide 8

Slide 8 text

My steps for supporting RTL on Flutter 1. Learning LTR Guidelines 2. Checking our UI without modi fi cations 3. Adding some modi fi cations 4. And more…

Slide 9

Slide 9 text

1. Learning RTL Guidelines

Slide 10

Slide 10 text

1. Learning RTL Guidelines https://m2.material.io/design/usability/bidirectionality.html

Slide 11

Slide 11 text

2. Checking our UI without modi fi cations

Slide 12

Slide 12 text

3. Adding some modi fi cations Image.asset( 'assets/images/chara.png', matchTextDirection: true, ), on LTR on RTL

Slide 13

Slide 13 text

Supporting RTL for getting more Users Conclusion

Slide 14

Slide 14 text

Please let me know if you have any requests   such as technical speeches, technical writings and so on. Facebook:http://fb.com/kanbara.kenichi X:@korodroid LinkedIn:http://www.linkedin.com/in/korodroid Thank you so much