Flutter & VS Code Setup Speaker: Yujiro Kisu GDSC Tokyo Metropolitan University 18:00 ~ 20:00 (早く終わる可能性高い) 開始までしばらくお待ちください 18:00 ~ 20:00 (probably finishing earlier) Stay tuned till we start! @yuyu_lab_tmu 

VS Code ● VS Codeとは ○ 便利なテキストエディタ ○ 色々な拡張機能がある ○ 自分の好きなテーマにカスタマイズできる ● 今回の用途 ○ Gitを簡単に使える ○ Flutter・Dartの拡張機能を使用 

VS Code ● What is VS Code? ○ Useful text editor ○ Many extension packages ○ Customizable with a favorite theme ● Uses in this event ○ Using Git easily ○ Using Flutter (Dart) extensions 

インストール手順 1. サイトにアクセス (https://code.visualstudio.com/do wnload) 2. 該当のファイルをダウンロード 3. ファイルの解凍 4. (セキュリティの許可) 5. アプリの起動 6. (日本語拡張機能をインストール ) VS Code拡張機能ボタンをクリック → 

Installation process 1. Access this site (https://code.visualstudio.com/downlo ad) 2. Download an appropriate file 3. Unzip the file 4. (Allow security check) 5. Run VS Code app 6. (Install a Japanese package) VS Code extension button -> 

hoorayyy 

Q&A 

Git ● Gitとは ○ バージョン管理ツール ○ 複数人での開発で重宝 ● 今回の用途 ○ Flutter SDKのインストール ○ ワークショップの記録 ○ ハッカソンのチーム開発 

Git ● What is Git? ○ Version control tool ○ Useful for development with multiple people ● Uses in this event ○ Installing Flutter SDK (explained later) ○ Managing codebase for workshops & this hackathon 

パワーアップ (みたいな感じ) !!! 

Power up (sort of) !!! 

1. サイトにアクセス (https://git-scm.com/downloads) 2. Homebrewをインストール (https://brew.sh/) a. Terminalを使用 3. このコマンドをうつ a. brew install git インストール手順 1. サイトにアクセス (https://git-scm.com/downloads) 2. 自分のOS＆システムに合ったものを ダウンロード 3. パッケージを開く 4. デフォルトの設定でインストール Windows Mac 

1. Access this site (https://git-scm.com/downloads) 2. Install Homebrew (https://brew.sh/) a. Use Terminal　　　　　　 3. Run this command: a. brew install git Installation process 1. Access this site (https://git-scm.com/downloads) 2. Download one suitable for your OS & system (32-bit or 64-bit) 3. Open the package 4. Install with the default settings Windows Mac 

Flutter ● Flutterとは ○ UI 開発の便利ツール (SDK) ○ Dart 言語を使う ○ Googleが作った ○ マルチプラットフォーム対応 ● 今回の用途 ○ アプリの骨組み ○ 迅速なアプリ開発の体験 ○ ハッカソンの必須項目 

Flutter ● What is Flutter? ○ Tool for UI development (SDK) ○ Uses Dart language ○ Made by Google ○ Multi-platform framework ● Uses in this event ○ Framework for an app ○ Experience robust/quick app development ○ Requirement in this hackathon 

1. ワークショップ用フォルダ作成 2. Flutter拡張機能をVS Codeにインストール 3. ワークショップ用のフォルダをに ドラッグ＆ドロップ 4. ⌘ + shift + p (Mac) ctrl + shift + p (Windows) Flutter SDKインストール 

1. Create a folder for a workshop 2. Install Flutter extension on VS Code 3. Drag & drop the folder onto VS Code opened 4. ⌘ + shift + p (Mac)　　　 ctrl + shift + p (Windows) Install Flutter SDK with 

Q&A 

Congratulation!! Image: https://www.reddit.com/r/ProgrammerHumor/comments/mj6y2a/visual_studio_code/ 

No content

お疲れさまでした 🙌 

Next up … Day3 Git & VS Code