[ABC2024Summer]Flutter UX Improvements + α

Slide 1

Slide 1 text

2024.06.29 ਆݪ ݈Ұ (@korodroid) ABC 2024 Summer Flutter UX Improvements + α

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Agenda •FlutterΞϓϦʹ͓͚ΔUXվળࣄྫ •ੜ੒AIΛ׆༻ͨ͠FlutterΞϓϦ։ൃೖ໳

Slide 4

Slide 4 text

FlutterΞϓϦʹ͓͚ΔUXվળࣄྫ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

ߨԋςʔϚͷഎܠ 47 Countries

Slide 7

Slide 7 text

1. ૢ࡞ੑ 2. νϡʔτϦΞϧ 3. ίʔνϚʔΫ 4. ΞμϓςΟϒϨΠΞ΢τ 5. ֎෦σόΠε׆༻ 6. ଟݴޠαϙʔτ(ϩʔΧϥΠζ) 7. ଟݴޠαϙʔτ(RTLݴޠ) FlutterΞϓϦʹ͓͚ΔUXվળͷ࣮ྫ

Slide 8

Slide 8 text

1. ૢ࡞ੑ 2. νϡʔτϦΞϧ 3. ίʔνϚʔΫ 4. ΞμϓςΟϒϨΠΞ΢τ 5. ֎෦σόΠε׆༻ 6. ଟݴޠαϙʔτ(ϩʔΧϥΠζ) 7. ଟݴޠαϙʔτ(RTLݴޠ) FlutterΞϓϦʹ͓͚ΔUXվળͷ࣮ྫ

Slide 9

Slide 9 text

1. ૢ࡞ੑ

Slide 10

Slide 10 text

ղܾࡦ: TexSpan(&TextStyle)ͷར༻

Slide 11

Slide 11 text

2. νϡʔτϦΞϧ

Slide 12

Slide 12 text

ղܾࡦ: intro_sliderͷར༻ https://pub.dev/packages/intro_slider

Slide 13

Slide 13 text

ίʔυྫ

Slide 14

Slide 14 text

ίʔυྫ

Slide 15

Slide 15 text

Tips. ΧελϚΠζ

Slide 16

Slide 16 text

3. ίʔνϚʔΫ

Slide 17

Slide 17 text

ղܾࡦ: tutorial_coach_markͷར༻ https://pub.dev/packages/tutorial_coach_mark

Slide 18

Slide 18 text

Ϣʔεέʔε

Slide 19

Slide 19 text

ίʔυྫ

Slide 20

Slide 20 text

ίʔυྫ

Slide 21

Slide 21 text

ίʔυྫ

Slide 22

Slide 22 text

Tips. ΧελϚΠζ

Slide 23

Slide 23 text

4. ΞμϓςΟϒϨΠΞ΢τ

Slide 24

Slide 24 text

՝୊ͦͷ(1): ը໘αΠζͷࠩҟʹΑΔӨڹ

Slide 25

Slide 25 text

ղܾࡦ: MediaQuery/DiplayFeatures https://api. fl utter.dev/ fl utter/dart-ui/DisplayFeatureType.html

Slide 26

Slide 26 text

ίʔυྫ Display Type Layout

Slide 27

Slide 27 text

՝୊ͦͷ(2): ը໘ͷ޲͖ʹΑΔϨΠΞ΢τ่Ε

Slide 28

Slide 28 text

εϚϗ →Portlaitݻఆ λϒϨοτ౳ →Portlait/Landscape྆ରԠ ࠓճͷରࡦ: Ұ෦ը໘αΠζͰը໘ͷ޲͖Λݻఆ

Slide 29

Slide 29 text

ղܾࡦ: SystemChrome/setPreferredOrientations https://api. fl utter.dev/ fl utter/services/SystemChrome/setPreferredOrientations.html

Slide 30

Slide 30 text

ίʔυྫ

Slide 31

Slide 31 text

5.֎෦σόΠε׆༻

Slide 32

Slide 32 text

ղܾࡦ ɿը໘͸࢖Θͳ͍ +

Slide 33

Slide 33 text

ղܾࡦ: audio_serviceͷར༻ https://pub.dev/packages/audio_service

Slide 34

Slide 34 text

ίʔυྫ Dart code

Slide 35

Slide 35 text

ίʔυྫ AndroidManifest.xml(for Android)

Slide 36

Slide 36 text

ૺ۰ͨ͠௥Ճͷ՝୊[on Android] .&%*"@#6550/ &WFOU #MVFUPPUI 0UIFS"QQT .Z"QQ

