Flutter研修【ミクシィ22新卒技術研修】

22新卒技術研修で実施したFlutter研修の講義資料です。
動画：https://youtu.be/oQCJZFqDwIo

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

Transcript

1. 'MVUUFS৽ଔݚम
   
   -9&OHJOFFS,VOP"ZBOB
   

   View Slide

2. ߨࢣνϡʔλʔ
   ٱ໺จࡊ
   !BZBOBLVOP
   ৽ଔ
   -9ࣄۀ෦ϑϩϯτνʔϜ
   υϥ͑΋ΜϏοάϥϒ
   ా୅༞ี
   !ZVTVLFUBTIJSP
   ೥ೖࣾ
   -9ࣄۀ෦ϑϩϯτνʔϜ
   Ξ΢τυΞͱ4UFBNͰήʔϜ΍Δͷ͕޷͖
   

   View Slide

3. ͓඼ॻ͖
   ʙ'MVUUFSͱ͸
   ʙ'MVUUFSDSFBUFͰΞϓϦΛ࡞ͬͯΈΑ͏
   ʙٳܜ
   ʙDSFBUF͞ΕͨΞϓϦΛݟ͍ͯ͜͏
   *OUSPEVDUJPO
   4UBUF
   ʙϥϯν
   5FYU'JFME
   ը໘ભҠ
   ʙ(SBQI2-äͱ͸ʁ
   ʙ(SBQI2-Λ৮ͬͯΈΑ͏
   (SBQI2-2VFSZ
   (SBQI2-.VUBUJPO
   ʙνʔϜͰνϟϨϯδʂ8PSEMFΛ࡞ͬͯΈΑ͏ʂ
   ʙΫϩʔδϯά
   

   View Slide

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

   View Slide

5. ݚमͷΰʔϧ
   

   View Slide

6. ݚमͷΰʔϧ
   'MVUUFSΛָ͠΋͏ʂʂ
   

   View Slide

7. 'MVUUFSͱ͸
   

   View Slide

8. 'MVUUFSͱ͸
   w ϚϧνϓϥοτϑΥʔϜ։ൃ͕ՄೳͳϑϨʔϜϫʔΫ
   w ϞόΠϧɾXFCɾσεΫτοϓͷΞϓϦ͕ͭͷίʔυͰ࡞ΕΔʂ
   w 50:05"͕ຒΊࠐΈػثʹ౥ࡌ͢Διϑτ΢ΣΞͷϑϨʔϜϫʔΫͱͯ͠࠾༻
   w IUUQT
   fl
   VUUFSEFWTIPXDBTFUPZPUB
   

   View Slide

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

   View Slide

10. w %BSUͱ͍͏ݴޠͰ࣮૷͢Δ
    w (PPHMF͕+BWB4DSJQUͷ໰୊఺Λվળͨ͠୅ସݴޠͱͯ͠೥ʹ։ൃ͞Εͨ΋ͷ
    w %BSUͰ/VMM4BGFUZʹͳͬͨʢผϖʔδͰઆ໌ʣ
    w Τϯδϯ΋ϨϯμϦϯά΋શ෦ࣗલͳͷͰ଎͍ʂ
    w એݴత6*Ͱॻ͘͜ͱ͕ՄೳʢผϖʔδͰઆ໌ʣ
    w 4XJGUͳͲͷωΠςΟϒίʔυΑΓ3FBDUͷํ͕ࣅͯΔ
    'MVUUFSͱ͸
    

    View Slide

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

    View Slide

12. ࣮ߦ࣌ʹOVMMͷΤϥʔͰ
    མͪΔ͜ͱ͸ͳ͘ͳΔ
    ʢEBSUYͷ৔߹͸ίϯύΠϧ࣌ʹΤϥʔʹͳΔʣ
    /VMM4BGFUZͬͯʁ
    BʹOVMM͸୅ೖͰ͖ͳ͍
    جຊOVMMΛड͚෇͚ͳ͍ͷͰ
    ࢖͍͍ͨ࣌͸ Λ͚ͭΔ
    int a = 100;
    
    
    int? b = null;
    
    
    a = null; // Τϥʔ
    
    
    print(a + b); // Τϥʔ
    
    
    if (b != null) {
    
    
    print(a + b);
    
    
    }
    
    
    print(a + (b ?? 0));
    C͕OVMMͷ࣌͸ආ͚
    ͯ͘ΕΔͷͰ҆৺
    EBSU΍/VMM4BGFUZͳݴޠͷ৔߹
    

    View Slide

13. ࣮ߦ࣌ʹOVMMͷΤϥʔͰ
    མͪΔ͜ͱ͸ͳ͘ͳΔ
    ʢEBSUYͷ৔߹͸ίϯύΠϧ࣌ʹΤϥʔʹͳΔʣ
    /VMM4BGFUZͬͯʁ
    BʹOVMM͸୅ೖͰ͖ͳ͍
    جຊOVMMΛड͚෇͚ͳ͍ͷͰ
    ࢖͍͍ͨ࣌͸ Λ͚ͭΔ
    int a = 100;
    
    
    int? b = null;
    
    
    a = null; // Τϥʔ
    
    
    print(a + b); // Τϥʔ
    
    
    if (b != null) {
    
    
    print(a + b);
    
    
    }
    
    
    print(a + (b ?? 0));
    C͕OVMMͷ࣌͸ආ͚
    ͯ͘ΕΔͷͰ҆৺
    EBSU΍/VMM4BGFUZͳݴޠͷ৔߹
    C͕OVMMͩͬͨΒ
    Λ࢖͏ͱ͍͏ҙຯ
    

    View Slide

14. ࣮ߦ࣌ʹOVMMͷΤϥʔͰ
    མͪΔ͜ͱ͸ͳ͘ͳΔ
    ʢEBSUYͷ৔߹͸ίϯύΠϧ࣌ʹΤϥʔʹͳΔʣ
    /VMM4BGFUZͬͯʁ
    BʹOVMM͸୅ೖͰ͖ͳ͍
    جຊOVMMΛड͚෇͚ͳ͍ͷͰ
    ࢖͍͍ͨ࣌͸ Λ͚ͭΔ
    int a = 100;
    
    
    int? b = null;
    
    
    a = null; // Τϥʔ
    
    
    print(a + b); // Τϥʔ
    
    
    if (b != null) {
    
    
    print(a + b);
    
    
    }
    
    
    print(a + (b ?? 0));
    C͕OVMMͷ࣌͸ආ͚
    ͯ͘ΕΔͷͰ҆৺
    EBSU΍/VMM4BGFUZͳݴޠͷ৔߹
    C͕OVMMͩͬͨΒ
    Λ࢖͏ͱ͍͏ҙຯ
    ઈରOVMM͡Όͳ͍ʂͬͯ৔߹͸
    ɹɹͱॻ͘͜ͱ΋Ͱ͖Δ
    b!
    

    View Slide

15. w %BSUͱ͍͏ݴޠͰ࣮૷͢Δ
    w (PPHMF͕+BWB4DSJQUͷ໰୊఺Λվળͨ͠୅ସݴޠͱͯ͠೥ʹ։ൃ͞Εͨ΋ͷ
    w %BSUͰ/VMM4BGFUZʹͳͬͨʢผϖʔδͰઆ໌ʣ
    w Τϯδϯ΋ϨϯμϦϯά΋શ෦ࣗલͳͷͰ଎͍ʂ
    w એݴత6*Ͱॻ͘͜ͱ͕ՄೳʢผϖʔδͰઆ໌ʣ
    w 4XJGUͳͲͷωΠςΟϒίʔυΑΓ3FBDUͷํ͕ࣅͯΔ
    'MVUUFSͱ͸
    

    View Slide

16. 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

17. 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

18. 'MVUUFSDSFBUFͰ
    ΞϓϦΛ࡞ͬͯΈΑ͏
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. ෼ؒٳܜ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. ࣮ࡍͷίʔυΛݟ͍ͯ͜͏ʂ
    w ϥΠϒίʔσΟϯά͍ͯ͘͠ͷͰҰॹʹΞϓϦΛಈ͔͍ͯ͜͠͏ʂ
    w ͨ·ʹղઆͰεϥΠυʹ໭͖ͬͯ·͢
    w ηΫγϣϯ͝ͱʹղઆͨ͠ޙ෼΄ͲҰਓͰղ࣌ؒ͘ΛऔΔͷͰؤுͬͯΈ͍ͯͩ͘͞ʂ
    w ҰԠϦϙδτϦʹίʔυΛஔ͍ͯ͋Γ·͢
    w IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMMT
    w 13͝ͱʹઆ໌͍͖ͯ͠·͢
    w ίϛοτϝοηʔδ΍ίʔυ಺ίϝϯτ͕આ໌ʹͳ͍ͬͯ·͢
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. 5SZϚε໨Λදࣔͯ͠ΈΑ͏
    w Ϛε໨Λදࣔͯ͠ΈΑ͏
    w ྫ͸ºͰ͕͢ԿݸͰ΋ɾԿ৭Ͱ΋0,ʂ
    ෼ʂ
    

    View Slide

39. 5SZϚε໨Λදࣔͯ͠ΈΑ͏ղઆ
    w 3PX΍$PMVNOͰͭͷ࢛֯ΛॏͶΕ͹0,ʂ
    GridView.count(
    
    
    crossAxisCount: 3,
    
    
    children: [
    
    
    for (var i = 0; i < 9; i++)
    
    
    const Padding(
    
    
    padding: EdgeInsets.all(8.0),
    
    
    child: ColoredBox(
    
    
    color: Colors.amber,
    
    
    ),
    
    
    ),
    
    
    ],
    
    
    ),
    
    
    (SJE7JFXΛ࢖ͬͯ΋
    ඳ͚·͢ʂ
    

    View Slide

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

    View Slide

41. $PMVNO΍3PX͸਌ͷαΠζ·Ͱ޿͕Δੑ࣭Λ࣋ͭ
    $PMVNO 3PX
    mainAxisSize:MainAxisSize.min,
    
    
    Λࢦఆͯ͋͛͠Δͱ
    ࢠཁૉ͕ऩ·Δେ͖͞ʹཹ·Δʂ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

48. $PMVNOͷதʹ(SJE7JFXΛೖΕΔͱ͖͸஫ҙʂ
    w ղܾࡦʢ͜͜Ͱղઆʣ
    ᶃ (SJE7JFXͷߴ͞Λݻఆ͢Δ
    ᶄ &YQBOEFEͱ͍͏8JEHFUΛ࢖͏
    ᶅ (SJE7JFXʹɹɹɹɹɹɹɹɹɹɹɹΛࢦఆ͢Δ
    $PMVNO
    shrinkWrap: true,
    ߴ͞QYͰʂ
    (SJE7JFX
    

    View Slide

49. $PMVNOͷதʹ(SJE7JFXΛೖΕΔͱ͖͸஫ҙʂ
    w ղܾࡦʢ͜͜Ͱղઆʣ
    ᶃ (SJE7JFXͷߴ͞Λݻఆ͢Δ
    ᶄ &YQBOEFEͱ͍͏8JEHFUͰғ͏
    ᶅ (SJE7JFXʹɹɹɹɹɹɹɹɹɹɹɹΛࢦఆ͢Δ
    $PMVNO
    (SJE7JFX
    shrinkWrap: true,
    $PMVNOͷ༨Γͷ伱ؒ
    શ෦ຒΊͨΔʂ
    

    View Slide

50. $PMVNOͷதʹ(SJE7JFXΛೖΕΔͱ͖͸஫ҙʂ
    w ղܾࡦʢ͜͜Ͱղઆʣ
    ᶃ (SJE7JFXͷߴ͞Λݻఆ͢Δ
    ᶄ &YQBOEFEͱ͍͏8JEHFUͰғ͏
    ᶅ (SJE7JFXʹɹɹɹɹɹɹɹɹɹɹɹΛࢦఆ͢Δ
    $PMVNO
    (SJE7JFX
    shrinkWrap: true,
    ࣗ෼ͷେ͖͞ʹཹ·Δ
    

    View Slide

51. 4UBUFͱ4UBUFMFTT8JEHFU4UBUFGVM8JEHFU
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    w Χ΢ϯτΞοϓͯ͠දࣔ͸Ͳ͏΍͍ͬͯΔͷͩΖ͏͔ʁ
    w ͦ΋ͦ΋4UBUFͬͯͳ͋ʹʁʢผϖʔδͰઆ໌ʣ
    w 4UBUFGVM8JEHFUͷ঺հ
    w 4UBUFΛ௥Ճͯ͠ΈΑ͏
    w ϚΠφε͍ͯ͘͠Ϙλϯ
    w -JTU7JFXΛ௥Ճͯ͠ΈΑ͏
    w 4UBUF͕มΘΔͨͼʹຖճϨϯμϦϯά૸ͬͯΔʜ
    w 4UBUF͸খ࣋ͭ͘͞Α͏ʹ͠Α͏ʂ
    w 4UBUFMFTT8JEHFUͷ঺հ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

55. 5SZഒʹ͠Α͏
    w 4UBUFΛ৽ͨʹ༻ҙ͠Α͏
    w ͦͷ4UBUFΛഒ͍ͯ͘͠ϘλϯΛ௥Ճ͠Α͏
    w Կ৭ͰͲΜͳେ͖͞Ͱ΋େৎ෉ʂ
    ෼ʂ
    

    View Slide

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

    View Slide

57. ϥϯν
    

    View Slide

58. 5FYU'JMFEΛ࢖ͬͯΈΑ͏
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    w ৽͍͠ϖʔδΛ࡞੒ͯͦ͜͠Ͱ5FYU'JMFEΛ࢖ͬͯΈΑ͏
    w จࣈଧͭͨͼʹԼʹςΩετදࣔͤ͞Δʹ͸ʁ
    w 4UBUFʹ͠ͳ͖Ό͍͚ͳ͍Ͷʂ
    

    View Slide

59. 5SZจࣈදࣔϘλϯΛ࡞Ζ͏
    w ͖ͬ͞͸จࣈΛଧͭͨͼදࣔͩͬͨ
    w ϘλϯΛԡͨ͠Βจࣈ͕දࣔ͞ΕΔΑ͏ʹͯ͠ΈΑ͏ʂ
    ෼ʂ
    

    View Slide

60. 5SZจࣈදࣔϘλϯΛ࡞Ζ͏
    w දࣔʹ͸࢖Θͳ͍UNQςΩετʹҰ୴อ࣋͠Α͏
    w Ϙλϯԡͨ࣌͠ʹUNQςΩετΛදࣔςΩετʹTFU4UBUF
    IconButton(
    
    
    onPressed: () {
    
    
    setState(() {
    
    
    showText = tmpText;
    
    
    });
    
    
    },
    

    View Slide

61. ը໘ભҠͯ͠ΈΑ͏
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    w 'JSTU1BHFͱ4FDPOE1BHFΛ࡞੒
    w 4DB
    ff
    PMEͳ͍ͱ౔୆͕ͳ͍͔ΒมͳදࣔʹͳͬͪΌ͏Αʙ
    w QVTIͷઆ໌ʢผϖʔδͰઆ໌ʣ
    w ͋Β͔͡Ί3PVUFొ࿥͓ͯ͘͠ͱศརͩΑʙ
    w QPQͷઆ໌ʢผϖʔδͰઆ໌ʣ
    

    View Slide

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

    View Slide

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

    View Slide

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

    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
    ͍͍ͪͪ͜Εॻ͘ͷ
    ΊΜͲ͍͘͞ʂʂʂ
    

    View Slide

67. .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

68. (SBQI2-ͬͯͳΜͩʂ
    

    View Slide

69. (SBQI2-ͱ͸
    w ΫϥΠΞϯτ͕ཁٻͨ͠σʔλΛఏڙ͢Δ΋ͷ
    w .FUBʢچ'BDFCPPLʣ͕࡞ͬͨ
    ͋͛Δ΍Ͱ
    Ϣʔβͷσʔλ
    ͪΐ͏͍ͩ
    ΫϥΠΞϯτ (SBQI2-
    

    View Slide

70. (SBQI2-ͱ3&45ͷൺֱ
    3&45 (SBQI2-
    VTFST DPNQBOJFT TUPSFT VTFST DPNQBOJFT TUPSFT
    औಘ͍ͨ͠΋ͷ͝ͱʹ
    ΤϯυϙΠϯτ͕Θ͔ΕͯΔ
    ΤϯυϙΠϯτ͸ͭ
    

    View Slide

71. (SBQI2-ͱ3&45ͷൺֱ
    3&45 (SBQI2-
    User: {
    
    
    “Name” : “kuno”,
    
    
    “Company” : “mixi”,
    
    
    “Sex” : “f”,
    
    
    “Web” : “kunoayana.com”,
    
    
    }
    query getUser(userId: userId) {
    
    
    User {
    
    
    name
    
    
    company
    
    
    }
    
    
    }
    (&5BQJVTFST\VTFS*E^
    ໊લͱձ໊͚ࣾͩ
    ཉ͍͠ͷʹ͜ͷ"1*ͩͱଞͷ৘ใ·Ͱ
    Ҿͬு͖ͬͯͪΌ͏ʜ
    ࠓඞཁͳσʔλ͚ͩ
    औಘͰ͖Δʂ
    

    View Slide

72. 2VFSZͱ.VUBUJPO
    2VFSZ
    .VUBUJPO
    Ϣʔβͷσʔλཉ͍͠
    ͋͛Δ΍Ͱ
    Ϣʔβͷσʔλ
    ௥Ճɾߋ৽ɾ࡟আ͍ͨ͠
    ঝ஌
    มߋޙͷσʔλ΋͋͛ΔΘ
    

    View Slide

73. (SBQIJ2-
    IUUQTTFSFOFHBSEFOIFSPLVBQQDPN
    

    View Slide

74. w (SBQI2-Λ'MVUUFSͰ࢖͏ͨΊͷϥΠϒϥϦΛೖΕΑ͏
    w λʔϛφϧͰ
    w IUUQTQVCEFWQBDLBHFTHSBQIRM
    w ·ͣ2VFSZݺͿͨΊͷϝιουΛੜ΍ͦ͏
    w ϝιουͷதͰ2VFSZΛݺΜͰΈΑ͏ʂ
    w 3FBENFͷίϐϖͰେৎ෉ʂ
    w ϢʔβҰཡΫΤϦͰड͚औͬͨσʔλΛදࣔͯ͠ΈΑ͏ʂ
    w ωοτϫʔΫ͸EFWUPPMͰݟΕΔʂʢผϖʔδͰઆ໌ʣ
    (SBQI2-2VFSZΛ࢖ͬͯΈΑ͏ʂ
    
    fl
    VUUFSQVCBEEHSBQIRM
    

    View Slide

75. EFWUPPMͱ͸ʁ
    λʔϛφϧͰWΛԡ͢ͱϒϥ΢βͰ։͘
    ˞ͣͬͱ͙Δ͙Δͯ͠දࣔ͞Εͳ͍ͱ͖͸Ұ୴QBVTF͔ͯ͠ΒSFTVNFͰ࠶։ͯ͠ΈΑ͏ʂ
    /FUXPSLλϒ
    ݟΔͱͲΜͳ௨৴͕
    ߦΘΕͯΔ͔෼͔Δ
    

    View Slide

76. w ࣍͸.VUBUJPOݺͿͨΊͷϝιουΛੜ΍ͦ͏
    w ϝιουͷதͰ.VUBUJPOΛݺΜͰΈΑ͏ʂ
    w 3FBENFͷίϐϖͰେৎ෉ʂ
    w Ϣʔβొ࿥ϛϡʔςʔγϣϯͯ͠ΈΑ͏ʂ
    w ࣗ෼ͷ6TFS*E֮͑ͱ͍ͯ΄͍͠ʜʂ
    (SBQI2-.VUBUJPOΛ࢖ͬͯΈΑ͏ʂ
    

    View Slide

77. νʔϜͰνϟϨϯδʂ
    8PSEMFΛͭͬͯ͘ΈΑ͏
    

    View Slide

78. 8PSEMFͱ͸ʁ
    IUUQTXXXOZUJNFTDPNHBNFTXPSEMFJOEFYIUNM
    w จࣈͷӳ୯ޠ͕Կ͔Λ౰ͯΔήʔϜ
    w ਖ਼ղͷӳ୯ޠʹճ౴ͨ͠จࣈ͕ೖ͍ͬͯΔ͔৭Ͱ൑அ
    w จࣈʹೖͬͯͳ͍ɿάϨʔ
    w จࣈͷͲ͔͜ʹ͸ೖͬͯΔɿΦϨϯδ
    w จࣈͷ৔ॴ΋จࣈ΋߹ͬͯΔɿάϦʔϯ
    

    View Slide

79. $IBMMFOHF
    w 8PSEMF1BHFΛ৽ͨʹ੾Γग़ͯ͠࡞͍ͬͯ͜͏
    w ϘλϯΛԡͯ͠66*%ΛϥϯμϜੜ੒͠Α͏
    w IUUQTQVCEFWQBDLBHFTVVJEΛ࢖ͬͯΈΑ͏
    w 66*%ʹରԠ͢Δӳ୯ޠΛΫΤϦͰҾͬு͖ͬͯͯදࣔ͠Α͏ʂ
    w ༨ྗ͕͋ͬͨΒϩʔσΟϯάදࣔ΋ͯ͠ΈΑ͏
    

    View Slide

80. $IBMMFOHFղઆ
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    

    View Slide

81. $IBMMFOHF
    w ͷԼʹςΩετϑΟʔϧυΛ௥Ճ
    w ςΩετϑΟʔϧυͰจࣈΛೖྗͯ͠ճ౴ͯ͠ΈΑ͏ʂ
    w ճ౴݁ՌΛԼʹදࣔͯ͠ΈΑ͏
    w ༨ྗ͕͋ͬͨΒ݁Ռϕλॻ͖ͳͷΛ͍͍ײ͡ʹදࣔͯ͠ΈΑ͏ʂ
    

    View Slide

82. $IBMMFOHFղઆ
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    

    View Slide

83. $IBMMFOHF
    w ͖ͬ͞ͷ݁ՌΛ৭෇͚ͯ͠ΈΑ͏ʂ
    

    View Slide

84. $IBMMFOHFղઆ
    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    

    View Slide

85. w ճτϥΠͰ͖ΔΑ͏ʹ͠Α͏ʂ
    w ͷղ౴͸ফͯ͠0,
    $IBMMFOHF
    

    View Slide

86. IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    $IBMMFOHFղઆ
    

    View Slide

87. w ճτϥΠͨ͠ޙμΠΞϩάͰղ౴Λग़ͯ͋͛͠Α͏ʂ
    $IBMMFOHF
    

    View Slide

88. IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    $IBMMFOHFղઆ
    

    View Slide

89. w ΩʔϘʔυΛ࿈ಈͤ͞Α͏ʂ
    w ΩʔϘʔυͷίʔυཉ͔ͬͨ͠Βݴ͍ͬͯͩ͘͞ʂ
    $IBMMFOHF
    

    View Slide

90. IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM
    $IBMMFOHFղઆ
    

    View Slide

91. w ճऴΘͬͨΒଞͷ୯ޠΛղ͚ΔΑ͏ʹ͠Α͏
    w Ϙλϯ௥ՃͰ΋ͳΜͰ΋0,ʂ
    w ճ໨ͷճ౴͕ऴΘͬͨΒQPTU$PNNVOJUZϛϡʔςʔγϣϯΛ౤͛ͯΈΑ͏
    w ผϖʔδͰΈΜͳͷίϛϡχςΟ͕ݟΕΔΑ͏ʹ͠Α͏
    w ຊՈ8PSEMFͷΑ͏ͳΞχϝʔγϣϯΛ͚ͭͯΈΑ͏
    w ඪ४Ͱ"OJNBUFE8JEHFU͕༻ҙ͞Ε͍ͯ·͢ʂ
    w DPSSFDU8PSEͷΫΤϦͷΈͰ࡞Γ௚ͯ͠ΈΑ͏
    .PSF$IBMMFOHF
    

    View Slide

92. Ϋϩʔδϯά
    

    View Slide

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

    View Slide

94. ҎԼิ଍ࢿྉ
    

    View Slide

95. fi
    OBMͱDPOTUͷҧ͍
    fi
    OBM͸࣮ߦ࣌ఆ਺
    DPOTU͸ίϯύΠϧ࣌ఆ਺
    ίϯύΠϧ࣌ʹఆ਺ʹͪ͠Ό͑ΔͳΒͦͬͪͷํ͕ྑ͍ͷͰDPOTUΛ࢖͓͏ʂ
    

    View Slide

96. #VJME$POUFYUͬͯͳ͋ʹʁ
    ͦ΋ͦ΋8JEHFU͸ӈਤͷΑ͏ʹπϦʔঢ়ʹͳ͍ͬͯΔ
    #VJME$POUFYU͸݂ےͷ͜ͱͰ૆ઌͷ৘ใʹΞΫηε͢Δ͜ͱ͕Ͱ͖Δ
    ˞௚ܥͷ૆ઌ͔͠ḷΕͳ͍ʂ
    ˞ͭͷ8JEHFUͷΠϯελϯεʹରͯ͠
    ɹͭͷ#VJME$POUFYU͕ϖΞͷؔ܎ʹͳ͍ͬͯΔʂ
    5IFNF
    PSBOHF
    
    8JEHFU"
    5IFNF
    QJOL
    
    8JEHFU$
    .BUFSJBM"QQ
    5IFNF CMVF
    
    4DB
    ff
    PME
    ࣮ߦ݁Ռʢ࣮૷͸ͪ͜Βʣ
    8JEHFU#
    3PX
    $PMVNO
    ͸ࣗ෼ͷ݂ےΛͨͲͬͯ
    ૆ઌʹ͋Δ5IFNFΛݟ͚͖͍ͭͯͯΔ
    Theme.of(context)
    8JEHFU#ͷ݂ےΛḷͬͨΒ
    ͜͜ͷ5IFNF͕ݟ͔ͭͬͨʂ
    

    View Slide