Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
[ABC2024Summer]Flutter UX Improvements + α
Search
Kenichi Kambara
June 29, 2024
Technology
0
540
[ABC2024Summer]Flutter UX Improvements + α
ABC 2024 Summerの講演資料"Flutter UX Improvements + α"です。
#abc2024s #日本Androidの会 #flutterjp #flutter
Kenichi Kambara
June 29, 2024
Tweet
Share
More Decks by Kenichi Kambara
See All by Kenichi Kambara
[ABC2025Spring]Code Less, Build More: A Practical Guide to Mobile Apps with Generative AI
korodroid
0
180
[DevTalksRomania]Building Augmented Reality Experiences with Flutter and AI-Powered Development
korodroid
0
11
[FlutterNinjas]Adapting Flutter App UX for Users Across the World
korodroid
0
37
[FlutterTokyo#6]Navigating Flutter Upgrades
korodroid
0
63
[DevFestTokyo]Accelerating Flutter App Development Using Generative AI
korodroid
2
870
[DevFestMilano]Enhancing Flutter Apps UX for Global Users
korodroid
0
44
[mobile #15]UX Improvements on Flutter Apps Part 5
korodroid
0
59
[YUMEMI.grow Mobile #14]Wear OS Recap from I/O 2024 [short version]
korodroid
0
66
[mobile #14]UX Improvements on Flutter Apps Part 4
korodroid
0
72
Other Decks in Technology
See All in Technology
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
0
380
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
150
(HackFes)米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
5
450
RapidPen: AIエージェントによる高度なペネトレーションテスト自動化の研究開発
laysakura
1
210
Amazon SNSサブスクリプションの誤解除を防ぐ
y_sakata
3
190
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
200
エンジニアリングマネージャー“お悩み相談”パネルセッション
ar_tama
1
110
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
2
330
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
fillznoh
0
130
スタックチャン家庭用アシスタントへの道
kanekoh
0
130
Data Engineering Study#30 LT資料
tetsuroito
1
320
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
5
3.1k
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
Fireside Chat
paigeccino
37
3.5k
Automating Front-end Workflow
addyosmani
1370
200k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
How to Ace a Technical Interview
jacobian
278
23k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
KATA
mclloyd
30
14k
Docker and Python
trallard
45
3.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Done Done
chrislema
184
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Transcript
2024.06.29 ਆݪ ݈Ұ (@korodroid) ABC 2024 Summer Flutter UX Improvements
+ α
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
Agenda •FlutterΞϓϦʹ͓͚ΔUXվળࣄྫ •ੜAIΛ׆༻ͨ͠FlutterΞϓϦ։ൃೖ
FlutterΞϓϦʹ͓͚ΔUXվળࣄྫ
Sekaiphone Pro(Flutter/Kotlin/Swift) About my Flutter product (Private works)
ߨԋςʔϚͷഎܠ 47 Countries
1. ૢ࡞ੑ 2. νϡʔτϦΞϧ 3. ίʔνϚʔΫ 4. ΞμϓςΟϒϨΠΞτ 5.
֎෦σόΠε׆༻ 6. ଟݴޠαϙʔτ(ϩʔΧϥΠζ) 7. ଟݴޠαϙʔτ(RTLݴޠ) FlutterΞϓϦʹ͓͚ΔUXվળͷ࣮ྫ
1. ૢ࡞ੑ 2. νϡʔτϦΞϧ 3. ίʔνϚʔΫ 4. ΞμϓςΟϒϨΠΞτ 5.
֎෦σόΠε׆༻ 6. ଟݴޠαϙʔτ(ϩʔΧϥΠζ) 7. ଟݴޠαϙʔτ(RTLݴޠ) FlutterΞϓϦʹ͓͚ΔUXվળͷ࣮ྫ
1. ૢ࡞ੑ
ղܾࡦ: TexSpan(&TextStyle)ͷར༻
2. νϡʔτϦΞϧ
ղܾࡦ: intro_sliderͷར༻ https://pub.dev/packages/intro_slider
ίʔυྫ
ίʔυྫ
Tips. ΧελϚΠζ
3. ίʔνϚʔΫ
ղܾࡦ: tutorial_coach_markͷར༻ https://pub.dev/packages/tutorial_coach_mark
Ϣʔεέʔε
ίʔυྫ
ίʔυྫ
ίʔυྫ
Tips. ΧελϚΠζ
4. ΞμϓςΟϒϨΠΞτ
՝ͦͷ(1): ը໘αΠζͷࠩҟʹΑΔӨڹ
ղܾࡦ: MediaQuery/DiplayFeatures https://api. fl utter.dev/ fl utter/dart-ui/DisplayFeatureType.html
ίʔυྫ Display Type Layout
՝ͦͷ(2): ը໘ͷ͖ʹΑΔϨΠΞτ่Ε
εϚϗ →Portlaitݻఆ λϒϨοτ →Portlait/Landscape྆ରԠ ࠓճͷରࡦ: Ұ෦ը໘αΠζͰը໘ͷ͖Λݻఆ
ղܾࡦ: SystemChrome/setPreferredOrientations https://api. fl utter.dev/ fl utter/services/SystemChrome/setPreferredOrientations.html
ίʔυྫ
5.֎෦σόΠε׆༻
ղܾࡦ ɿը໘Θͳ͍ +
ղܾࡦ: audio_serviceͷར༻ https://pub.dev/packages/audio_service
ίʔυྫ Dart code
ίʔυྫ AndroidManifest.xml(for Android)
ૺ۰ͨ͠Ճͷ՝[on Android] .&%*"@#6550/ &WFOU #MVFUPPUI <DPNBOESPJECMVFUPPUI> 0UIFS"QQT <FH:PV5VCF> .Z"QQ
ղܾࡦ: ActiveͳϝσΟΞηογϣϯͷऔಘ
1. ૢ࡞ੑ 2. νϡʔτϦΞϧ 3. ίʔνϚʔΫ 4. ΞμϓςΟϒϨΠΞτ 5.
֎෦σόΠε׆༻ 6. ଟݴޠαϙʔτ(ϩʔΧϥΠζ) 7. ଟݴޠαϙʔτ(RTLݴޠ) FlutterΞϓϦʹ͓͚ΔUXվળͷ࣮ྫ
ଟݴޠαϙʔτ: ରԠޙͷը໘(൛) ӳޠ ΞϥϏΞޠ ͷݴޠઃఆ
6. ଟݴޠαϙʔτ(ϩʔΧϥΠζ)
ଟݴޠରԠ(ඪ४ύοέʔδ fl utter_localizations) https://docs. fl utter.dev/ui/accessibility-and-internationalization/internationalization
ඪ४ύοέʔδҎ֎ͷΞϓϩʔν • fl utter_localizations •easy_localization • fl utter_translate •slang
(fast_i18n)
7. ଟݴޠαϙʔτ(RTLݴޠ) ӳޠ/ຊޠ… ΞϥϏΞޠ…
ӳޠͱΞϥϏΞޠ͕ࠞࡏ͢Δγʔϯ
จࣈΛॻ͘ํ(&ஔ)ɿLTR&RTL
RTLݴޠͷجૅ(1)จࣈ https://m2.material.io/design/usability/bidirectionality.html
RTLݴޠͷجૅ(2)ΞΠίϯ
ΞΠίϯͷରࡦྫ Image.asset( 'assets/images/chara.png', matchTextDirection: true, ), on LTR on
RTL
ϨΠΞτͷରࡦྫ Row( children: [ BlueArea(), GreyArea(), ], ), on
LTR on RTL
άϩʔόϧରԠͷଓ͖ͪ͜Β Go Global with Flutter Apps@ABC 2023 Autumn https://abc.android-group.jp/abc2023a/
Wear OS ΞϓϦ։ൃೖ with Jetpack Compose ੜAIΛ׆༻ͨ͠FlutterΞϓϦ։ൃೖ
ΞϓϦ։ൃʹ͓͚ΔੜAI׆༻(ྫ) ίʔυͷੜ ϦϑΝΫλϦϯά ˍϞμφΠζ ςετέʔεͷੜ ίʔυͷϨϏϡʔ σόοά ύϑΥʔϚϯεվળ
ΞϓϦ։ൃʹ͓͚ΔੜAI׆༻(ྫ) ίʔυͷੜ ϦϑΝΫλϦϯά ˍϞμφΠζ ςετέʔεͷੜ ίʔυͷϨϏϡʔ σόοά ύϑΥʔϚϯεվળ
FlutterΞϓϦ։ൃͷ͡Ίํ for Beginner •Flutter(+Dart)ͷجૅ •։ൃɾ࣮ߦڥߏங •؆୯ͳΞϓϦ։ൃ
FlutterΞϓϦ։ൃͷ͡Ίํ for Beginner •Flutter(+Dart)ͷجૅ •։ൃɾ࣮ߦڥߏங •؆୯ͳΞϓϦ։ൃ
ࠓճ։ൃ͢ΔFlutterΞϓϦ
• DartPad • ੜAI ։ൃɾ࣮ߦڥߏங
DartPad Webϒϥβ্ͰίʔυΛॻ͘ˠಈ࡞֬ೝ https://dartpad.dev
Dart͚ͩͰͳ͘FlutterʹରԠ DartPad ˞ ※ར༻Մೳͳύοέʔδ͕ݶΒΕ͍ͯΔͳͲͷ੍͋Γ
ੜAI ࠓճίʔυͷࣗಈੜɾิॿʹ׆༻ $IBU(15 (FNJOJ $MBVEF ※ຊࢿྉChatGPT 4o/Gemini 1.5 Pro/Claude 3.5
SonnetΛར༻ͨ݁͠ՌΛݩʹ࡞
ੜAIΛ׆༻ͨ͠FlutterΞϓϦ։ൃͷྲྀΕ 4UFQϕʔεͱͳΔίʔυͷੜ 4UFQΞϓϦͷվ 4UFQಉ༷ʹ4UFQCZ4UFQͰ ͋͘·Ͱ1ͭͷྫ
Step1. ϕʔεͱͳΔίʔυͷੜ $IBU(15
Step1. ϕʔεͱͳΔίʔυͷੜ
$IBU(15 (FNJOJ $MBVEF ˞ ※ݕূ࣌ͷڍಈͱͯ͠ɺmainؚ͕ؔ·Εͳ͍ίʔυ͕ੜ͞ΕͨɻͦͷͨΊՃࢦࣔΛ࣮ࢪ Step1. ϕʔεͱͳΔίʔυͷੜ
Step2. ΞϓϦͷվ ҰԠͰ͖͚ͨͲɺΧελϚΠζ ͍ͨ͠… •࣌ܭͷഎܠ৭Λม͍͑ͨ •࣌ܭ͕খ͍͞ •จࣈ൫ΛՃ͍ͨ͠ ΄͔ʹ…
Step2. ΞϓϦͷվ: ࣌ܭͷഎܠ৭Λม͍͑ͨ
Step2. ΞϓϦͷվ: ࣌ܭ͕খ͍͞
Step2. ΞϓϦͷվ: ࣌ܭ͕খ͍͞
Step2. ΞϓϦͷվ: ࣌ܭ͕খ͍͞(ଓ͖)
Step3. ಉ༷ʹStep by StepͰ ՃͰ࣮ݱͨ͠༰ •ඵͷ৭ͷมߋ •ࣈͷՃ(1-12) •12࣌ʹϚʔΫՃ
Wear OS ΞϓϦ։ൃೖ with Jetpack Compose ੜAIΛ׆༻ͨ͠FlutterΞϓϦ։ൃߴԽ(ྫ)
Ԡ༻ฤɿੜAIΛ׆༻ͨ͠ଟݴޠରԠ ຊޠ ӳޠ ΞϥϏΞޠ
ݴޠϦιʔεͷྫ // ӳޠϦιʔε "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(Ի)”, …
ݴޠϦιʔεͷ४උ with ChatGPT
ࣗͷؾ͖ͮ(ੜAIͱͷ͖߹͍ํ) ຊͷΑ͏ͳӕΛͭ͘͜ͱ͋Δͷͷ ಓ۩ͱͯ͠༏लͳนଧͪ૬खʹ💪 •۩ମతͳࢦ͕ࣔϕλʔʢϢʔεέʔε࣍ୈʣ •ࠩͷΈੜͰ࣌ؒઅ •ਖ਼ղͱݶΒͳ͍(ਅͷٕज़ྗͷॏཁੑʂʂʂ)
UXվળͰ͞Βʹ৺Α͍ΞϓϦΛ🙌 ಓ۩ͱͯ͠ੜAI׆༻ͰΞϓϦ։ൃߴԽ🚀 ·ͱΊ
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