[ABC2024Summer]Flutter UX Improvements + α

ABC 2024 Summerの講演資料"Flutter UX Improvements + α"です。
#abc2024s #日本Androidの会 #flutterjp #flutter

Transcript

1. 2024.06.29 ਆݪ ݈Ұ (@korodroid) ABC 2024 Summer Flutter UX Improvements + α
2. About me •Mobile App Development •Speeches (e.g. 16 Int’l/100+ Domestic) •Writings (e.g. 9 Dev Books) •[Of fi cial] Evangelist at NTT TechnoCross •[Private] iplatform.org ਆݪ ݈Ұ (X:@korodroid) NEW NEW
3. Agenda •FlutterΞϓϦʹ͓͚ΔUXվળࣄྫ •ੜ੒AIΛ׆༻ͨ͠FlutterΞϓϦ։ൃೖ໳
4. FlutterΞϓϦʹ͓͚ΔUXվળࣄྫ
5. Sekaiphone Pro(Flutter/Kotlin/Swift) About my Flutter product (Private works)
6. ߨԋςʔϚͷഎܠ  47 Countries
7.  1. ૢ࡞ੑ 2. νϡʔτϦΞϧ 3. ίʔνϚʔΫ 4. ΞμϓςΟϒϨΠΞ΢τ 5. ֎෦σόΠε׆༻ 6. ଟݴޠαϙʔτ(ϩʔΧϥΠζ) 7. ଟݴޠαϙʔτ(RTLݴޠ) FlutterΞϓϦʹ͓͚ΔUXվળͷ࣮ྫ
8.  1. ૢ࡞ੑ 2. νϡʔτϦΞϧ 3. ίʔνϚʔΫ 4. ΞμϓςΟϒϨΠΞ΢τ 5. ֎෦σόΠε׆༻ 6. ଟݴޠαϙʔτ(ϩʔΧϥΠζ) 7. ଟݴޠαϙʔτ(RTLݴޠ) FlutterΞϓϦʹ͓͚ΔUXվળͷ࣮ྫ
9. 1. ૢ࡞ੑ 
10. ղܾࡦ: TexSpan(&TextStyle)ͷར༻ 
11. 2. νϡʔτϦΞϧ 
12. ղܾࡦ: intro_sliderͷར༻  https://pub.dev/packages/intro_slider
13. ίʔυྫ 
14. ίʔυྫ 
15. Tips. ΧελϚΠζ 
16. 3. ίʔνϚʔΫ 
17. ղܾࡦ: tutorial_coach_markͷར༻  https://pub.dev/packages/tutorial_coach_mark
18. Ϣʔεέʔε 
19. ίʔυྫ 
20. ίʔυྫ 
21. ίʔυྫ 
22. Tips. ΧελϚΠζ 
23.  4. ΞμϓςΟϒϨΠΞ΢τ
24. ՝୊ͦͷ(1): ը໘αΠζͷࠩҟʹΑΔӨڹ
25. ղܾࡦ: MediaQuery/DiplayFeatures  https://api. fl utter.dev/ fl utter/dart-ui/DisplayFeatureType.html
26. ίʔυྫ  Display Type Layout
27. ՝୊ͦͷ(2): ը໘ͷ޲͖ʹΑΔϨΠΞ΢τ่Ε 
28.  εϚϗ →Portlaitݻఆ λϒϨοτ౳ →Portlait/Landscape྆ରԠ ࠓճͷରࡦ: Ұ෦ը໘αΠζͰը໘ͷ޲͖Λݻఆ
29. ղܾࡦ: SystemChrome/setPreferredOrientations  https://api. fl utter.dev/ fl utter/services/SystemChrome/setPreferredOrientations.html
30. ίʔυྫ 
31. 5.֎෦σόΠε׆༻ 
32. ղܾࡦ ɿը໘͸࢖Θͳ͍ + 
33. ղܾࡦ: audio_serviceͷར༻  https://pub.dev/packages/audio_service
34. ίʔυྫ  Dart code
35. ίʔυྫ  AndroidManifest.xml(for Android)
36. ૺ۰ͨ͠௥Ճͷ՝୊[on Android] .&%*"@#6550/
    &WFOU #MVFUPPUI
    <DPNBOESPJECMVFUPPUI> 0UIFS
    "QQT
    <FH
    :PV
    5VCF> .Z
    "QQ 
