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

by LINE Developers

Slide 1

Slide 1 text

ελʔτμογϡ Flu%er iOS/Android Developers Night with HAKATA.swi: 2019.9.25 LINEגࣜձࣾ ງޱ௚ਓ

Slide 2

Slide 2 text

Flu$er • Made by Google • Mul.Pla0orm • Android • iOS • Web • Desktop • Dart

Slide 3

Slide 3 text

Showcase (in Japan) • youbride (Diverse, Inc.) • Flu7er Meetup Tokyo #10Ͱྺ࢙͋ΔϓϩμΫτʹFlu7er͕࠾༻͞Ε͓ͨ࿩Λ͠ ·ͨ͠ • CARTUNE (Michael Inc.) • Android / iOS ΞϓϦͷ։ൃʹΫϩεϓϥοτϑΥʔϜͷ Flu7er Λ࣮ઓ౤ೖ͠ ͨ • (Ծ)LIVE Commerce (LINE CorporaNon) • தن໛ϓϩμΫτʹFlu7erΛ࠾༻͢Δ

Slide 4

Slide 4 text

Get Started!

Slide 5

Slide 5 text

ެࣜυΩϡϝϯτ͕Θ͔Γ΍͍͢ • Get Started 1~4͸MUST • 1. Install • 2. Set up an editor • 3. Test drive • 4. Write your ﬁrst Flu@er app, part 1 • 5. Learn more

Slide 6

Slide 6 text

IDE? • Android Studio • Visual Studio Code

Slide 7

Slide 7 text

؀ڥߏங • ﬂu$er.dev > Docs > Get Started • ·ͣ͸ࣗ෼ͷಘҙͳPla6ormͰಈ࡞֬ೝ͢Δͷ͕͓͢͢Ί • ಈ͔ͳ͍࣌͸ flutter doctor

Slide 8

Slide 8 text

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΁

Slide 9

Slide 9 text

Flu$er ։ൃͷ؊ • Widget • State

Slide 10

Slide 10 text

Flu$er ։ൃͷ؊ • Widget • State

Slide 11

Slide 11 text

Widget? • Flu%erͰ͸Widgetͷ૊Έ߹ΘͤͰը໘ Λߏ੒͍ͯ͘͠ • Widget͸treeߏ଄ • Inspira2on from React. • Introduc2on to widgets

Slide 12

Slide 12 text

Widget?

Slide 13

Slide 13 text

All Widgets!

Slide 14

Slide 14 text

Widget • UI • Text

Slide 15

Slide 15 text

Widget • UI • Text • Image

Slide 16

Slide 16 text

Widget • UI • Text • Image • RaisedBu1on • …

Slide 17

Slide 17 text

Widget • Layout • SizedBox

Slide 18

Slide 18 text

Widget • Layout • SizedBox • Row

Slide 19

Slide 19 text

Widget • Layout • SizedBox • Row • Center • …

Slide 20

Slide 20 text

Many widgets! • Learn • Widget catalog

Slide 21

Slide 21 text

Flu$er ։ൃͷ؊ • Widget • State

Slide 22

Slide 22 text

State? • Flu%er͸StateͷมߋΛ఻ൖͯ͠UIΛ࠶ߏஙͯ͠ը໘Λߏ੒͢Δ • StatelessWidget • StatefulWidget

Slide 23

Slide 23 text

StatefulWidget • StateΛ࣋ͭ • setState()ϝιουΛ࣋ͭ • ݺͼग़͢͜ͱͰStateΛݩʹWidgetΛrebuildͰ͖Δ

Slide 24

Slide 24 text

StatefulWidget

Slide 25

Slide 25 text

State management • setStateΛͦͷ··࢖͍ͬͯ͘ελΠϧ͸State΍UI͕ෳࡶԽ͢ Δͱ৭ʑͳ೉͕͠͞ൃੜͨ͠ • ͞·͟·ͳStateΛѻ͏ͨΊͷΞʔΩςΫνϟ͕ߟҊ͞Εͨ • State management - Document • Pragma4c State Management in Flu9er (Google I/O'19) - Youtube

Slide 26

Slide 26 text

LIVE CommerceͰͷState؅ཧ • Providerύοέʔδ • BLoCύλʔϯ

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

ͦͷଞͷProviderͷ࢖͍ํ • Simple app state management • ProviderύοέʔδͷChangeNotifierͷ࢖͍ํ͕·ͱ·ͬͯ ͍Δ

Slide 29

Slide 29 text

Na#veͱͷ࿈ܞ • Method Channel • Event Channel • Pla0orm View

Slide 30

Slide 30 text

LIVE CommerceͰ͸ • Video Player • Pla-orm View • Method Channel • Event Channel • ࡉ͔͍ΧελϚΠζ͕ඞཁʹͳΔͷͰNa8veͰ࣮૷͓ͯ͘͠

Slide 31

Slide 31 text

CI services • Bitrise • Codemagic

Slide 32

Slide 32 text

LIVE CommerceͰ͸ • Jenkins • h)ps:/ /ﬂu)er.dev/docs/deployment/cd

Slide 33

Slide 33 text

͋Γ͕ͱ͏͍͟͝·ͨ͠ • ࠾༻৘ใͰ͢ ! • ΫϥΠΞϯτ։ൃΤϯδχΞʢiOS/AndroidʣʲLINE LIVEɺ LINEϚϯΨɺLINEϊϕϧ౳ʳ