スタートダッシュFlutter / Start Dash Flutter

2019/9/25にFukuoka Growth Nextで開催されたiOS/Android Developers Night with HAKATA.swiftでの登壇資料です。
https://line.connpass.com/event/145036/

Transcript

1. ελʔτμογϡ Flu%er iOS/Android Developers Night with HAKATA.swi: 2019.9.25 LINEגࣜձࣾ ງޱ௚ਓ
2. Flu$er • Made by Google • Mul.Pla0orm • Android • iOS • Web • Desktop • Dart
3. Showcase (in Japan) • youbride (Diverse, Inc.) • Flu7er Meetup Tokyo #10Ͱྺ࢙͋ΔϓϩμΫτʹFlu7er͕࠾༻͞Ε͓ͨ࿩Λ͠ ·ͨ͠ • CARTUNE (Michael Inc.) • Android / iOS ΞϓϦͷ։ൃʹΫϩεϓϥοτϑΥʔϜͷ Flu7er Λ࣮ઓ౤ೖ͠ ͨ • (Ծ)LIVE Commerce (LINE CorporaNon) • தن໛ϓϩμΫτʹFlu7erΛ࠾༻͢Δ
4. Get Started!
5. ެࣜυΩϡϝϯτ͕Θ͔Γ΍͍͢ • Get Started 1~4͸MUST • 1. Install • 2. Set up an editor • 3. Test drive • 4. Write your first Flu@er app, part 1 • 5. Learn more
6. IDE? • Android Studio • Visual Studio Code
7. ؀ڥߏங • flu$er.dev > Docs > Get Started • ·ͣ͸ࣗ෼ͷಘҙͳPla6ormͰಈ࡞֬ೝ͢Δͷ͕͓͢͢Ί • ಈ͔ͳ͍࣌͸ flutter doctor
8. First step • Codelabs • Write Your First Flu2er App, part 1 • Write Your First Flu2er App, part 2 • Building Beau;ful UIs with Flu2er ͜͜·Ͱ΍Δͱ͍͍ͩͨFlu$erͰͷΞϓϦ։ൃ͕Θ͔ͬͯ͘Δͷ Ͱ࣍ͷStep΁
9. Flu$er ։ൃͷ؊ • Widget • State
10. Flu$er ։ൃͷ؊ • Widget • State
11. Widget? • Flu%erͰ͸Widgetͷ૊Έ߹ΘͤͰը໘ Λߏ੒͍ͯ͘͠ • Widget͸treeߏ଄ • Inspira2on from React. • Introduc2on to widgets
12. Widget?
13. All Widgets!
14. Widget • UI • Text
15. Widget • UI • Text • Image
16. Widget • UI • Text • Image • RaisedBu1on • …
17. Widget • Layout • SizedBox
18. Widget • Layout • SizedBox • Row
19. Widget • Layout • SizedBox • Row • Center • …
20. Many widgets! • Learn • Widget catalog
21. Flu$er ։ൃͷ؊ • Widget • State
22. State? • Flu%er͸StateͷมߋΛ఻ൖͯ͠UIΛ࠶ߏஙͯ͠ը໘Λߏ੒͢Δ • StatelessWidget • StatefulWidget
23. StatefulWidget • StateΛ࣋ͭ • setState()ϝιουΛ࣋ͭ • ݺͼग़͢͜ͱͰStateΛݩʹWidgetΛrebuildͰ͖Δ
24. StatefulWidget
25. State management • setStateΛͦͷ··࢖͍ͬͯ͘ελΠϧ͸State΍UI͕ෳࡶԽ͢ Δͱ৭ʑͳ೉͕͠͞ൃੜͨ͠ • ͞·͟·ͳStateΛѻ͏ͨΊͷΞʔΩςΫνϟ͕ߟҊ͞Εͨ • State management - Document • Pragma4c State Management in Flu9er (Google I/O'19) - Youtube
26. LIVE CommerceͰͷState؅ཧ • Providerύοέʔδ • BLoCύλʔϯ
28. ͦͷଞͷProviderͷ࢖͍ํ • Simple app state management • ProviderύοέʔδͷChangeNotifierͷ࢖͍ํ͕·ͱ·ͬͯ ͍Δ
29. Na#veͱͷ࿈ܞ • Method Channel • Event Channel • Pla0orm View
30. LIVE CommerceͰ͸ • Video Player • Pla-orm View • Method Channel • Event Channel • ࡉ͔͍ΧελϚΠζ͕ඞཁʹͳΔͷͰNa8veͰ࣮૷͓ͯ͘͠
31. CI services • Bitrise • Codemagic
32. LIVE CommerceͰ͸ • Jenkins • h)ps:/ /flu)er.dev/docs/deployment/cd
33. ͋Γ͕ͱ͏͍͟͝·ͨ͠ • ࠾༻৘ใͰ͢ ! • ΫϥΠΞϯτ։ൃΤϯδχΞʢiOS/AndroidʣʲLINE LIVEɺ LINEϚϯΨɺLINEϊϕϧ౳ʳ