Flutter研修【MIXI 23新卒技術研修】

23新卒技術研修で実施したFlutter研修の講義資料です。

動画：https://youtu.be/9IqUQ2TXacI

ハンズオン用リポジトリ：https://github.com/mixigroup/2023BeginnerTrainingFlutter

資料の利用について
公開している資料は勉強会や企業の研修などで自由にご利用頂いて大丈夫ですが、以下の形での利用だけご遠慮ください。
・受講者から参加費や授業料などを集める形での利用（会場費や飲食費など勉強会運営に必要な実費を集めるのは問題ありません）
・出典を削除または改変しての利用

Transcript

1. 'MVUUFS৽ଔݚम
   
   ,VOP"ZBOB
   

   View Slide

2. ߨࢣɾνϡʔλʔ
   ٱ໺จࡊ
   !BZBOBLVOP
   ৽ଔ
   NJBUUPNFSDVSZ
   ࣾ৯͸ΩʔϚΧϨʔਪ͠
   পా޾େ
   !ZVLJIJSPOVNBUB
   ೥த్ೖࣾ
   'BOTUB
   ࣾ৯͸େମ͍ͭ΋=d
   

   View Slide

3. ࣄલ४උ͸0,ʁ
   J04ಈ͔͍ͨ͠ਓɹ
   "OESPJEಈ͔͍ͨ͠ਓɹ
   w 9DPEFͷΠϯετʔϧ͓Αͼղౚ
   w Πϯετʔϧ͸"QQ4UPSFͰ͸ͳ͘EFWFMPQFSαΠτ͔Βམͱͯ͘͠Δ͜ͱΛ͓קΊ
   w IUUQTEFWFMPQFSBQQMFDPNEPXOMPBENPSF
   w ࣄલʹ"QQMF*%͕ඞཁ
   w ձࣾͷϝʔϧΞυϨεͰΞΧ΢ϯτΛ࡞੒
   w "OESPJE4UVEJPͷΠϯετʔϧ͓Αͼղౚ
   w Ұ୴ىಈ͠ͳ͍ͱ
   fl
   VUUFSEPDUPSͨ͠ͱ͖ʹ6OBCMFUPMPDBUF"OESPJE4%,ͷΤϥʔʹͳΔ
   

   View Slide

