$30 off During Our Annual Pro Sale. View Details »

[DevFestKC]Go Global with Flutter Apps 101

[DevFestKC]Go Global with Flutter Apps 101

This is the slide, "Go Global with Flutter Apps 101" at DevFest KC 2023
#devfestkc #GDG #DevFest #DevFest2023 #Flutter

Kenichi Kambara

December 02, 2023
Tweet

More Decks by Kenichi Kambara

Other Decks in Technology

Transcript

  1. 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) NEW
  2. 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
  3. 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 ChatGPT
  4. 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…
  5. Setting Up 1/3 return MaterialApp( title: ‘App', localizationsDelegates: const [

    GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, ], supportedLocales: const [ Locale('en'), // English(LTR) Locale('ja'), // Japanese(LTR) Locale('ar'), // Arabic(RTL) ], import 'package:flutter_localizations/flutter_localizations.dart'; <project>/lib/main.dart 
  6. Setting Up 2/3 arb-dir: lib/l10n template-arb-file: app_en.arb output-localization-file: app_localizations.dart flutter:

    generate: true # Add this line <project>/l10n.dart Create a new fi le called “l10n.dart” <project>/pubspec.yaml 
  7. Setting Up 3/3 { "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… 
  8. One problem…->Better Approach return MaterialApp( title: ‘App', localizationsDelegates: const [

    GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, ], supportedLocales: const [ Locale('en'), // English(LTR) Locale('ja'), // Japanese(LTR) Locale('ar'), // Arabic(RTL) ], return MaterialApp( title: ‘App', localizationsDelegates: AppLocalizations.localizationsDelegates, supportedLocales: AppLocalizations.supportedLocales, 
  9. Deep Dive 2 (Layout)  on LTR on RTL Row(

    mainAxisAlignment: MainAxisAlignment.start, children: [ BlueArea(), GreyArea(), ], ), Row( mainAxisAlignment: MainAxisAlignment.end, children: [ BlueArea(), GreyArea(), ], ),
  10. Deep Dive 3 (Text)  Column( children: [ Text( “Text1",

    ), Text( “Text2", ), ], ), on LTR on RTL
  11. Deep Dive 3 (Text)  Column( children: [ Text( “TextAlign.left",

    textAlign: TextAlign.left, ), Text( "TextAlign.right", textAlign: TextAlign.right, ), ], ), on LTR on RTL
  12. Deep dive 4 (Combined)  How would it look on

    RTL devices with no modi fi cations?
  13. 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
  14. Deep Dive more Widget…  8JUIPVUDPOTJEFSJOH(MPCBM 8JUIDPOTJEFSJOH(MPCBM "MJHONFOU "MJHONFOU%JSFDUJPOBM #PSEFS

    #PSEFS%JSFDUJPOBM #PSEFS3BEJVT #PSEFS3BEJVT%JSFDUJPOBM &EHF*OTFUT &EHF*OTFUT%JSFDUJPOBM
  15. 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 // … }, // Japanese Resource "jp": { // Top Screen "appName": "SekaiPhone Pro", "modeTalkSpeech": “͜ͷ৔Ͱ຋༁\n(Ի੠)”, …
  16. 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