Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[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. Kenichi Kambara (@korodroid)
    December 2, 2023
    KC 2023
    Go Global with Flutter Apps 101

    View full-size slide

  2. 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

    View full-size slide

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

    View full-size slide

  4. Agenda
    •My Motivation
    •Various Language World
    •Supporting more Languages on Flutter
    •Extra Tips

    View full-size slide

  5. My Motivation

    View full-size slide

  6. My Motivation

    English/Japanese…
    4ZTUFN-BOHVBHF4FUUJOHT
    Arabic

    View full-size slide

  7. Left To Right (LTR) World [e.g. Japan🇯🇵]

    View full-size slide

  8. Left To Right (LTR) World [e.g. Greece🇬🇷]

    View full-size slide


  9. Right To Left (RTL) World [e.g. Qatar🇶🇦/Egypt🇪🇬]

    View full-size slide

  10. What’s RTL (Right To Left)?

    Google Translation

    View full-size slide

  11. 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

    View full-size slide

  12. 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

    View full-size slide


  13. Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose
    1. Checking RTL Basics

    View full-size slide

  14. RTL Basics: Learning Guidelines

    https://m2.material.io/design/usability/bidirectionality.html

    View full-size slide


  15. RTL Basics: Learning Guidelines
    LTR World RTL World

    View full-size slide


  16. RTL Basics: Learning Guidelines
    ? ?
    LTR World RTL World LTR World RTL World

    View full-size slide


  17. RTL Basics: Learning Guidelines
    LTR World RTL World LTR World RTL World

    View full-size slide


  18. RTL Basics: Learning Guidelines
    LTR World RTL World
    ?

    View full-size slide


  19. RTL Basics: Learning Guidelines

    View full-size slide


  20. Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose
    2. Getting Started for i18n

    View full-size slide

  21. 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…

    View full-size slide

  22. fl
    utter_localizations
    https://docs.
    fl
    utter.dev/ui/accessibility-and-internationalization/internationalization

    View full-size slide

  23. Installing “
    fl
    utter_localization”

    View full-size slide

  24. 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';
    /lib/main.dart

    View full-size slide

  25. 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
    /l10n.dart
    Create a new
    fi
    le called “l10n.dart”
    /pubspec.yaml

    View full-size slide

  26. 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…

    View full-size slide

  27. Using resources
    /lib/main.dart
    Text(AppLocalizations.of(context)!.greeting);
    import 'package:flutter_gen/gen_l10n/app_localizations.dart';

    View full-size slide

  28. 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,

    View full-size slide


  29. Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose
    3. Testing our UI without modi
    fi
    cations

    View full-size slide

  30. Testing our UI without modi
    fi
    cations

    Good
    Bad

    View full-size slide

  31. Found Problems (1)

    Good
    Bad

    View full-size slide


  32. Good
    Bad
    Found Problems (2)

    View full-size slide


  33. Good
    Bad
    Found Problems (3)

    View full-size slide


  34. Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose
    4. Deep Dive into Implementation

    View full-size slide

  35. Deep Dive 1 (Icon)

    b. Material
    a. Original
    on RTL
    on LTR

    View full-size slide

  36. a. Original

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

    View full-size slide

  37. b. Material

    https://api.
    fl
    utter.dev/
    fl
    utter/material/Icons-class.html

    View full-size slide

  38. b. Material

    Icon(
    Icons.arrow_back,
    size: 80.0,
    ),
    on LTR on RTL

    View full-size slide

  39. b. Material

    Icon(
    Icons.attach_money,
    size: 80.0,
    ),
    on LTR on RTL

    View full-size slide

  40. Deep Dive 1 (Icon): Result

    on LTR on RTL

    View full-size slide

  41. Deep Dive 2 (Layout)

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

    View full-size slide

  42. Deep Dive 2 (Layout)

    on LTR on RTL
    Row(
    mainAxisAlignment:
    MainAxisAlignment.start,
    children: [
    BlueArea(),
    GreyArea(),
    ],
    ),
    Row(
    mainAxisAlignment:
    MainAxisAlignment.end,
    children: [
    BlueArea(),
    GreyArea(),
    ],
    ),

    View full-size slide

  43. Deep Dive 2 (Layout): Result

    on LTR on RTL

    View full-size slide

  44. Deep Dive 3 (Text)

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

    View full-size slide

  45. Deep Dive 3 (Text)

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

    View full-size slide

  46. Deep Dive 3 (Text): Result

    old ver. new ver.
    LTR LTR
    RTL RTL

    View full-size slide

  47. Deep Dive 4 (Combined)

    on RTL

    View full-size slide

  48. Deep Dive 4 (Combined)

    on LTR
    Components(5 Image Widget in 1 Row)

    View full-size slide

  49. Deep dive 4 (Combined)

    How would it look on RTL devices
    with no modi
    fi
    cations?

    View full-size slide

  50. Deep Dive 4 (Combined)

    on RTL
    Components(The order of Widgets?)

    View full-size slide

  51. Deep Dive 4 (Combined)

    Any solutions?

    View full-size slide

  52. 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

    View full-size slide

  53. Deep Dive 4 (Combined): Result

    on LTR on RTL
    㲔 㲔
    old ver.

    View full-size slide

  54. Deep Dive more Widget…

    8JUIPVUDPOTJEFSJOH(MPCBM 8JUIDPOTJEFSJOH(MPCBM
    "MJHONFOU "MJHONFOU%JSFDUJPOBM
    #PSEFS #PSEFS%JSFDUJPOBM
    #PSEFS3BEJVT #PSEFS3BEJVT%JSFDUJPOBM
    &EHF*OTFUT &EHF*OTFUT%JSFDUJPOBM

    View full-size slide


  55. Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose
    Extra Tips for i18n with ChatGPT

    View full-size slide

  56. Complicated Task…(Language Resources)

    English Arabic
    Japanese

    View full-size slide

  57. 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(Ի੠)”,

    View full-size slide

  58. Preparations with ChatGPT

    View full-size slide

  59. Reference

    Slide
    X: @korodroid

    View full-size slide

  60. Supporting more Languages
    for getting more Users🚀
    Conclusion

    View full-size slide

  61. 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

    View full-size slide