4. ຊ೔ͷ͓඼ॻ͖
   ʙ'MVUUFSͱ͸
   ʙ
   fl
   VUUFSDSFBUFίϚϯυͰΞϓϦΛ࡞ͬͯΈΑ͏ʂ
   ʙٳܜ
   ʙDSFBUF͞ΕͨΞϓϦΛݟ͍ͯ͜͏ʂ
   *OUSPEVDUJPO
   4UBUF
   5FYU'JFME
   ը໘ભҠʢ/BWJHBUPSʣ
   ʙϥϯν
   ʙωοτϫʔΫ௨৴ʢIUUQ௨৴ʣ
   ʙνʔϜͰνϟϨϯδʂ
   

   ɹɹɹɹ$IBU(15ͱͷνϟοτΞϓϦΛ࡞ͬͯΈΑ͏ʂ
   ʙΫϩʔδϯά
   

   View Slide

5. ݚमͷΰʔϧ
   

   View Slide

6. ݚमͷΰʔϧ
   ΞϓϦ։ൃॳΊͯͷਓ
   'MVUUFSָ͍ͬͯ͠ʙʂͷؾ࣋ͪΛ࣋ͪؼͬͯʂ
   'MVUUFSνϣοτσΩΔਓ
   ਓʹڭ͑Δ͜ͱͰཧղ౓Λ্͛Α͏ʂ
   Ԡ༻໰୊·ͰؤுΕʂ
   

   View Slide

7. 'MVUUFSͱ͸
   

   View Slide

8. 'MVUUFSͱ͸
   w ϚϧνϓϥοτϑΥʔϜ։ൃ͕ՄೳͳϑϨʔϜϫʔΫ
   w ̓ͭͷϓϥοτϑΥʔϜ্Ͱಈ͘ΞϓϦΛ࡞ΕΔʂ
   w ੈքʹ͸ສਓҎ্ͷ։ൃऀͱສҎ্ͷΞϓϦ͕͋Δ
   w (JU)VCͷίϯτϦϏϡʔλʔ਺͸74$PEF IPNFBTTJTUBOUʹ͍࣍ͰҐʂ
   w %Ϟσϧͷදࣔ΋Ͱ͖ΔΑ͏ʹʂ
   'MVUUFS'PSXBSEIUUQTXXXZPVUVCFDPNXBUDI W[,2:(,"F8
   %ϞσϧදࣔΛࢼͯ͠ΈΔIUUQTJUPNFUFBNCMPH
   fl
   VUUUFSTDFOFNFNP
   

   View Slide

9. 'MVUUFSͱ͸
   w (PPHMF͕ຊؾΛग़ͯ͠࡞ͬͯΔ
   w (PPHMFͷΞϓϦʢ(PPHMF"ET΍(PPHMF"TTJTUBOUͳͲʣͰ΋ར༻͞ΕͯΔ
   w ϚςϦΞϧσβΠϯͷίϯϙʔωϯτΛ"OESPJEΑΓઌʹ࣮૷ͯͨ͠Γ͢Δ
   w ίϯϙʔωϯτΛඪ४Ͱ༻ҙͯ͘͠ΕͯΔ͔Βॳ৺ऀͰ΋ྑ͍ײ͡ʹ࡞ΕΔʂ
   ίϯϙʔωϯτҰཡIUUQTNBUFSJBMJPDPNQPOFOUT
   

   View Slide

10. w %BSUͱ͍͏ݴޠͰ࣮૷͢Δ
    w (PPHMF͕+BWB4DSJQUͷ໰୊఺Λվળͨ͠୅ସݴޠͱͯ͠೥ʹ։ൃ͞Εͨ΋ͷ
    w %BSUͰ/VMM4BGFUZʹͳͬͨʢผϖʔδͰઆ໌ʣ
    w ϨϯμϦϯάΤϯδϯ΋4LJBΛ࢖ͬͯࣗલͰ࡞ΒΕ͍ͯΔͷͰ଎͍ʂ
    w 'MVUUFS'PSXBSEͰ৽ϨϯμϦϯάΤϯδϯͷ*NQFMMFS͕ެ։͞Εͨ
    w એݴత6*Ͱॻ͘͜ͱ͕ՄೳʢผϖʔδͰઆ໌ʣ
    w 4UPSZCPBSEΛ࢖ͬͨ4XJGUͷίʔυΑΓ3FBDUͷํ͕ࣅͯΔ͔΋
    'MVUUFSͱ͸
    'MVUUFSͷΞʔΩςΫνϟIUUQTEPDT
    fl
    VUUFSEFWSFTPVSDFTBSDIJUFDUVSBMPWFSWJFX
    *NQFMMFSʹ͍ͭͯIUUQTEPDT
    fl
    VUUFSEFWQFSGJNQFMMFS
    EBTI܅ʹ͍ͭͯIUUQTEPDT
    fl
    VUUFSEFWEBTI
    

    View Slide

11. /VMM4BGFUZͬͯʁ
    ͲͷܕͰ΋OVMMΛ࢖ͬͯྑ͍
    C͸OVMM΍ͳ͍͔ʙʂ
    ࣮ߦ࣌ʹOVMMͩͬͨ৔߹
    ΤϥʔΛు͘ɾΞϓϦ͕མͪΔ
    int a = 100;
    
    
    int b = null;
    
    
    a = 100;
    
    
    print(a + b);
    
    
    OVMMTBGFUZʹ͍ͭͯIUUQTEBSUEFWOVMMTBGFUZ
    

    View Slide

12. ࣮ߦ࣌ʹOVMMͷΤϥʔͰ
    མͪΔ͜ͱ͸ͳ͘ͳΔ
    /VMM4BGFUZͬͯʁ
    جຊతʹOVMM࢖ͬͪΌμϝ
    ࢖͍͍ͨ࣌͸ Λ͚ͭΔ
    int a = 100;
    
    
    int? b = null;
    
    
    a = 100;
    
    
    print(a + b); // Τϥʔ
    
    
    if (b != null) {
    
    
    print(a + b);
    
    
    }
    
    
    print(a + b!);
    C͕OVMMͷ࣌͸ආ͚
    ͯ͘ΕΔͷͰ҆৺
    OVMMTBGFUZʹ͍ͭͯIUUQTEBSUEFWOVMMTBGFUZ
    

    View Slide

13. label = UILabel()
    
    
    label.text = “Babu~”
    
    
    label.textColor = .black
    
    
    label.textAlignment = .center
    
    
    view.addSubview(label)
    Text(
    
    
    “Babu~",
    
    
    style: TextStyle(color: Colors.black),
    
    
    textAlign: TextAlign.center,
    
    
    ),
    ໋ྩతʢ4XJGUʣ
    એݴత6*ͬͯʁ
    એݴతʢ%BSUʣ
    ϥϕϧΛ࡞Εʂ
    ϥϕϧͷςΩετ͸όϒʙͰ͋Εʂ
    ৭͸ࠇͰ͋ΕʂਅΜதدͤͰ͋Εʂ
    ͦͷϥϕϧΛ7JFXʹ௥Ճͤ͑ʂ
    

    View Slide

14. label = UILabel()
    
    
    label.text = “Babu~”
    
    
    label.textColor = .black
    
    
    label.textAlignment = .center
    
    
    view.addSubview(label)
    Text(
    
    
    “Babu~",
    
    
    style: TextStyle(color: Colors.black),
    
    
    textAlign: TextAlign.center,
    
    
    ),
    ໋ྩతʢ4XJGUʣ
    એݴత6*ͬͯʁ
    એݴతʢ%BSUʣ
    զ͸όϒʙͱ͍͏ࠇ৭ͷ
    ਅΜதدͤςΩετͰ͋Δʂ
    

    View Slide

15. GMVUUFSDSFBUFίϚϯυͰ
    ΞϓϦΛ࡞ͬͯΈΑ͏ʂ
    

    View Slide

16. ΞϓϦΛ࡞ͬͯΈΑ͏
    $ flutter create <<ϓϩδΣΫτͷ໊લ>>
    
    
    $ cd <<ϓϩδΣΫτͷ໊લ>>
    
    
    $ open iOS/Runner.xcworkspace // ios ͷਓͷΈ
    
    
    $ flutter run
    "OESPJEͷਓ͸࣮ػબ୒΋͘͠͸
    "OESPJEελδΦ্ཱͪ͛ͯΤϛϡબ୒
    ϓϩδΣΫτ໊͸ΞϯμόʔͰܨ͕ͳ͍ͱ
    ʰzϓϩδΣΫτ໊zJTOPUBWBMJE%BSUQBDLBHFOBNFʱ
    ͬͯΤϥʔుౖ͍ͯΒΕΔ
    

    View Slide

17. J04೿ͷਓ
    ࣄલ४උͰ࡞ͬͨ
    ΞΧ΢ϯτʹͳ͍ͬͯΔ͔ʁ
    

    View Slide

18. J04೿ͷਓ
    ࣮ػ઀ଓͯͨ͠ΒJ04%FWJDFͷͱ͜Ζʹ
    ͜Μͳ෩ʹग़ͯ͘Δ͸ͣ
    γϛϡϨʔλಈ͔͢ਓ͸
    ޷͖ͳ΍ͭΛબΜͰͶʂ
    ࣍ճ͔Β͸ԼهίϚϯυͰ্ཱ͕ͪΔΑ
    $ open -a simulator
    

    View Slide

19. J04೿ͷਓʢ࣮ػʣ
    ઃఆҰൠ71/ͱσόΠε؅ཧ
    ͷڐՄ͕߱ΓͯΔ͔֬ೝʂ
    

    View Slide

20. "OESPJE೿ͷਓ
    "OESPJE4UVEJPΛ্ཱͪ͛ͯ
    "7%.BOBHFSΛબ୒
    ΋͘͠͸࣮ػ઀ଓͯ͠
    $ flutter run
    ޷͖ͳΤϛϡϨʔλΛ
    ▶︎
    Λԡͯ͠ىಈ
    

    View Slide

21. 8FCͰ΋ಈ͘ʂ
    $ISPNFͰ΋ಈ͚͘Ͳ
    ͔ͤͬ͘ͳΒεϚϗ͔γϛϡϨʔλͰ
    ಈ͔ͯ͠Έͯ΄͍͠ʂ
    

    View Slide

22. ಈ͍͔ͨͳʁʁʁ
    ϘλϯΛԡ͢ͱ
    ਅΜதͷ਺ࣈ͕Χ΢ϯτΞοϓ͞Ε͍ͯ͘ΞϓϦ
    

    View Slide

23. ෼ؒٳܜ
    ΋ͬͱٳܜ͔ͨͬͨ͠Βݴͬͯω
    

    View Slide

24. DSFBUF͞ΕͨΞϓϦΛ
    ݟ͍ͯ͜͏ʂ
    

    View Slide

25. ΢ΟδΣοτ
    ϖʔδશମ
    

    View Slide

26. ΢ΟδΣοτ
    ϖʔδશମ
    "QQ#BS
    

    View Slide

27. ΢ΟδΣοτ
    ϖʔδશମ
    "QQ#BS
    ςΩετ
    

    View Slide

28. ΢ΟδΣοτ
    ϖʔδશମ
    "QQ#BS
    ςΩετ
    Ϙλϯ
    

    View Slide

29. ΢ΟδΣοτ
    ϖʔδશମ
    "QQ#BS
    ςΩετ
    Ϙλϯ
    શ෦΢ΟδΣοτʂ
    ը໘͸΢ΟδΣοτͰ੒Γཱ͍ͬͯΔʂ
    

    View Slide

30. ࣮ࡍͷίʔυΛݟ͍ͯ͜͏ʂ
    w ϥΠϒίʔσΟϯά͍ͯ͘͠ͷͰҰॹʹΞϓϦΛಈ͔͍ͯ͜͠͏ʂ
    w ͨ·ʹղઆͰεϥΠυʹ໭͖ͬͯ·͢
    w 5SZ͸Ұॹʹɼ$IBMMFOHF͸ਓͰؤுͬͯΈΑ͏ʂ
    w ϦϙδτϦʹίʔυΛஔ͍ͯ͋ΔͷͰฉ͖ͦͼΕͨΒࢀߟʹͯ͠Ͷʂ
    w IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFS
    w ίϛοτϝοηʔδ΍ίʔυ಺ίϝϯτ͕આ໌ʹͳ͍ͬͯ·͢ʂ
    

    View Slide

31. 74$PEFͷਓʙʂ
    ֦ுػೳೖΕ͓ͯ͘ͱΊͪΌͪ͘ΌศརͰ͢
    ʰ
    fl
    VUUFSʱͰݕࡧͯ͠Ұ൪্ʹग़Δ΍ͭ
    

    View Slide

32. ֦ுػೳ͸͜͏࢖͏ʂ
    Կ͔Ͱғ͍͍ͨ
    ΢ΟδΣοτΛӈΫϦοΫ
    ϦϑΝΫλΛબ୒
    ғ͍͍ͨ΢ΟδΣοτΛબ୒
    σσϯʂғΘΕͨʂ
    

    View Slide

33. *OUSPEVDUJPO
    w ϥΠϒίʔσΟϯά͠·͢ʂ
    w ϓϩδΣΫτʢσΟϨΫτϦʣߏ੒ʹ͍ͭͯ
    w NBJO
    ͷྲྀΕ΍DMBTTͷઆ໌
    w .Z)PNF1BHFͷϑΝΠϧ෼͚ͯΈΔ
    w ଞͷϑΝΠϧΛࢀর͢Δͱ͖͸JNQPSU͢Δ
    w 5FYUͷத਎Λม͑ͯΈͨΓ͢Δ
    w )PU3FMPBE3FTUBSUͱ͸ʁʢผϖʔδͰઆ໌ʣ
    w .Z)PNF1BHFݟͯ͘
    w 4DB
    ff
    PMEͱ͔DPMVNOͳͲඪ४΢ΟδΣοτ͕ͨ͘͞ΜʂʢผϖʔδͰઆ໌ʣ
    w ֦ுػೳ͸͜͏࢖͏ʂʢผϖʔδͰઆ໌ʣ
    

    View Slide

34. )PUSFMPBESFTUBSUͱ͸ʁ
    )PUSFMPBE )PUSFTUBSU
    ͍͍ͪͪDUSMD͔Βͷ
    fl
    VUUFSSVO͠ͳͯ͘େৎ෉ʂʂʂʂ
    λʔϛφϧͰ3Λԡ͢
    ΄΅Ϧηοτ͞ΕΔ
    λʔϛφϧͰSΛԡ͢
    5FYU΍৭ͳͲ΢ΟδΣοτΛ
    มߋͨ͠Β൓ө͞ΕΔ
    4UBUF͸ͦͷ··
    ʢ4UBUFʹؔͯ͠͸ޙͰઆ໌ʣ
    fl
    VUUFSSVO
    ωΠςΟϒίʔυ͔Β
    ࣮ߦ͠௚͢
    ˞)PUSFMPBE͕Ͱ͖Δͷ͸σόοάϏϧυ࣌ʢ+*5ίϯύΠϧ࣌ʣͷΈ
    

    View Slide