37. ղܾࡦ: ActiveͳϝσΟΞηογϣϯͷऔಘ 
38.  1. ૢ࡞ੑ 2. νϡʔτϦΞϧ 3. ίʔνϚʔΫ 4. ΞμϓςΟϒϨΠΞ΢τ 5. ֎෦σόΠε׆༻ 6. ଟݴޠαϙʔτ(ϩʔΧϥΠζ) 7. ଟݴޠαϙʔτ(RTLݴޠ) FlutterΞϓϦʹ͓͚ΔUXվળͷ࣮ྫ
39.  ଟݴޠαϙʔτ: ରԠޙͷը໘(׬੒൛) ӳޠ ΞϥϏΞޠ ୺຤ͷݴޠઃఆ
40. 6. ଟݴޠαϙʔτ(ϩʔΧϥΠζ) 
41. ଟݴޠରԠ(ඪ४ύοέʔδ fl utter_localizations) https://docs. fl utter.dev/ui/accessibility-and-internationalization/internationalization 
42. ඪ४ύοέʔδҎ֎ͷΞϓϩʔν  • fl utter_localizations •easy_localization • fl utter_translate •slang (fast_i18n)
43. 7. ଟݴޠαϙʔτ(RTLݴޠ) ӳޠ/೔ຊޠ… ΞϥϏΞޠ… 
44. ӳޠͱΞϥϏΞޠ͕ࠞࡏ͢Δγʔϯ 
45. จࣈΛॻ͘ํ޲(&഑ஔ)ɿLTR&RTL 
46.  RTLݴޠͷجૅ(1)จࣈ https://m2.material.io/design/usability/bidirectionality.html
47.  RTLݴޠͷجૅ(2)ΞΠίϯ
48.  ΞΠίϯͷରࡦྫ Image.asset( 'assets/images/chara.png', matchTextDirection: true, ), on LTR on RTL
49.  ϨΠΞ΢τͷରࡦྫ Row( children: [ BlueArea(), GreyArea(), ], ), on LTR on RTL
50.  άϩʔόϧରԠͷଓ͖͸ͪ͜Β Go Global with Flutter Apps@ABC 2023 Autumn https://abc.android-group.jp/abc2023a/
51. Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose ੜ੒AIΛ׆༻ͨ͠FlutterΞϓϦ։ൃೖ໳
52. ΞϓϦ։ൃʹ͓͚Δੜ੒AI׆༻(ྫ)  ίʔυͷੜ੒ ϦϑΝΫλϦϯά
    ˍϞμφΠζ ςετέʔεͷੜ੒ ίʔυͷϨϏϡʔ σόοά ύϑΥʔϚϯεվળ
53. ΞϓϦ։ൃʹ͓͚Δੜ੒AI׆༻(ྫ)  ίʔυͷੜ੒ ϦϑΝΫλϦϯά
    ˍϞμφΠζ ςετέʔεͷੜ੒ ίʔυͷϨϏϡʔ σόοά ύϑΥʔϚϯεվળ
