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

[ABC2023A]Go Global with Flutter Apps

[ABC2023A]Go Global with Flutter Apps

ABC 2023 Autumnの講演資料"Go Global with Flutter Apps"です。
#abc2023a #日本Androidの会 #flutterjp

Kenichi Kambara

November 23, 2023
Tweet

More Decks by Kenichi Kambara

Other Decks in Technology

Transcript

  1. 2023.11.23
    ਆݪ ݈Ұ (@korodroid)
    ABC 2023 Autumn
    Go Global with Flutter Apps

    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
    ਆݪ ݈Ұ (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. ߨԋςʔϚͷഎܠ

    View full-size slide


  5. ӳޠ/೔ຊޠ…
    ୺຤ͷݴޠઃఆ
    ΞϥϏΞޠ

    ߨԋςʔϚͷഎܠ

    View full-size slide

  6. ݴޠͦͷ1(LTR)ͷੈք (ྫ. ΪϦγϟ)

    View full-size slide

  7. ݴޠͦͷ2(RTL)ͷੈք (ྫ. Τδϓτ/Χλʔϧ)

    View full-size slide

  8. RTL(Right To Left)ͱ͸?

    Google຋༁

    View full-size slide

  9. RTLݴޠͷ࿩ऀ

    • 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

  10. FlutterΞϓϦʹ͓͚ΔRTLରԠखॱ

    1. RTLݴޠ”جૅ”ͷཧղ
    2. ࣮૷લʹΞϓϦͷςετ
    3. ৄࡉͳཧղˍ࣮૷

    View full-size slide

  11. Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose
    1. RTLݴޠ”جૅ”ͷཧղ

    View full-size slide

  12. RTLݴޠͷجૅ: Learning Guidelines

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

    View full-size slide


  13. RTLݴޠͷجૅ: Learning Guidelines

    View full-size slide


  14. RTLݴޠͷجૅ: Learning Guidelines

    View full-size slide


  15. RTLݴޠͷجૅ: Learning Guidelines

    View full-size slide

  16. Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose
    2. ࣮૷લʹΞϓϦͷςετ

    View full-size slide

  17. ίʔυमਖ਼લʹ·ͣ͸”ಈ࡞֬ೝ”

    Good
    Bad

    View full-size slide

  18. ൃݟ͞Εͨ໰୊ͱରॲ(1)

    Good
    Bad

    View full-size slide

  19. ൃݟ͞Εͨ໰୊ͱରॲ(2)

    Good
    Bad

    View full-size slide

  20. ൃݟ͞Εͨ໰୊ͱରॲ(3)

    Good
    Bad

    View full-size slide

  21. Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose
    3. ৄࡉͳཧղˍ࣮૷

    View full-size slide

  22. Flutterඪ४ͷi18nରԠ(
    fl
    utter_localizations)
    https://docs.
    fl
    utter.dev/ui/accessibility-and-internationalization/internationalization

    View full-size slide

  23. Deep dive 1 (Icon)

    b. ϚςϦΞϧ
    a. ΦϦδφϧ
    on RTL
    on LTR

    View full-size slide

  24. a. ΦϦδφϧΞΠίϯ

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

    View full-size slide

  25. b. ϚςϦΞϧΞΠίϯ

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

    View full-size slide

  26. b. ϚςϦΞϧΞΠίϯ

    View full-size slide


  27. Icon(
    Icons.arrow_back,
    size: 80.0,
    ),
    on LTR on RTL
    b. ϚςϦΞϧΞΠίϯ

    View full-size slide


  28. Icon(
    Icons.attach_money,
    size: 80.0,
    ),
    on LTR on RTL
    b. ϚςϦΞϧΞΠίϯ

    View full-size slide

  29. Deep dive 1 (Icon): ݁Ռ

    on LTR on RTL

    View full-size slide

  30. Deep dive 2 (Layout)

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

    View full-size slide

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

  32. Deep dive 2 (Layout): ݁Ռ

    on LTR on RTL

    View full-size slide


  33. on LTR on RTL
    㲔 㲔
    Deep dive 2 (Layout): ݁Ռ
    چόʔδϣϯ

    View full-size slide

  34. Deep dive 3 (Text)

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

    View full-size slide

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


  36. چόʔδϣϯ
    LTR LTR
    RTL RTL
    Deep dive 3 (Text): ݁Ռ
    ৽όʔδϣϯ

    View full-size slide

  37. ࠃࡍԽରԠͰ͞Βʹଟ͘ͷϢʔβ΁Ϧʔν
    Go Global 🚀
    ·ͱΊ

    View full-size slide

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