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

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

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

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

53850955f15249a1a9dc49df6113e400?s=128

LINE Developers
PRO

September 25, 2019
Tweet

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ύλʔϯ

  27. None
  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ϊϕϧ౳ʳ