Supporting RTL on Flutter Apps 7 Development Tips

Slide 1

Slide 1 text

2024.01.18 Kenichi Kambara (@korodroid) ϞόΠϧΤϯδχΞ LT৽೥ձ 2024 Supporting RTL on Flutter Apps 7 Development Tips

Slide 2

Slide 2 text

About me •Mobile App Development •Speeches (e.g. 16 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 English/Japanese… 4ZTUFN-BOHVBHF4FUUJOHT Arabic

Slide 5

Slide 5 text

Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose 7 Development Tips for supporting RTL

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Tips2: Mixing LTR & RTL https://m2.material.io/design/usability/bidirectionality.html

Slide 8

Slide 8 text

Tips3: Using Icons

Slide 9

Slide 9 text

Tips3: Using Icons

Slide 10

Slide 10 text

e.g. Image.asset( 'assets/images/chara.png', matchTextDirection: true, ), on LTR on RTL

Slide 11

Slide 11 text

ref. https://api. fl utter.dev/ fl utter/widgets/Image/matchTextDirection.html

Slide 12

Slide 12 text

Tips4: Managing Layout on LTR on RTL

Slide 13

Slide 13 text

e.g. Row( children: [ BlueArea(), GreyArea(), ], ), on LTR on RTL

Slide 14

Slide 14 text

Tips5: Managing TextAlign LTR LTR RTL RTL

Slide 15

Slide 15 text

e.g. Column( children: [ Text( “Text1", ), Text( “Text2", ), ], ), on LTR on RTL

Slide 16

Slide 16 text

e.g. Column( children: [ Text( “TextAlign.left", textAlign: TextAlign.left, ), Text( "TextAlign.right", textAlign: TextAlign.right, ), ], ), on LTR on RTL

Slide 17

Slide 17 text

Tips6: Combined on LTR on RTL •Icon •Layout matchTextDirection: true for reversing Widget The order of each Widget is automatically reversed in Row

Slide 18

Slide 18 text

Tips7: Deep Dive: more Widgets 8JUIPVUDBSJOH(MPCBM 8JUIDBSJOH(MPCBM "MJHONFOU "MJHONFOU%JSFDUJPOBM #PSEFS #PSEFS%JSFDUJPOBM #PSEFS3BEJVT #PSEFS3BEJVT%JSFDUJPOBM &EHF*OTFUT &EHF*OTFUT%JSFDUJPOBM

Slide 19

Slide 19 text

Supporting RTL for getting more Users Conclusion

Slide 20

Slide 20 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