$30 off During Our Annual Pro Sale. View Details »

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

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

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

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

MIXI ENGINEERS
PRO

April 28, 2022
Tweet

More Decks by MIXI ENGINEERS

Other Decks in Programming

Transcript

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

  2. ߨࢣνϡʔλʔ ٱ໺จࡊ !BZBOBLVOP ৽ଔ -9ࣄۀ෦ϑϩϯτνʔϜ υϥ͑΋ΜϏοάϥϒ ా୅༞ี !ZVTVLFUBTIJSP ೥ೖࣾ -9ࣄۀ෦ϑϩϯτνʔϜ

    Ξ΢τυΞͱ4UFBNͰήʔϜ΍Δͷ͕޷͖
  3. ͓඼ॻ͖ ʙ'MVUUFSͱ͸ ʙ'MVUUFSDSFBUFͰΞϓϦΛ࡞ͬͯΈΑ͏ ʙٳܜ ʙDSFBUF͞ΕͨΞϓϦΛݟ͍ͯ͜͏ *OUSPEVDUJPO 4UBUF ʙϥϯν 5FYU'JFME ը໘ભҠ

    ʙ(SBQI2-äͱ͸ʁ ʙ(SBQI2-Λ৮ͬͯΈΑ͏ (SBQI2-2VFSZ (SBQI2-.VUBUJPO ʙνʔϜͰνϟϨϯδʂ8PSEMFΛ࡞ͬͯΈΑ͏ʂ ʙΫϩʔδϯά
  4. ࣄલ४උ J04ಈ͔͍ͨ͠ਓɹ "OESPJEಈ͔͍ͨ͠ਓɹ w 9DPEFͷΠϯετʔϧ͓Αͼղౚ w Πϯετʔϧ͸"QQ4UPSFͰ͸ͳ͘EFWFMPQFSαΠτ͔Βམͱͯ͘͠Δ͜ͱΛ͓קΊ w IUUQTEFWFMPQFSBQQMFDPNEPXOMPBENPSF w

    ࣄલʹ"QQMF*%͕ඞཁ w ձࣾͷϝʔϧΞυϨεͰΞΧ΢ϯτΛ࡞੒ w "OESPJE4UVEJPͷΠϯετʔϧ͓Αͼղౚ w Ұ୴ىಈ͠ͳ͍ͱ fl VUUFSEPDUPSͨ͠ͱ͖ʹ6OBCMFUPMPDBUF"OESPJE4%,ͷΤϥʔʹͳΔ
  5. ݚमͷΰʔϧ

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

  7. 'MVUUFSͱ͸

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

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

    ίϯϙʔωϯτΛඪ४Ͱ༻ҙͯ͘͠ΕͯΔ͔Βॳ৺ऀͰ΋ྑ͍ײ͡ʹ࡞ΕΔʂ
  10. w %BSUͱ͍͏ݴޠͰ࣮૷͢Δ w (PPHMF͕+BWB4DSJQUͷ໰୊఺Λվળͨ͠୅ସݴޠͱͯ͠೥ʹ։ൃ͞Εͨ΋ͷ w %BSUͰ/VMM4BGFUZʹͳͬͨʢผϖʔδͰઆ໌ʣ w Τϯδϯ΋ϨϯμϦϯά΋શ෦ࣗલͳͷͰ଎͍ʂ w એݴత6*Ͱॻ͘͜ͱ͕ՄೳʢผϖʔδͰઆ໌ʣ

    w 4XJGUͳͲͷωΠςΟϒίʔυΑΓ3FBDUͷํ͕ࣅͯΔ 'MVUUFSͱ͸
  11. /VMM4BGFUZͬͯʁ B΋C΋OVMMΛ୅ೖͰ͖Δ ͲͷܕͰ΋OVMMΛ࢖ͬͯྑ͍ C͸OVMM΍ͳ͍͔ʙʂ ࣮ߦ࣌ʹOVMMͩͬͨ৔߹ ΤϥʔΛు͘ɾΞϓϦ͕མͪΔ int a = 100;

    int b = null; a = null; print(a + b); EBSUY΍/VMM4BGFUZ͡Όͳ͍ݴޠͷ৔߹
  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ͳݴޠͷ৔߹
  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ͩͬͨΒ Λ࢖͏ͱ͍͏ҙຯ
  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!
  15. w %BSUͱ͍͏ݴޠͰ࣮૷͢Δ w (PPHMF͕+BWB4DSJQUͷ໰୊఺Λվળͨ͠୅ସݴޠͱͯ͠೥ʹ։ൃ͞Εͨ΋ͷ w %BSUͰ/VMM4BGFUZʹͳͬͨʢผϖʔδͰઆ໌ʣ w Τϯδϯ΋ϨϯμϦϯά΋શ෦ࣗલͳͷͰ଎͍ʂ w એݴత6*Ͱॻ͘͜ͱ͕ՄೳʢผϖʔδͰઆ໌ʣ

    w 4XJGUͳͲͷωΠςΟϒίʔυΑΓ3FBDUͷํ͕ࣅͯΔ 'MVUUFSͱ͸
  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ʹ௥Ճͤ͑ʂ
  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ʣ զ͸όϒʙͱ͍͏ࠇ৭ͷ ਅΜதدͤςΩετͰ͋Δʂ
  18. 'MVUUFSDSFBUFͰ ΞϓϦΛ࡞ͬͯΈΑ͏

  19. ΞϓϦΛ࡞ͬͯΈΑ͏ $ flutter create <<ϓϩδΣΫτͷ໊લ>> $ cd <<ϓϩδΣΫτͷ໊લ>> $ open

    iOS/Runner.xcworkspace // ios ͷਓͷΈ $ flutter run "OESPJEͷਓ͸࣮ػબ୒΋͘͠͸ "OESPJEελδΦ্ཱͪ͛ͯΤϛϡબ୒ ϓϩδΣΫτ໊͸ΞϯμόʔͰܨ͕ͳ͍ͱ ʰzϓϩδΣΫτ໊zJTOPUBWBMJE%BSUQBDLBHFOBNFʱ ͬͯΤϥʔుౖ͍ͯΒΕΔ
  20. J04೿ͷਓ ࣄલ४උͰ࡞ͬͨ ΞΧ΢ϯτʹͳ͍ͬͯΔ͔ʁ

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

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

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

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

  25. ෼ؒٳܜ

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

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

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

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

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

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

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

    IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMMT w 13͝ͱʹઆ໌͍͖ͯ͠·͢ w ίϛοτϝοηʔδ΍ίʔυ಺ίϝϯτ͕આ໌ʹͳ͍ͬͯ·͢
  33. 74$PEFͷਓʙʂ ֦ுػೳೖΕ͓ͯ͘ͱΊͪΌͪ͘ΌศརͰ͢ ʰ fl VUUFSʱͰݕࡧͯ͠Ұ൪্ʹग़Δ΍ͭ

  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 ֦ுػೳ͸͜͏࢖͏ʂʢผϖʔδͰઆ໌ʣ
  35. )PU3FMPBE3FTUBSUͱ͸ʁ )PUSFMPBE )PUSFTUBSU ͍͍ͪͪDUSMD͔Βͷ fl VUUFSSVO͠ͳͯ͘େৎ෉ʂʂʂʂ λʔϛφϧͰ3Λԡ͢ ΄΅Ϧηοτ͞ΕΔ λʔϛφϧͰSΛԡ͢ 5FYU΍৭ͳͲ΢ΟδΣοτΛ

    มߋͨ͠Β൓ө͞ΕΔ 4UBUF͸ͦͷ·· ʢ4UBUFʹؔͯ͠͸ޙͰઆ໌ʣ fl VUUFSSVO ωΠςΟϒίʔυ͔Β ࣮ߦ͠௚͢
  36. ඪ४΢ΟδΣοτ IUUQTEPDT fl VUUFSEFWEFWFMPQNFOUVJXJEHFUT Α͘࢖͏΢ΟδΣοτ͕ ༻ҙ͞ΕͯΔʂ

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

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

  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Λ࢖ͬͯ΋ ඳ͚·͢ʂ
  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"$)&% ɽɽɽ
  41. $PMVNO΍3PX͸਌ͷαΠζ·Ͱ޿͕Δੑ࣭Λ࣋ͭ $PMVNO 3PX mainAxisSize:MainAxisSize.min, Λࢦఆͯ͋͛͠Δͱ ࢠཁૉ͕ऩ·Δେ͖͞ʹཹ·Δʂ

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

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

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

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

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

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

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

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

    (SJE7JFX shrinkWrap: true, ࣗ෼ͷେ͖͞ʹཹ·Δ
  51. 4UBUFͱ4UBUFMFTT8JEHFU4UBUFGVM8JEHFU IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM w Χ΢ϯτΞοϓͯ͠දࣔ͸Ͳ͏΍͍ͬͯΔͷͩΖ͏͔ʁ w ͦ΋ͦ΋4UBUFͬͯͳ͋ʹʁʢผϖʔδͰઆ໌ʣ w 4UBUFGVM8JEHFUͷ঺հ w 4UBUFΛ௥Ճͯ͠ΈΑ͏

    w ϚΠφε͍ͯ͘͠Ϙλϯ w -JTU7JFXΛ௥Ճͯ͠ΈΑ͏ w 4UBUF͕มΘΔͨͼʹຖճϨϯμϦϯά૸ͬͯΔʜ w 4UBUF͸খ࣋ͭ͘͞Α͏ʹ͠Α͏ʂ w 4UBUFMFTT8JEHFUͷ঺հ
  52. 4UBUFͬͯͳ͋ʹʁ w 4UBUFঢ়ଶ w 4UBUF͕มΘΔͱը໘ߋ৽͞ΕΔʢCVJME಺͕࠶࣮ߦ͞ΕΔʣ ͳΜΒ͔ͷΞΫγϣϯ ݁ՌΛඳը ݁ՌΛඳը

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

    એݴత6*Λந৅Խ͢Δͱ ঢ়ଶΛҾ਺ͱͯ͠6*Λฦ͢ ෭࡞༻Λ࣋ͨͳ͍ؔ਺Ͱ͋Δ
  54. w 4UBUFΛ࢖͏΢ΟδΣοτΛ4UBUFGVM8JEHFUͱ͍͏ w ٯʹ࢖Θͳ͍΢ΟδΣοτ͸4UBUFMFTT8JEHFUͱ͍͏ 4UBUFͬͯͳ͋ʹʁ 4UBUFGVM8JEHFU ݁ՌΛඳը ݁ՌΛඳը

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

  56. 5SZഒʹ͠Α͏ղઆ w ৽͍͠4UBUFΛఆٛ w ഒ͢ΔϝιουΛఆٛ w ഒ͢ΔϝιουΛݺͿϘλϯΛ௥Ճ void _twice() {

    setState(() { _counter2 = _counter2 * 2; }); } TextButton( onPressed: () { _twice(); },
  57. ϥϯν

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

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

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

    { showText = tmpText; }); },
  61. ը໘ભҠͯ͠ΈΑ͏ IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM w 'JSTU1BHFͱ4FDPOE1BHFΛ࡞੒ w 4DB ff PMEͳ͍ͱ౔୆͕ͳ͍͔ΒมͳදࣔʹͳͬͪΌ͏Αʙ w QVTIͷઆ໌ʢผϖʔδͰઆ໌ʣ

    w ͋Β͔͡Ί3PVUFొ࿥͓ͯ͘͠ͱศརͩΑʙ w QPQͷઆ໌ʢผϖʔδͰઆ໌ʣ
  62. ը໘ભҠ " .BUFSJBM"QQ͕͍࣋ͬͯΔ/BWJHBUPSΛ࢖ͬͯը໘ભҠ͢Δ " # .BUFSJBM1BHF3PVUF Navigator.push( context, MaterialPageRoute<void>( builder:

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

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

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

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

    (BuildContext context) => B(), ), ); Navigator.pop(conte ͍͍ͪͪ͜Εॻ͘ͷ ΊΜͲ͍͘͞ʂʂʂ
  67. .BUFSJBM"QQʹ͋Β͔͡Ί3PVUFΛొ࿥͓ͯ͜͠͏ʂ return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.pink,

    ), initialRoute: '/', routes: <String, WidgetBuilder>{ '/': (BuildContext context) => const FirstPage(), '/second': (BuildContext context) => const SecondPage(), }, ); ͜ΕͰݺ΂ΔΑ͏ʹͳΔʂ Navigator.pushNamed(context, "/second");
  68. (SBQI2-ͬͯͳΜͩʂ

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

  70. (SBQI2-ͱ3&45ͷൺֱ 3&45 (SBQI2- VTFST DPNQBOJFT TUPSFT VTFST DPNQBOJFT TUPSFT औಘ͍ͨ͠΋ͷ͝ͱʹ

    ΤϯυϙΠϯτ͕Θ͔ΕͯΔ ΤϯυϙΠϯτ͸ͭ
  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*ͩͱଞͷ৘ใ·Ͱ Ҿͬு͖ͬͯͪΌ͏ʜ ࠓඞཁͳσʔλ͚ͩ औಘͰ͖Δʂ
  72. 2VFSZͱ.VUBUJPO 2VFSZ .VUBUJPO Ϣʔβͷσʔλཉ͍͠ ͋͛Δ΍Ͱ Ϣʔβͷσʔλ ௥Ճɾߋ৽ɾ࡟আ͍ͨ͠ ঝ஌ มߋޙͷσʔλ΋͋͛ΔΘ

  73. (SBQIJ2- IUUQTTFSFOFHBSEFOIFSPLVBQQDPN

  74. w (SBQI2-Λ'MVUUFSͰ࢖͏ͨΊͷϥΠϒϥϦΛೖΕΑ͏ w λʔϛφϧͰ w IUUQTQVCEFWQBDLBHFTHSBQIRM w ·ͣ2VFSZݺͿͨΊͷϝιουΛੜ΍ͦ͏ w ϝιουͷதͰ2VFSZΛݺΜͰΈΑ͏ʂ

    w 3FBENFͷίϐϖͰେৎ෉ʂ w ϢʔβҰཡΫΤϦͰड͚औͬͨσʔλΛදࣔͯ͠ΈΑ͏ʂ w ωοτϫʔΫ͸EFWUPPMͰݟΕΔʂʢผϖʔδͰઆ໌ʣ (SBQI2-2VFSZΛ࢖ͬͯΈΑ͏ʂ  fl VUUFSQVCBEEHSBQIRM
  75. EFWUPPMͱ͸ʁ λʔϛφϧͰWΛԡ͢ͱϒϥ΢βͰ։͘ ˞ͣͬͱ͙Δ͙Δͯ͠දࣔ͞Εͳ͍ͱ͖͸Ұ୴QBVTF͔ͯ͠ΒSFTVNFͰ࠶։ͯ͠ΈΑ͏ʂ /FUXPSLλϒ ݟΔͱͲΜͳ௨৴͕ ߦΘΕͯΔ͔෼͔Δ

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

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

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

    w จࣈͷ৔ॴ΋จࣈ΋߹ͬͯΔɿάϦʔϯ
  79. $IBMMFOHF w 8PSEMF1BHFΛ৽ͨʹ੾Γग़ͯ͠࡞͍ͬͯ͜͏ w ϘλϯΛԡͯ͠66*%ΛϥϯμϜੜ੒͠Α͏ w IUUQTQVCEFWQBDLBHFTVVJEΛ࢖ͬͯΈΑ͏ w 66*%ʹରԠ͢Δӳ୯ޠΛΫΤϦͰҾͬு͖ͬͯͯදࣔ͠Α͏ʂ w

    ༨ྗ͕͋ͬͨΒϩʔσΟϯάදࣔ΋ͯ͠ΈΑ͏
  80. $IBMMFOHFղઆ IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM

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

  82. $IBMMFOHFղઆ IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM

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

  84. $IBMMFOHFղઆ IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM

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

  86. IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM $IBMMFOHFղઆ

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

  88. IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM $IBMMFOHFղઆ

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

  90. IUUQTHJUIVCDPNNJYJHSPVQ#FHJOOFS5SBJOJOH'MVUUFSQVMM $IBMMFOHFղઆ

  91. w ճऴΘͬͨΒଞͷ୯ޠΛղ͚ΔΑ͏ʹ͠Α͏ w Ϙλϯ௥ՃͰ΋ͳΜͰ΋0,ʂ w ճ໨ͷճ౴͕ऴΘͬͨΒQPTU$PNNVOJUZϛϡʔςʔγϣϯΛ౤͛ͯΈΑ͏ w ผϖʔδͰΈΜͳͷίϛϡχςΟ͕ݟΕΔΑ͏ʹ͠Α͏ w ຊՈ8PSEMFͷΑ͏ͳΞχϝʔγϣϯΛ͚ͭͯΈΑ͏

    w ඪ४Ͱ"OJNBUFE8JEHFU͕༻ҙ͞Ε͍ͯ·͢ʂ w DPSSFDU8PSEͷΫΤϦͷΈͰ࡞Γ௚ͯ͠ΈΑ͏ .PSF$IBMMFOHF
  92. Ϋϩʔδϯά

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

  94. ҎԼิ଍ࢿྉ

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

  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͕ݟ͔ͭͬͨʂ