Slide 37

Slide 37 text

ղܾࡦ: ActiveͳϝσΟΞηογϣϯͷऔಘ

Slide 38

Slide 38 text

1. ૢ࡞ੑ 2. νϡʔτϦΞϧ 3. ίʔνϚʔΫ 4. ΞμϓςΟϒϨΠΞ΢τ 5. ֎෦σόΠε׆༻ 6. ଟݴޠαϙʔτ(ϩʔΧϥΠζ) 7. ଟݴޠαϙʔτ(RTLݴޠ) FlutterΞϓϦʹ͓͚ΔUXվળͷ࣮ྫ

Slide 39

Slide 39 text

ଟݴޠαϙʔτ: ରԠޙͷը໘(׬੒൛) ӳޠ ΞϥϏΞޠ ୺຤ͷݴޠઃఆ

Slide 40

Slide 40 text

6. ଟݴޠαϙʔτ(ϩʔΧϥΠζ)

Slide 41

Slide 41 text

ଟݴޠରԠ(ඪ४ύοέʔδ fl utter_localizations) https://docs. fl utter.dev/ui/accessibility-and-internationalization/internationalization

Slide 42

Slide 42 text

ඪ४ύοέʔδҎ֎ͷΞϓϩʔν • fl utter_localizations •easy_localization • fl utter_translate •slang (fast_i18n)

Slide 43

Slide 43 text

7. ଟݴޠαϙʔτ(RTLݴޠ) ӳޠ/೔ຊޠ… ΞϥϏΞޠ…

Slide 44

Slide 44 text

ӳޠͱΞϥϏΞޠ͕ࠞࡏ͢Δγʔϯ

Slide 45

Slide 45 text

จࣈΛॻ͘ํ޲(&഑ஔ)ɿLTR&RTL

Slide 46

Slide 46 text

RTLݴޠͷجૅ(1)จࣈ https://m2.material.io/design/usability/bidirectionality.html

Slide 47

Slide 47 text

RTLݴޠͷجૅ(2)ΞΠίϯ

Slide 48

Slide 48 text

ΞΠίϯͷରࡦྫ Image.asset( 'assets/images/chara.png', matchTextDirection: true, ), on LTR on RTL

Slide 49

Slide 49 text

ϨΠΞ΢τͷରࡦྫ Row( children: [ BlueArea(), GreyArea(), ], ), on LTR on RTL

Slide 50

Slide 50 text

άϩʔόϧରԠͷଓ͖͸ͪ͜Β Go Global with Flutter Apps@ABC 2023 Autumn https://abc.android-group.jp/abc2023a/

Slide 51

Slide 51 text

Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose ੜ੒AIΛ׆༻ͨ͠FlutterΞϓϦ։ൃೖ໳

Slide 52

Slide 52 text

ΞϓϦ։ൃʹ͓͚Δੜ੒AI׆༻(ྫ) ίʔυͷੜ੒ ϦϑΝΫλϦϯά ˍϞμφΠζ ςετέʔεͷੜ੒ ίʔυͷϨϏϡʔ σόοά ύϑΥʔϚϯεվળ

Slide 53

Slide 53 text

ΞϓϦ։ൃʹ͓͚Δੜ੒AI׆༻(ྫ) ίʔυͷੜ੒ ϦϑΝΫλϦϯά ˍϞμφΠζ ςετέʔεͷੜ੒ ίʔυͷϨϏϡʔ σόοά ύϑΥʔϚϯεվળ

Slide 54

Slide 54 text

FlutterΞϓϦ։ൃͷ͸͡Ίํ for Beginner •Flutter(+Dart)ͷجૅ •։ൃɾ࣮ߦ؀ڥߏங •؆୯ͳΞϓϦ։ൃ

Slide 55

Slide 55 text

FlutterΞϓϦ։ൃͷ͸͡Ίํ for Beginner •Flutter(+Dart)ͷجૅ •։ൃɾ࣮ߦ؀ڥߏங •؆୯ͳΞϓϦ։ൃ

Slide 56

Slide 56 text

ࠓճ։ൃ͢ΔFlutterΞϓϦ

Slide 57

Slide 57 text

• DartPad • ੜ੒AI ։ൃɾ࣮ߦ؀ڥߏங

Slide 58

Slide 58 text

DartPad Webϒϥ΢β্ͰίʔυΛॻ͘ˠಈ࡞֬ೝ https://dartpad.dev

Slide 59

Slide 59 text