54. FlutterΞϓϦ։ൃͷ͸͡Ίํ for Beginner  •Flutter(+Dart)ͷجૅ •։ൃɾ࣮ߦ؀ڥߏங •؆୯ͳΞϓϦ։ൃ
55. FlutterΞϓϦ։ൃͷ͸͡Ίํ for Beginner  •Flutter(+Dart)ͷجૅ •։ൃɾ࣮ߦ؀ڥߏங •؆୯ͳΞϓϦ։ൃ
56. ࠓճ։ൃ͢ΔFlutterΞϓϦ 
57. • DartPad • ੜ੒AI ։ൃɾ࣮ߦ؀ڥߏங 
58. DartPad Webϒϥ΢β্ͰίʔυΛॻ͘ˠಈ࡞֬ೝ https://dartpad.dev 
59. Dart͚ͩͰͳ͘Flutterʹ΋ରԠ DartPad  ˞ ※ར༻Մೳͳύοέʔδ͕ݶΒΕ͍ͯΔͳͲͷ੍໿͋Γ
60. ੜ੒AI ࠓճ͸ίʔυͷࣗಈੜ੒ɾิॿʹ׆༻ $IBU(15 (FNJOJ $MBVEF ※ຊࢿྉ͸ChatGPT 4o/Gemini 1.5 Pro/Claude 3.5 SonnetΛར༻ͨ݁͠ՌΛݩʹ࡞੒ 
61. ੜ੒AIΛ׆༻ͨ͠FlutterΞϓϦ։ൃͷྲྀΕ
    
    4UFQ
    ϕʔεͱͳΔίʔυͷੜ੒
    
    4UFQ
    ΞϓϦͷվ଄
    
    4UFQ
    ಉ༷ʹ4UFQ
    CZ
    4UFQͰ ͋͘·Ͱ1ͭͷྫ 
62. Step1. ϕʔεͱͳΔίʔυͷੜ੒ $IBU(15 
63. Step1. ϕʔεͱͳΔίʔυͷੜ੒ 
64. $IBU(15 (FNJOJ $MBVEF ˞ ※ݕূ࣌ͷڍಈͱͯ͠͸ɺmainؔ਺ؚ͕·Εͳ͍ίʔυ͕ੜ੒͞ΕͨɻͦͷͨΊ௥ՃࢦࣔΛ࣮ࢪ Step1. ϕʔεͱͳΔίʔυͷੜ੒ 
65. Step2. ΞϓϦͷվ଄ ҰԠͰ͖͚ͨͲɺΧελϚΠζ ͍ͨ͠… •࣌ܭͷഎܠ৭Λม͍͑ͨ •࣌ܭ͕খ͍͞ •จࣈ൫Λ௥Ճ͍ͨ͠ ΄͔ʹ΋… 
66. Step2. ΞϓϦͷվ଄: ࣌ܭͷഎܠ৭Λม͍͑ͨ 
67. Step2. ΞϓϦͷվ଄: ࣌ܭ͕খ͍͞ 
68. Step2. ΞϓϦͷվ଄: ࣌ܭ͕খ͍͞ 
69. Step2. ΞϓϦͷվ଄: ࣌ܭ͕খ͍͞(ଓ͖) 
70. Step3. ಉ༷ʹStep by StepͰ ௥ՃͰ࣮ݱͨ͠಺༰ •ඵ਑ͷ৭ͷมߋ •਺ࣈͷ௥Ճ(1-12) •12࣌ʹϚʔΫ௥Ճ 
71. Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose ੜ੒AIΛ׆༻ͨ͠FlutterΞϓϦ։ൃߴ଎Խ(ྫ)
72. Ԡ༻ฤɿੜ੒AIΛ׆༻ͨ͠ଟݴޠରԠ  ೔ຊޠ ӳޠ ΞϥϏΞޠ
73. ݴޠϦιʔεͷྫ  // ӳޠϦιʔε "en": { // τοϓը໘ "appName": "SekaiPhone Pro", "modeTalkSpeech": "Talk Mode\n(Speech)", "modeTalkText": "Talk Mode\n(Text)", "modePhone": "Phone Mode", "modeCamera": "Camera Mode", // XXը໘ // … }, // ೔ຊޠϦιʔε "jp": { // τοϓը໘ "appName": "SekaiPhone Pro", "modeTalkSpeech": “͜ͷ৔Ͱ຋༁\n(Ի੠)”, …
74. ݴޠϦιʔεͷ४උ with ChatGPT 
75. ࣗ਎ͷؾ͖ͮ(ੜ੒AIͱͷ෇͖߹͍ํ) ຊ౰ͷΑ͏ͳӕΛͭ͘͜ͱ͸͋Δ΋ͷͷ ಓ۩ͱͯ͠༏लͳนଧͪ૬खʹ💪 •۩ମతͳࢦ͕ࣔϕλʔʢϢʔεέʔε࣍ୈʣ •ࠩ෼ͷΈੜ੒Ͱ࣌ؒઅ໿ •ਖ਼ղͱ͸ݶΒͳ͍(ਅͷٕज़ྗͷॏཁੑʂʂʂ) 
76. UXվળͰ͞Βʹ৺஍Α͍ΞϓϦΛ🙌 ಓ۩ͱͯ͠ੜ੒AI׆༻ͰΞϓϦ։ൃ΋ߴ଎Խ🚀 ·ͱΊ
77. 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