VS Codeを使ったFlutterアプリ開発

2ddbd112dbc8c6572fe79821584c1465?s=47 Kurun
December 18, 2019

VS Codeを使ったFlutterアプリ開発

2ddbd112dbc8c6572fe79821584c1465?s=128

Kurun

December 18, 2019
Tweet

Transcript

  1. VS CodeΛ࢖ͬͨFlutterΞϓϦ։ൃ VS Code Meetup #1 - ॳճجૅฤ (2019/12/18) @kurun_pan

  2. • ຊۀ ‣ Software Engineer ✓ Linux Kernel, Driver, Middleware,

    Application etc - ϑϧελοΫʁ ✓ ࠷ۙ͸UIϑϨʔϜϫʔΫؔ࿈ͷ͓࢓ࣄ • ϓϥΠϕʔτ ‣ AndroidΞϓϦ։ൃͱ͔ίʔυॻ͍ͨΓ ‣ εϓϥτΡʔϯ2ʹ700HҎ্ͷ޻਺౤ೖ Self-introduction @kurun_pan @Kurun-pan
  3. • Google͕։ൃ͍ͯ͠ΔOSSͷϚϧνϓϥοτϑΥʔϜͳUIϑϨʔϜϫʔΫ • iOS/Android ‣ ਖ਼ࣜαϙʔτࡁΈ (2018/12ʙ) • Web ‣

    ࠓ࣌఺Ͱ͸·ͩβ൛ (2019/12ʙ) • σεΫτοϓ ‣ macOSͷΈα൛ (2019/12ʙ) ‣ Windows/Linux͸͓ࢼ͠Ϩϕϧ • ݴޠ͸Dart (CݴޠͱJavaͷதؒΈ͍ͨͳײ͡) Flutterͱ͸ʁ IUUQTXXXZPVUVCFDPNXBUDI W0F.RHS:+GFBUVSFFNC@UJUMF
  4. VS CodeͰFlutter։ൃ؀ڥΛߏஙͯ͠ΈΔ

  5. Flutter SDKΠϯετʔϧ Flutter SDKͷΠϯετʔϧ͸ͱͬͯ΋؆୯Ͱ͢ $ git clone https://github.com/flutter/flutter $ sudo

    mv flutter /usr/local/ 1. Flutter SDKΛऔಘͯ͠೚ҙͷ৔ॴʹ഑ஔ $ sudo code /etc/paths ※ /usr/local/flutter/binΛ௥Ճ 2. Flutter SDKͷύεΛ௨͢
  6. ඞཁʹԠͯ͡Πϯετʔϧ • iOSΞϓϦͷ৔߹͸XcodeɺAndroidΞϓϦͷ৔߹͸Android Studioͷ Πϯετʔϧ͕ඞཁͰ͢

  7. VS Code ExtensionΠϯετʔϧ 'MVUUFSͱ%BSUϓϥάΠϯͷΠϯετʔϧ ˞'MVUUFSϓϥάΠϯΛΠϯετʔϧ͢Ε͹ɺ%BSU͸ґଘͰΠϯετʔϧ͞Ε·͢

  8. Flutter Extension 'MVUUFS&YUFOTJPOΛ࢖͑͹ɺίϚϯυϥΠϯͰqVUUFSίϚϯυΛୟ͔ͳͯ͘΋ࡁΈ·͢ ˙࢖͍ํ ɹ7JFX$PNNBOE1BMFUUFʜΛΫϦοΫ΋͘͠͸ɺTIJGU DPNNBOE Q

  9. αϯϓϧΞϓϦΛಈ͔ͯ͠ΈΔ

  10. ࠓճɺ঺հ͢Δ಺༰ʹ͍ͭͯ iOS, Android, Webͷ3ͭͷϓϥοτϑΥʔϜͰಈ͔͢ํ๏Λ঺հ͠·͢ $ flutter channel beta $ flutter

    upgrade 1. Web͕β൛ͷͨΊɺFlutter SDKΛβνϟϯωϧʹઃఆ $ cp -rf ${flutter SDKΠϯετʔϧઌ}/flutter/examples/flutter_gallery/ . 2. αϯϓϧϓϩάϥϜΛϩʔΧϧʹίϐʔ $ code . 4. VS Codeىಈ $ flutter config --enable-web 3. Flutter for WebΛ༗ޮԽ
  11. FlutterϓϥάΠϯͷߋ৽ αϯϓϧΞϓϦͷதͰར༻͍ͯ͠ΔFlutterϓϥάΠϯΛߋ৽͓͖ͯ͠·͢ ΫϦοΫ

  12. λʔήοτ؀ڥͷઃఆ λʔήοτͷ࣮ߦ؀ڥΛબ୒͠·͢ɻࠓճ͸Chrome (Web)ͱiOS (ϞόΠϧ)ͷ2ͭΛࢼͯ͠Έ·͢ ᶃΫϦοΫ ᶄ࣮ߦ͍ͨ͠λʔήοτΛબ୒

  13. iOSΞϓϦͱ࣮ͯ͠ߦ ϒϨʔΫϙΠϯτΛ࢖ͬͨσόοά΍ϗοτϦϩʔυ౳΋ՄೳͰ͢

  14. AndroidΞϓϦͱ࣮ͯ͠ߦ ΋ͪΖΜAndroidΞϓϦͱͯ͠΋ಈ͔ͤ·͢

  15. WebΞϓϦͱ࣮ͯ͠ߦ ͜ΕɺWebΞϓϦͰ͢Α

  16. ·ͱΊ • VS Code ‣ FlutterͰϚϧνϓϥοτϑΥʔϜ։ൃ͕؆୯ ‣ جຊ1ͭͷϓϥάΠϯΛΠϯετʔϧ͢Δ͚ͩͰίϚϯυෆཁ • Flutter

    ‣ UIΛαΫͬͱ࡞ΔͳΒ࠷దͳπʔϧ ‣ ݱࡏ࠷΋੎͍ͷ͋ΔUIϑϨʔϜϫʔΫͰɺਅਖ਼Ϛϧνϓϥοτ ϑΥʔϜͱͯ͠ظ଴
  17. Have a nice VS Code