Dart͚ͩͰͳ͘Flutterʹ΋ରԠ DartPad ˞ ※ར༻Մೳͳύοέʔδ͕ݶΒΕ͍ͯΔͳͲͷ੍໿͋Γ

Slide 60

Slide 60 text

ੜ੒AI ࠓճ͸ίʔυͷࣗಈੜ੒ɾิॿʹ׆༻ $IBU(15 (FNJOJ $MBVEF ※ຊࢿྉ͸ChatGPT 4o/Gemini 1.5 Pro/Claude 3.5 SonnetΛར༻ͨ݁͠ՌΛݩʹ࡞੒

Slide 61

Slide 61 text

ੜ੒AIΛ׆༻ͨ͠FlutterΞϓϦ։ൃͷྲྀΕ 4UFQϕʔεͱͳΔίʔυͷੜ੒ 4UFQΞϓϦͷվ଄ 4UFQಉ༷ʹ4UFQCZ4UFQͰ ͋͘·Ͱ1ͭͷྫ

Slide 62

Slide 62 text

Step1. ϕʔεͱͳΔίʔυͷੜ੒ $IBU(15

Slide 63

Slide 63 text

Step1. ϕʔεͱͳΔίʔυͷੜ੒

Slide 64

Slide 64 text

$IBU(15 (FNJOJ $MBVEF ˞ ※ݕূ࣌ͷڍಈͱͯ͠͸ɺmainؔ਺ؚ͕·Εͳ͍ίʔυ͕ੜ੒͞ΕͨɻͦͷͨΊ௥ՃࢦࣔΛ࣮ࢪ Step1. ϕʔεͱͳΔίʔυͷੜ੒

Slide 65

Slide 65 text

Step2. ΞϓϦͷվ଄ ҰԠͰ͖͚ͨͲɺΧελϚΠζ ͍ͨ͠… •࣌ܭͷഎܠ৭Λม͍͑ͨ •࣌ܭ͕খ͍͞ •จࣈ൫Λ௥Ճ͍ͨ͠ ΄͔ʹ΋…

Slide 66

Slide 66 text

Step2. ΞϓϦͷվ଄: ࣌ܭͷഎܠ৭Λม͍͑ͨ

Slide 67

Slide 67 text

Step2. ΞϓϦͷվ଄: ࣌ܭ͕খ͍͞

Slide 68

Slide 68 text

Step2. ΞϓϦͷվ଄: ࣌ܭ͕খ͍͞

Slide 69

Slide 69 text

Step2. ΞϓϦͷվ଄: ࣌ܭ͕খ͍͞(ଓ͖)

Slide 70

Slide 70 text

Step3. ಉ༷ʹStep by StepͰ ௥ՃͰ࣮ݱͨ͠಺༰ •ඵ਑ͷ৭ͷมߋ •਺ࣈͷ௥Ճ(1-12) •12࣌ʹϚʔΫ௥Ճ

Slide 71

Slide 71 text

Wear OS ΞϓϦ։ൃೖ໳ with Jetpack Compose ੜ੒AIΛ׆༻ͨ͠FlutterΞϓϦ։ൃߴ଎Խ(ྫ)

Slide 72

Slide 72 text

Ԡ༻ฤɿੜ੒AIΛ׆༻ͨ͠ଟݴޠରԠ ೔ຊޠ ӳޠ ΞϥϏΞޠ

Slide 73

Slide 73 text

ݴޠϦιʔεͷྫ // ӳޠϦιʔε "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(Ի੠)”, …

Slide 74

Slide 74 text

ݴޠϦιʔεͷ४උ with ChatGPT

Slide 75

Slide 75 text

ࣗ਎ͷؾ͖ͮ(ੜ੒AIͱͷ෇͖߹͍ํ) ຊ౰ͷΑ͏ͳӕΛͭ͘͜ͱ͸͋Δ΋ͷͷ ಓ۩ͱͯ͠༏लͳนଧͪ૬खʹ💪 •۩ମతͳࢦ͕ࣔϕλʔʢϢʔεέʔε࣍ୈʣ •ࠩ෼ͷΈੜ੒Ͱ࣌ؒઅ໿ •ਖ਼ղͱ͸ݶΒͳ͍(ਅͷٕज़ྗͷॏཁੑʂʂʂ)

Slide 76

Slide 76 text

UXվળͰ͞Βʹ৺஍Α͍ΞϓϦΛ🙌 ಓ۩ͱͯ͠ੜ੒AI׆༻ͰΞϓϦ։ൃ΋ߴ଎Խ🚀 ·ͱΊ

Slide 77

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