35. ඪ४΢ΟδΣοτ
    Α͘࢖͏΢ΟδΣοτ͕
    ༻ҙ͞ΕͯΔʂ
    ඪ४΢ΟδΣοτ͕ݟΕΔIUUQTEPDT
    fl
    VUUFSEFWEFWFMPQNFOUVJXJEHFUT
    

    View Slide

36. 5SZඪ४΢ΟδΣοτΛ࢖ͬͯΈΑ͏
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    w ϥΠϒίʔσΟϯά͠·͢ʂ
    w ࢖༻૝ఆ΢ΟδΣοτ
    w 5FYU
    w $FOUFS
    w $PMVNO
    w 3PX
    w 4J[FE#PY
    w $PMPSFE#PY
    

    View Slide

37. IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    w 3PXͱ$PMVNOΛ࢖ͬͯӈͷਤܗΛඳըͯ͠ΈΑ͏ʂ
    w େ͖͞΍৭ɼ伱ؒ͸ςΩτʔͰେৎ෉Ͱ͢
    w ࣭໰େ׻ܴʂʂʂʂʂ
    w 伱ؒͷ෇͚ํ΍ฒ΂ํͳͲ
    ෼ʂ
    $IBMMFOHFਤܗΛඳըͯ͠ΈΑ͏
    

    View Slide

38. $PMVNO΍3PX͸਌ͷαΠζ·Ͱ޿͕Δੑ࣭Λ࣋ͭ
    

    View Slide

39. $PMVNO΍3PX͸਌ͷαΠζ·Ͱ޿͕Δੑ࣭Λ࣋ͭ
    $PMVNOͷαΠζ͸
    ΦϨϯδͷ࿮
    

    View Slide

40. $PMVNO΍3PX͸਌ͷαΠζ·Ͱ޿͕Δੑ࣭Λ࣋ͭ
    $PMVNOͷαΠζ͸
    ΦϨϯδͷ࿮
    3PX΋Ί͍ͬͺ͍
    ޿͕Ζ͏ͱ͢Δ
    

    View Slide

41. $PMVNO΍3PX͸਌ͷαΠζ·Ͱ޿͕Δੑ࣭Λ࣋ͭ
    mainAxisSize:MainAxisSize.min,
    
    
    Λࢦఆͯ͋͛͠Δͱ
    ࣗ਎ͷେ͖͞ʹཹ·Δʂ
    $PMVNOͷαΠζ͸
    ΦϨϯδͷ࿮
    

    View Slide

42. 5SZϦετΛදࣔͯ͠ΈΑ͏
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    w ϥΠϒίʔσΟϯά͠·͢ʂ
    w ࢖༻૝ఆ΢ΟδΣοτ
    w -JTU7JFX
    w $BSE
    w 1BEEJOH
    

    View Slide

43. IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    w ·ͣ͸ࢥ͍ͭ͘ํ๏Ͱ΍ͬͯΈͯʂ
    w ΤϥʔʹͳΔਓ͕͍ͨΒώϯτग़͠·͢ʂ
    $IBMMFOHFϦετʹλΠτϧΛ͚ͭΑ͏
    

    View Slide

44. $PMVNOͷதʹ-JTU7JFXΛೖΕΔͱ͖͸஫ҙʂ
    w -JTU7JFX΋޿͕Ζ͏ͱͯ͘͠Δੑ࣭Λ࣋ͭͷͰΤϥʔʹͳΓ·͢
    5IFGPMMPXJOH3FOEFS0CKFDUXBTCFJOHQSPDFTTFEXIFOUIFFYDFQUJPOXBT
    fi
    SFE
    3FOEFS7JFXQPSUD/&&%4-":065/&&%41"*/5/&&%4$0.104*5*/(#*5461%"5&
    OFFETDPNQPTJUJOH
    DSFBUPS7JFXQPSUˡ*HOPSF1PJOUFS<(MPCBM,FZBEC>ˡ4FNBOUJDTˡ-JTUFOFSˡ
    @(FTUVSF4FNBOUJDTˡ
    3BX(FTUVSF%FUFDUPS<-BCFMFE(MPCBM,FZ3BX(FTUVSF%FUFDUPS4UBUFD>ˡ-JTUFOFSˡ
    @4DSPMMBCMF4DPQF
    ˡ@4DSPMM4FNBOUJDT<(MPCBM,FZB>ˡ/PUJ
    fi
    DBUJPO-JTUFOFS4DSPMM.FUSJDT/PUJ
    fi
    DBUJPOˡ
    4DSPMMBCMFˡ1SJNBSZ4DSPMM$POUSPMMFSˡl
    QBSFOU%BUBOPOF DBOVTFTJ[F
    
    DPOTUSBJOUT#PY$POTUSBJOUT X I*O
    fi
    OJUZ
    
    ɽɽɽ
    

    View Slide

45. $PMVNOͷதʹ-JTU7JFXΛೖΕΔͱ͖͸஫ҙʂ
    w -JTU7JFX΋޿͕Ζ͏ͱͯ͘͠Δੑ࣭Λ࣋ͭͷͰΤϥʔʹͳΓ·͢
    5IFGPMMPXJOH3FOEFS0CKFDUXBTCFJOHQSPDFTTFEXIFOUIFFYDFQUJPOXBT
    fi
    SFE
    3FOEFS7JFXQPSUD/&&%4-":065/&&%41"*/5/&&%4$0.104*5*/(#*5461%"5&
    OFFETDPNQPTJUJOH
    DSFBUPS7JFXQPSUˡ*HOPSF1PJOUFS<(MPCBM,FZBEC>ˡ4FNBOUJDTˡ-JTUFOFSˡ
    @(FTUVSF4FNBOUJDTˡ
    3BX(FTUVSF%FUFDUPS<-BCFMFE(MPCBM,FZ3BX(FTUVSF%FUFDUPS4UBUFD>ˡ-JTUFOFSˡ
    @4DSPMMBCMF4DPQF
    ˡ@4DSPMM4FNBOUJDT<(MPCBM,FZB>ˡ/PUJ
    fi
    DBUJPO-JTUFOFS4DSPMM.FUSJDT/PUJ
    fi
    DBUJPOˡ
    4DSPMMBCMFˡ1SJNBSZ4DSPMM$POUSPMMFSˡl
    QBSFOU%BUBOPOF DBOVTFTJ[F
    
    DPOTUSBJOUT#PY$POTUSBJOUT X I*O
    fi
    OJUZ
    
    ɽɽɽ
    *O
    fi
    OJUZʂʂ
    

    View Slide

46. $PMVNOͷதʹ-JTU7JFXΛೖΕΔͱ͖͸஫ҙʂ
    w -JTU7JFX΋޿͕Ζ͏ͱͯ͘͠Δੑ࣭Λ࣋ͭͷͰΤϥʔʹͳΓ·͢
    $PMVNO
    

    View Slide

47. $PMVNOͷதʹ-JTU7JFXΛೖΕΔͱ͖͸஫ҙʂ
    w -JTU7JFX΋޿͕Ζ͏ͱͯ͘͠Δੑ࣭Λ࣋ͭͷͰΤϥʔʹͳΓ·͢
    $PMVNO
    

    View Slide

48. $PMVNOͷதʹ-JTU7JFXΛೖΕΔͱ͖͸஫ҙʂ
    w -JTU7JFX΋޿͕Ζ͏ͱͯ͘͠Δੑ࣭Λ࣋ͭͷͰΤϥʔʹͳΓ·͢
    $PMVNO
    -JTU7JFX
    

    View Slide

49. $PMVNOͷதʹ-JTU7JFXΛೖΕΔͱ͖͸஫ҙʂ
    w -JTU7JFX΋޿͕Ζ͏ͱͯ͘͠Δੑ࣭Λ࣋ͭͷͰΤϥʔʹͳΓ·͢
    $PMVNO
    -JTU7JFX
    

    View Slide

50. $PMVNOͷதʹ-JTU7JFXΛೖΕΔͱ͖͸஫ҙʂ
    w -JTU7JFX΋޿͕Ζ͏ͱͯ͘͠Δੑ࣭Λ࣋ͭͷͰΤϥʔʹͳΓ·͢
    $PMVNO
    Ͳ͜·Ͱ޿͕ΔΜʁʁʁ
    -JTU7JFX
    

    View Slide

51. $PMVNOͷதʹ-JTU7JFXΛೖΕΔͱ͖͸஫ҙʂ
    w ղܾࡦ
    ᶃ -JTU7JFXͷߴ͞Λݻఆ͢Δ
    ᶄ &YQBOEFEͱ͍͏8JEHFUΛ࢖͏
    $PMVNO
    ߴ͞QYͰʂ
    -JTU7JFX
    

    View Slide

52. $PMVNOͷதʹ-JTU7JFXΛೖΕΔͱ͖͸஫ҙʂ
    w ղܾࡦ
    ᶃ -JTU7JFXͷߴ͞Λݻఆ͢Δ
    ᶄ &YQBOEFEͱ͍͏8JEHFUΛ࢖͏
    $PMVNO
    $PMVNOͷ༨Γͷ伱ؒ
    શ෦ຒΊͨΔʂ
    -JTU7JFX
    

    View Slide

53. $PMVNOͷதʹ-JTU7JFXΛೖΕΔͱ͖͸஫ҙʂ
    w ղܾࡦ
    ᶃ -JTU7JFXͷߴ͞Λݻఆ͢Δ
    ᶄ &YQBOEFEͱ͍͏8JEHFUΛ࢖͏
    ᶅ Ϧετͷ࠷ॳͷཁૉʹλΠτϧΛ࣋ͨͤͯ͋͛Δʂ
    -JTU7JFXͷΈʹ͢Δ
    λΠτϧ
    ཁૉ
    ཁૉ
    ཁૉ
    ཁૉ
    ɾ
    ɾ
    ɾ
    

    View Slide

54. 4UBUFͱ4UBUFMFTT8JEHFU4UBUFGVM8JEHFU
    w Χ΢ϯτΞοϓͯ͠දࣔ͸Ͳ͏΍͍ͬͯΔͷͩΖ͏͔ʁ
    w ͦ΋ͦ΋4UBUFͬͯͳ͋ʹʁʢผϖʔδͰઆ໌ʣ
    w 4UBUFGVM8JEHFUͷ঺հ
    w 4UBUFΛ௥Ճͯ͠ΈΑ͏
    w ഒ͍ͯ͘͠Ϙλϯ
    w 4UBUF͸খ࣋ͭ͘͞Α͏ʹ͠Α͏ʂ
    w 4UBUFMFTT8JEHFUͷ঺հ
    

    View Slide

55. 4UBUFͬͯͳ͋ʹʁ
    w 4UBUFঢ়ଶ
    w 4UBUF͕มΘΔͱը໘ߋ৽͞ΕΔʢCVJME಺͕࠶࣮ߦ͞ΕΔʣ
    ͳΜΒ͔ͷΞΫγϣϯ
    ݁ՌΛඳը
    ݁ՌΛඳը
    

    View Slide

56. 4UBUFͬͯͳ͋ʹʁ
    w 4UBUFঢ়ଶ
    w 4UBUF͕มΘΔͱը໘ߋ৽͞ΕΔʢCVJME಺͕࠶࣮ߦ͞ΕΔʣ
    ͳΜΒ͔ͷΞΫγϣϯ
    ݁ՌΛඳը
    ݁ՌΛඳը
    6*G 4UBUF
    
    એݴత6*Λந৅Խ͢Δͱ
    ঢ়ଶΛҾ਺ͱͯ͠6*Λฦ͢
    ෭࡞༻Λ࣋ͨͳ͍ؔ਺Ͱ͋Δ
    

    View Slide

57. w 4UBUFΛ࢖͏΢ΟδΣοτΛ4UBUFGVM8JEHFUͱ͍͏
    w ٯʹ࢖Θͳ͍΢ΟδΣοτ͸4UBUFMFTT8JEHFUͱ͍͏
    4UBUFͬͯͳ͋ʹʁ
    4UBUFGVM8JEHFU
    ݁ՌΛඳը
    ݁ՌΛඳը
    

    View Slide

58. 5SZഒʹͳΔTUBUFΛ௥Ճ͠Α͏
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    w ϥΠϒίʔσΟϯά͠·͢ʂ
    w 4UBUFΛ৽ͨʹ༻ҙ͠Α͏
    w ͦͷ4UBUFΛഒ͍ͯ͘͠ϘλϯΛ௥Ճ͠Α͏
    

    View Slide

59. 5SZഒʹͳΔTUBUFΛ௥Ճ͠Α͏
    w ৽͍͠4UBUFΛఆٛ
    w ഒ͢ΔϝιουΛఆٛ
    w ഒ͢ΔϝιουΛݺͿϘλϯΛ௥Ճ
    void _twice() {
    
    
    setState(() {
    
    
    _counter2 = _counter2 * 2;
    
    
    });
    
    
    }
    FloatingActionButton(
    
    
    onPressed: () {
    
    
    _twice();
    
    
    },
    

    View Slide

60. 5SZ5FYU'JMFEΛ࢖ͬͯΈΑ͏
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    w ϥΠϒίʔσΟϯά͠·͢ʂ
    w 5FYU'JMFEΛ࢖ͬͯΈΑ͏
    w จࣈଧͭͨͼʹԼʹςΩετදࣔͤ͞Δʹ͸ʁ
    w 4UBUFʹ͠ͳ͖Ό͍͚ͳ͍Ͷʂ
    

    View Slide

61. $IBMMFOHFจࣈදࣔϘλϯΛ࡞Ζ͏
    w ͖ͬ͞͸จࣈΛଧͭͨͼදࣔͩͬͨ
    w ϘλϯΛԡͨ͠Βจࣈ͕දࣔ͞ΕΔΑ͏ʹͯ͠ΈΑ͏ʂ
    ౴͑
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    ෼ʂ
    

    View Slide

62. $IBMMFOHFจࣈදࣔϘλϯΛ࡞Ζ͏
    w TFU4UBUFͷλΠϛϯά͕ॏཁ
    w 5FYU'JMFEͷPO$IBOHFEͰ͸TFU4UBUF͠ͳ͍Α͏ʹ
    w ࠶ඳը͞Εͯ͠·͏ͨΊ
    w Ϙλϯԡͨ࣌͠ʹTFU4UBUF͢ΔΑ͏ʹʂ
    TextField(
    
    
    onChanged: ((value) {
    
    
    tmpText = value;
    
    
    }),
    IconButton(
    
    
    onPressed: () {
    
    
    setState(() {
    
    
    showText = tmpText;
    
    
    });
    
    
    },
    

    View Slide

63. ϥϯν
    

    View Slide

64. 5SZը໘ભҠͯ͠ΈΑ͏
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    w /BWJHBUPSͷ΍ΓํͰ͢
    w ϥΠϒίʔσΟϯά͠·͢ʂ
    w 'JSTU1BHFͱ4FDPOE1BHFΛ࡞੒
    w 4DB
    ff
    PMEͳ͍ͱ౔୆͕ͳ͍͔ΒมͳදࣔʹͳͬͪΌ͏Αʙ
    w QVTIͷઆ໌ʢผϖʔδͰઆ໌ʣ
    w ͋Β͔͡Ί3PVUFొ࿥͓ͯ͘͠ͱศརͩΑʙ
    w QPQͷઆ໌ʢผϖʔδͰઆ໌ʣ
    

    View Slide

65. ը໘ભҠ
    "
    .BUFSJBM"QQ͕͍࣋ͬͯΔ/BWJHBUPSΛ࢖ͬͯը໘ભҠ͢Δ
    "
    #
    .BUFSJBM1BHF3PVUF
    Navigator.push(
    
    
    context,
    
    
    MaterialPageRoute(
    
    
    builder: (BuildContext context) => B(),
    
    
    ),
    
    
    );
    Navigator.pop(conte
    

    View Slide

66. ը໘ભҠ
    "
    .BUFSJBM"QQ͕͍࣋ͬͯΔ/BWJHBUPSΛ࢖ͬͯը໘ભҠ͢Δ
    "
    #
    .BUFSJBM1BHF3PVUF
    Navigator.push(
    
    
    context,
    
    
    MaterialPageRoute(
    
    
    builder: (BuildContext context) => B(),
    
    
    ),
    
    
    );
    Navigator.pop(conte
    8JEHFU ࠓճ͸4FDPOE1BHF
    Λ
    .BUFSJBM1BHF3PVUFʹ౉ͯ͠
    3PVUFΛ࡞ΓɼͦΕΛදࣔ
    

    View Slide

67. ը໘ભҠ
    .BUFSJBM"QQ͕͍࣋ͬͯΔ/BWJHBUPSΛ࢖ͬͯը໘ભҠ͢Δ
    "
    #
    FSJBM1BHF3PVUF
    
    
    
    
    ute(
    
    
    ildContext context) => B(),
    
    
    
    
    Navigator.pop(context);
    "
    

    View Slide

68. ը໘ભҠ
    "
    .BUFSJBM"QQ͕͍࣋ͬͯΔ/BWJHBUPSΛ࢖ͬͯը໘ભҠ͢Δ
    "
    #
    .BUFSJBM1BHF3PVUF
    Navigator.push(
    
    
    context,
    
    
    MaterialPageRoute(
    
    
    builder: (BuildContext context) => B(),
    
    
    ),
    
    
    );
    Navigator.pop(conte
    

    View Slide

69. ը໘ભҠ
    "
    .BUFSJBM"QQ͕͍࣋ͬͯΔ/BWJHBUPSΛ࢖ͬͯը໘ભҠ͢Δ
    "
    #
    .BUFSJBM1BHF3PVUF
    Navigator.push(
    
    
    context,
    
    
    MaterialPageRoute(
    
    
    builder: (BuildContext context) => B(),
    
    
    ),
    
    
    );
    Navigator.pop(conte
    ͍͍ͪͪ͜Εॻ͘ͷ
    ΊΜͲ͍͘͞ʂʂʂ
    

    View Slide

70. .BUFSJBM"QQʹ͋Β͔͡Ί3PVUFΛొ࿥͓ͯ͜͠͏ʂ
    return MaterialApp(
    
    
    title: 'Flutter Demo',
    
    
    theme: ThemeData(
    
    
    primarySwatch: Colors.pink,
    
    
    ),
    
    
    initialRoute: '/',
    
    
    routes: {
    
    
    '/': (BuildContext context) => const FirstPage(),
    
    
    '/second': (BuildContext context) => const SecondPage(),
    
    
    },
    
    
    );
    ͜ΕͰݺ΂ΔΑ͏ʹͳΔʂ
    Navigator.pushNamed(context, "/second");
    

    View Slide

71. IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    w (JU)VCͷϦϙδτϦҰཡΛऔಘ͢Δ"1*Λୟ͍ͯΈΑ͏ʂ
    w IUUQTEPDTHJUIVCDPNKBSFTUSFQPTSFQPT BQJ7FSTJPOMJTU
    SFQPTJUPSJFTGPSBVTFS
    w ·ͣ͸DVSMίϚϯυͰୟ͍ͯΈΑ͏
    w 'MVUUFSͰIUUQ௨৴͢ΔͨΊʹIUUQύοέʔδΛ͍ΕΑ͏ʂ
    w IUUQTQVCEFWQBDLBHFTIUUQ
    5SZωοτϫʔΫ௨৴ͯ͠ΈΑ͏
    $ curl -L https://api.github.com/users/kno3a87/repos
    ϦϙδτϦҰཡ
    ͍ͩ͘͞ʙ
    <\
    JE
    OPEF@JEIPHF
    OBNF)FMMP8PSME
    ʜ
    ωοτϫʔΫ௨৴
    ΫϥΠΞϯτ "1*
    

    View Slide

72. ඇಉظॲཧʢBTZODBXBJUʣ ઀ଓதʂ
    ୳͠தʂ
    ௐ΂தʂ
    ฦ͠தʂ
    ଴ͬͯ͋͛Δ
    ʢBXBJUʣ
    

    View Slide

73. IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    w ·ͣ͸KTPO͔ΒEBSUͰѻ͑ΔΦϒδΣΫτʹม׵͠Α͏
    w IPHFΈ͍ͨͳऔಘํ๏ͩͱจࣈྻUZQPͪ͠Ό͏͔΋ʜ
    w Ϟσϧʹม׵ͪ͠Ό͓͏ʂ
    w ࢖༻ύοέʔδ
    w IUUQTQVCEFWQBDLBHFTKTPO@TFSJBMJ[BCMF
    w IUUQTQVCEFWQBDLBHFTCVJME@SVOOFS
    5SZKTPOΛύʔε͠Α͏
    $ flutter pub run build_runner build
    \
    lOBNFzlLVOPz
    lBHFzlz
    ^
    VTFSOBNF͸LVOP
    VTFSBHF͸ʂ
    

    View Slide

74. ෼ؒٳܜ
    ͔࣍ΒνʔϜνϟϨϯδʹͳΓ·͢ʂ
    

    View Slide

75. νʔϜͰνϟϨϯδʂ
    $IBU(15ͱͷνϟοτΞϓϦΛ
    ࡞ͬͯΈΑ͏ʂ
    

    View Slide

76. $IBU(15ͱ͸ʁ
    w 0QFO"*͕೥݄ʹެ։ͨ͠ਓ޻஌ೳνϟοτϘοτ
    w ΢ΣϒΞϓϦ͚ͩͰͳ͘"1*΋༻ҙ͞ΕͯΔ
    w IUUQTQMBUGPSNPQFOBJDPNEPDTBQJSFGFSFODFNBLJOHSFRVFTUT
    w "1*Λ࢖͏্Ͱͷ஫ҙࣄ߲
    w ػີ৘ใ΍ୈࡾऀͷ஌తࡒ࢈ݖΛ৵֐͢ΔΑ͏ͳΠϯϓοτ͸͠ͳ͍Ͱʂʂʂʂ
    w ΋ͪΖΜ㒷ᨱதই΋/(
    w Ξ΢τϓοτ͸ݸਓͰར༻͢ΔൣғʹͱͲΊ͍ͯͩ͘͞
    

    View Slide

77. νʔϜͰνϟϨϯδʂ
    w جຊ࣮૷͸֤ʑ΍͍ͬͯͩ͘͞ʂʂ
    w νʔϜʹͨ͠ҙਤ͸ฉ͖΍͘͢ɾڭ͑΍͘͢͢ΔͨΊͳͷͰϫΠϫΠ΍͍ͬͯͩ͘͞ʂ
    w ࠷ॳͷ໰୊͔Βղ͍ͯ͘ͱॱ൪ʹνϟοτΞϓϦ͕ग़དྷ্͕ͬͯ͘૝ఆͰ͢ʂ
    w ࠷ޙ·ͰḷΓண͚ͳ͍ͷΛ૝ఆͨ͠໰୊ྔͳͷͰযΒͣʂ
    w ٳܜ΋ࣗ༝ʹͱͬͯͶʂόΠϩϯͰด·ΔͷͰؾΛ͚ͭͯʂʂ
    w ఆظతʹνϡʔλʔ͕ݟͯճΓ·͢ʂ
    w Կ͔࣭໰ɾ૬ஊ͋ͬͨΒଈ࠲ʹνϡʔλʔݺΜͰ΋Βͬͯେৎ෉Ͱ͢ʂ
    

    View Slide

78. 5FBN$IBMMFOHF౤ߘϖʔδͷ࡞੒
    w ౤ߘ͢ΔϖʔδΛ࡞Ζ͏ʂ
    w ดͨ͡Βॻ͍ͨจࣈ͕දࣔ͞ΕΔΑ͏ʹͯ͠ΈΑ͏
    ౴͑
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    

    View Slide

79. 5FBN$IBMMFOHF$IBU(15ͱ઀ଓ
    w $IBU(15"1*ͷτʔΫϯ͸%SPQCPYʹ͋Γ·͢ʂ
    w (JUʹQVTI͠ͳ͍ͰͶʂʂʂ
    w FOWϑΝΠϧΛ࡞੒ͯ͠HJUJHOPSFʹॻ͍͓ͯ͘ͱ҆৺͔΋
    w LP
    w ͖ͬ͞ͷ౤ߘϖʔδͰॻ͍ͨ಺༰Λ"1*ʹ౤͛ͯΈΑ͏
    w ݁Ռ΋දࣔͯ͠ΈΑ͏ʂ
    ౴͑
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    $ flutter run —-dart-define=MY_TOKEN=<͜͜ʹτʔΫϯ>
    

    View Slide

80. 5FBN$IBMMFOHFKTPOΛϞσϧʹม׵
    w ͖ͬ͞ͷUSZΛࢀߟʹ΍ͬͯΈΑ͏ʂ
    w ڍಈࣗମ͸͖ͬ͞ͱมΘΒͳͯ͘0,
    w SFTQPOTF͕ೖΕࢠʹͳͬͯΔͷ͸Ͳ͏ͨ͠Βྑ͍͔ͳʁ
    ౴͑
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    

    View Slide

81. 5FBN$IBMMFOHFϩʔσΟϯάදࣔ͠Α͏
    w "1*Λୟ͍͔ͯΒ݁Ռ͕ฦͬͯ͘Δ·ͰͷؒϩʔσΟϯάΛදࣔ
    w ϩʔσΟϯά΢ΟδΣοτ͸ඪ४Ͱ༻ҙ͞ΕͯΔͷͰ୳ͯ͠ΈͯͶ
    ౴͑
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    

    View Slide

82. 5FBN$IBMMFOHFϩʔΧϧʹอଘ͠Α͏
    w ࠓճ͸)JWFͱ͍͏ύοέʔδΛ࢖༻
    w IUUQTQVCEFWQBDLBHFTIJWF
    w ୺຤ͷϑΝΠϧγεςϜʹอଘͯ͘͠LFZWBMVFετΞ
    w SFBE΋XSJUF΋ΊͬͪΌૣ͍ʂʂʂ
    w Ұ୴QSJOUσόοάͳͲͰอଘ֬ೝͰ͖Ε͹0,Ͱ͢ʂ
    ౴͑
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    

    View Slide

83. 5FBN$IBMMFOHFจ຺Λཧղͤ͞Α͏
    w $IBU(15͸จ຺΋ཧղͯ͠ฦ౴ͯ͘͠Ε·͢ʂ
    w ࢦࣔޠΛ࢖͏ͱจ຺ཧղͯ͠Δ͔֬ೝͰ͖·͢
    w ͠ΓͱΓͱ͔Ͱ΋Αͦ͞͏ʂ
    ౴͑
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    

    View Slide

84. 5FBN$IBMMFOHFϦετදࣔ͠Α͏
    w อଘͨ͠ϝοηʔδ಺༰ΛϦετදࣔʹͯ͠νϟοτͬΆ͘͠Α͏ʂ
    w σβΠϯ΋ࣗ෼޷Έʹ༡ΜͰΈͯʂ
    ౴͑
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    

    View Slide

85. 5FBN$IBMMFOHFΤϥʔΛදࣔ
    w λΠϜΞ΢τΛઃ͚ͯΈΑ͏
    w ඵܦͬͯ΋Ϩεϙϯε͕ͳ͚Ε͹ΤϥʔΛฦ͢Α͏ʹͳͲ
    w Կ͔͠ΒͷΤϥʔΛड͚औͬͨΒμΠΞϩάͷදࣔΛ͠Α͏ʂ
    w μΠΞϩά͡Όͳͯ͘εφοΫόʔͰ΋0,
    ౴͑
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    

    View Slide

86. 5FBN$IBMMFOHFϝοηʔδΛશ࡟আ
    w ࠓ·Ͱอଘͨ͠ϝοηʔδΛશ࡟আ͢ΔϘλϯΛ͚ͭΑ͏ʂ
    w σόοά͠΍͘͢ͳΓ·͢
    ౴͑
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    

    View Slide

87. 5FBN$IBMMFOHF)JWFͰ΋ϞσϧΛ࢖͏
    w KTPOͷ࣌Έ͍ͨʹจࣈྻࢦఆ͢ΔՕॴ͕ग़͖ͯͯେมʂ
    w ϞσϧΛ࢖͑ΔΑ͏ʹ͠Α͏ʂ
    w ࢖༻ύοέʔδ
    w IUUQTQVCEFWQBDLBHFTIJWF@HFOFSBUPS
    w IUUQTEPDTIJWFECEFWDVTUPNPCKFDUTUZQF@BEBQUFST
    ౴͑
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    

    View Slide

88. 5FBN$IBMMFOHF#MPDύλʔϯʹॻ͖௚ͯ͠ΈΑ͏
    w #MPDύλʔϯͱ͸ঢ়ଶ؅ཧʹؔ͢ΔΞʔΩςΫνϟύλʔϯͷҰͭ
    w ೥ͷ(PPHMF*0Ͱ঺հ͞Εͨ
    w ϏδωεϩδοΫͱ6*Λ෼཭ͯ͠։ൃ͠΍͘͢͠Α͏ʂ
    w IUUQTCMPDMJCSBSZEFW
    w 'MVUUFSެࣜαϯϓϧ࣮૷΋͋Δʂ
    w IUUQTHJUIVCDPN
    fl
    VUUFSOFXT@UPPMLJUUSFF
    DEDFEDGFCCFBBB
    w 'MVUUFSͷϕετϓϥΫςΟεΛ౿ऻ
    w ࢖༻ύοέʔδ
    w IUUQTQVCEFWQBDLBHFT
    fl
    VUUFS@CMPD
    

    View Slide

89. 5FBN$IBMMFOHF#MPDύλʔϯʹॻ͖௚ͯ͠ΈΑ͏
    TUBUF
    #MPDΫϥε͸
    ৗʹTUBUFΛ࣋ͬͯΔ
    

    View Slide

90. 5FBN$IBMMFOHF#MPDύλʔϯʹॻ͖௚ͯ͠ΈΑ͏
    TUBUF
    #MPDΫϥε͸
    ৗʹTUBUFΛ࣋ͬͯΔ
    ࣋ͬͯΔ࠷৽ͷTUBUFΛݟͯ
    6*Λߏங͢Δ
    

    View Slide

91. 5FBN$IBMMFOHF#MPDύλʔϯʹॻ͖௚ͯ͠ΈΑ͏
    ઒
    ʢTUSFBNʣ
    TUBUF
    

    View Slide

92. 5FBN$IBMMFOHF#MPDύλʔϯʹॻ͖௚ͯ͠ΈΑ͏
    ઒
    ʢTUSFBNʣ
    TUBUF
    TUBUFΛྲྀ͢
    ʢFWFOUʣ
    

    View Slide

93. 5FBN$IBMMFOHF#MPDύλʔϯʹॻ͖௚ͯ͠ΈΑ͏
    ઒
    ʢTUSFBNʣ
    TUBUF
    TUBUFΛྲྀ͢
    ʢFWFOUʣ
    

    View Slide

94. 5FBN$IBMMFOHF#MPDύλʔϯʹॻ͖௚ͯ͠ΈΑ͏
    ઒
    ʢTUSFBNʣ
    TUBUF
    TUBUFΛྲྀ͢
    ʢFWFOUʣ
    ྲྀΕͯ͘ΔͷΛ
    ଴ͪߏ͑ͯΔ
    ʢMJTUFOʣ
    

    View Slide

95. 5FBN$IBMMFOHF#MPDύλʔϯʹॻ͖௚ͯ͠ΈΑ͏
    ౴͑
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    

    View Slide

96. Ϋϩʔδϯά
    

    View Slide

97. Ϋϩʔδϯά
    'MVUUFSָ͠Ί͔ͨͳʁ
    

    View Slide

98. ҎԼิ଍ࢿྉ
    

    View Slide

99. ม਺
    ʲ࠶୅ೖͰ͖Δʳ
    WBS
    ʲ࠶୅ೖͰ͖ͳ͍ʳ
    fi
    OBMʢ࣮ߦ࣌ఆ਺ʣ
    DPOTUʢίϯύΠϧ࣌ఆ਺ʣ
    ίϯύΠϧ࣌ʹఆ਺ʹ͢Δํ͕ύϑΥʔϚϯε͕ྑ͍ͷͰDPOTUΛ࢖͓͏ʂ
    

    View Slide

100. ΢ΟδΣοτͷ੾Γग़͠ํ
     class SampleState extends State {
     
     
     final text1 = '΄͛ΓΜ';
     
     
     final text2 = '͏ͳΓΜ';
     
     
     @override
     
     
     Widget build(BuildContext context) {
     
     
     return Scaffold(
     
     
     appBar: AppBar(
     
     
     title: Text(widget.title),
     
     
     ),
     
     
     body: Center(
     
     
     child: Column(
     
     
     children: [
     
     
     Text(text1),
     
     
     Text(text2),
     
     
     ],
     
     
     ),
     
     
     ),
     
     
     );
     
     
     }
     
     
     }
     
     
     ଞͷ΢ΟδΣοτͰ΋
     ࢖͍·Θ͍ͨ͠ͷͰ
     ੾Γग़͍ͨ͠ʂ
     

     View Slide

101. ΢ΟδΣοτͷ੾Γग़͠ํIFMQFSNFUIPE
     class SampleState extends State {
     
     
     final text1 = '΄͛ΓΜ';
     
     
     final text2 = '͏ͳΓΜ';
     
     
     @override
     
     
     Widget build(BuildContext context) {
     
     
     return Scaffold(
     
     
     appBar: AppBar(
     
     
     title: Text(widget.title),
     
     
     ),
     
     
     body: Center(
     
     
     child: Column(
     
     
     children: [
     
     
     Text(text1),
     
     
     Text(text2),
     
     
     ],
     
     
     ),
     
     
     ),
     
     
     );
     
     
     }
     
     
     }
     
     
     class SampleState extends State {
     
     
     final text1 = '΄͛ΓΜ';
     
     
     final text2 = '͏ͳΓΜ';
     
     
     @override
     
     
     Widget build(BuildContext context) {
     
     
     return Scaffold(
     
     
     appBar: AppBar(
     
     
     title: Text(widget.title),
     
     
     ),
     
     
     body: showText(),
     
     
     );
     
     
     }
     
     
     Widget showText() {
     
     
     return Center(
     
     
     child: Column(
     
     
     children: [
     
     
     Text(text1),
     
     
     Text(text2),
     
     
     ],
     
     
     ),
     
     
     );
     
     
     }
     
     
     }
     ؆୯ʹ੾Γग़ͤΔ
     

     View Slide

102. ΢ΟδΣοτͷ੾Γग़͠ํΫϥε8JEHFU
     class SampleState extends State {
     
     
     final text1 = '΄͛ΓΜ';
     
     
     final text2 = '͏ͳΓΜ';
     
     
     @override
     
     
     Widget build(BuildContext context) {
     
     
     return Scaffold(
     
     
     appBar: AppBar(
     
     
     title: Text(widget.title),
     
     
     ),
     
     
     body: Center(
     
     
     child: Column(
     
     
     children: [
     
     
     Text(text1),
     
     
     Text(text2),
     
     
     ],
     
     
     ),
     
     
     ),
     
     
     );
     
     
     }
     
     
     }
     
     
     class SampleState extends State {
     
     
     final text1 = '΄͛ΓΜ';
     
     
     final text2 = '͏ͳΓΜ';
     
     
     @override
     
     
     Widget build(BuildContext context) {
     
     
     return Scaffold(
     
     
     appBar: AppBar(
     
     
     title: Text(widget.title),
     
     
     ),
     
     
     body: SampleText(
     
     
     text1: text1,
     
     
     text2: text2,
     
     
     ),
     
     
     );
     
     
     }
     
     
     }
     
     
     class SampleText extends StatelessWidget {
     
     
     final String text1;
     
     
     final String text2;
     
     
     const SampleText({
     
     
     super.key,
     
     
     required this.text1,
     
     
     required this.text2,
     
     
     });
     
     
     @override
     
     
     Widget build(BuildContext context) {
     
     
     return Center(
     
     
     child: Column(
     
     
     children: [
     
     
     Text(text1),
     
     
     Text(text2),
     
     
     ],
     
     
     ),
     
     
     );
     
     
     }
     
     
     }
     Ϋϥεͱͯ͠੾Γग़͢ͱ
     ͪΐͬͱΊΜͲ͍͚͘͞Ͳ
     ςετ͠΍͍͢ˍ
     ແବͳ࠶ඳըΛ཈͑ΒΕΔʂ
     

     View Slide

103. #VJME$POUFYUͬͯͳΜͩʁ
     8JEHFU͸ӈਤͷΑ͏ʹπϦʔঢ়ʹͳ͍ͬͯΔ
     #VJME$POUFYU͸݂ےͷ͜ͱͰ૆ઌͷ৘ใʹΞΫηε͢Δ͜ͱ͕Ͱ͖Δ
     ˞௚ܘͷ૆ઌ͔͠ḷΕͳ͍ʂ
     ˞ͭͷ8JEHFUΠϯελϯεʹରͯ͠
     

     ͭͷ#VJME$POUFYU͕ϖΞͷؔ܎ʹͳ͍ͬͯΔʂ
     .BUFSJBM"QQ
     5IFNF CMVF
     
     4DB
     ff
     PME
     5IFNF
     QJOL
     
     8JEHFU$
     5IFNF
     PSBOHF
     
     8JEHFU"
     $PMVNO
     3PX
     8JEHFU#
     

     View Slide

104. #VJME$POUFYUͬͯͳΜͩʁ
     8JEHFU͸ӈਤͷΑ͏ʹπϦʔঢ়ʹͳ͍ͬͯΔ
     #VJME$POUFYU͸݂ےͷ͜ͱͰ૆ઌͷ৘ใʹΞΫηε͢Δ͜ͱ͕Ͱ͖Δ
     ˞௚ܘͷ૆ઌ͔͠ḷΕͳ͍ʂ
     ˞ͭͷ8JEHFUΠϯελϯεʹରͯ͠
     

     ͭͷ#VJME$POUFYU͕ϖΞͷؔ܎ʹͳ͍ͬͯΔʂ
     .BUFSJBM"QQ
     5IFNF CMVF
     
     4DB
     ff
     PME
     5IFNF
     QJOL
     
     8JEHFU$
     5IFNF
     PSBOHF
     
     8JEHFU"
     $PMVNO
     3PX
     8JEHFU#
     8JEHFU#ͷ݂ےΛḷͬͨΒ
     ͜͜ͷ5IFNF͕ݟ͔ͭͬͨʂ
     ͸ࣗ෼ͷ݂ےΛḷͬͯ
     ૆ઌʹ͋Δ5IFNFΛݟ͚͖͍ͭͯͯΔ
     Theme.of(context)
     

     View Slide