Flutterアプリの開発環境を整えるとき、「Android StudioとVS Codeどっちを使えばいい？」と迷う人は多い。結論から言うと、VS Codeで開発してエミュレーターはAndroid Studioで管理するのが軽くて使いやすい。この記事ではその手順をまとめる。
1. VS Codeをインストールする
まずcode.visualstudio.comにアクセスしてインストーラーをダウンロードする。ダウンロードしたら実行してそのままインストールでOK。
わかりやすくダウンロードフォルダに入れるのがおすすめ！
ダウンロードフォルダを開いてダブルクリックで開く。
「同意する」を選択して「次へ」をクリック
あとは「次へ」をクリック
💡気を付けるポイントはここ！
今チェックが入ってる4項目はそのままでOK。特に「PATHへの追加」はターミナルから code コマンドで起動できるようになるので入れておいた方がいいです。
デスクトップにアイコンを入れておきたい方はチェックを入れておいてください。私はデスクトップには何も出したくない派なのでチェックは入れません。
その後は「次へ」で問題ありません。
この画面がでたらインストール完了です！
2. Flutter拡張機能を入れる
１．VS Codeを開いたら左サイドバーの拡張機能タブ（四角いアイコン）をクリック
２．検索欄に「Flutter」と入力
３．インストールをクリックしてインストール。
※これを入れるとDart拡張機能も自動で入る。
４．「install」をクリックするとポップアップが出るので「Trust Publisher & Install」をクリック（※Dart CodeはFlutter公式の開発元だから信頼して問題なし）
3. Flutter SDKをインストールする
flutter.devからSDKのzipをダウンロードして、C:\flutter に解凍する。
１．flutter.devにアクセスしたら一番上にある「Quick start」をクリック
２．次の画面でちょっとスクロールすると「Git for Windows.」があるのでそれをクリック。
「Git for Windows/x64 Setup」をクリックしてダウンロード
※ご自身のご自身の環境に合わせてください、Windowsであれば同じものでOKです
今回はまたわかりやすいようにダウンロードフォルダに保存。
４．ダウンロードしたファイルを確認する
ダウンロードが終わったら、ブラウザの下かダウンロードフォルダ「flutter_windows_xxx.zip」というファイルがあるのでそれをクリック。
「このアプリがデバイスに変更を加えることを許可しますか？」的な文言が出るので「許可」をクリックしてインストール開始。
基本はすべて「Next」でOK
💡「Choosing the default editor used by Git」って画面でエディタを選ぶところが出てくる。デフォルトはVimになってるけど、VS Code使うなら「Use Visual Studio Code as Git’s default editor」に変えておくと後々便利
最期の画面は「View Release Notes」のチェックは外してから「Finish」をクリック
５．Cドライブにflutterフォルダを作る
１．タスクバーのフォルダアイコンをクリックしてエクスプローラーを開く
２．左のサイドバーにある「PC」をクリック
３．「Cドライブ (C:)」をダブルクリックして開く
フォルダの新規作成
１．何もない空白部分を右クリック
２．「新規作成」→「フォルダー」をクリック
３．フォルダ名をflutterと入力してEnterを押す。
６．Flutter SDKをダウンロードする
１．ブラウザで flutter.dev を開き、上のメニューから「Docs」をクリック
※もともと選択されていればそのままでOK
２．左のサイドバーの「Install Flutter」→「Quick start」をクリック
３．ページを下にスクロールする
４．「Install Flutter manually.」をクリック
５．次のページでもページの真ん中のほうまでスクロールする
６．そこに「Download manually」という青枠のボックスがあるので、その中の「Install Flutter manually」というリンクをクリック
７．Zipファイルをダウンロードフォルダに保存する
７．zipファイルを展開する
１．ダウンロードが完了したらエクスプローラーのダウンロードフォルダを開き、Zipファイルを展開する
２．デスクトップに展開していると思うので、そのflutterフォルダを開く
３．Ctrl＋Aで全選択してCtrl＋Xで切り取る
４．Cドライブの先ほど作ったflutterフォルダを開いて、Ctrl＋Vで張り付ける
８．環境変数にPATHを追加する
１．デスクトップのスタートボタンをクリック
２．検索バー（虫眼鏡アイコン）をクリックして「環境変数」と入力
３．「システム環境変数の編集」をクリックして開く
４．「環境変数」をクリック
５．ユーザー環境変数の「Path」を選択
６．編集をクリック（※ダブルクリックでも編集画面が開ける）
７．新規ボタンをクリック
８．「C:\flutter\bin」と入力
９．OKをクリック
１０．「OK」→「OK」→「OK」と3回クリックしてすべてのウィンドウを閉じる。
９．flutter doctorで確認する
１．VS Codeを開いて、メニューバーの「・・・」をクリック
２．Terminalをクリック
３．New Terminalをクリック
４．VSCodeの中にターミナルが開く
５．「flutter doctor」と入力してエンターを押す
パスが正しくないエラーが出た場合
エラーが出た場合、VSCordを再起動して、再起動してみましょう。
再起動が出来たら9-1の手順をまたやってみてください。
モジュールのポップアップが出た場合
これはFlutterとは無関係のポップアップ。「Bonjour」というApple製のソフトが関係してて、気にしなくてOK。「表示しない」にチェックを入れてキャンセルで閉じちゃって大丈夫です。
「Android license status unknown」エラーが出た場合
[X] Android license status unknown → これは対応が必要が必要です。
ターミナルに以下を入力してEnter。
flutter doctor –android-licenses
flutter doctorでエラーが出た場合
エラー内容
「Android sdkmanager not found. Update to the latest Android SDK and ensure that the cmdline-tools areinstalled to resolve this.」
→Android SDKのcmdline-toolsが入ってないという内容
１．Android StudioToolsを開いたら、上のメニューからToolsをクリック
２．SDK Managerをクリック
３．SDK Toolsをクリック
４．Android SDK Command-line Toolsにチェックを入れる
５．「Apply」をクリック
６．「OK」をクリックしてインストール開始
7.Finishをクリックして完了
※Androidstudioは閉じてOK
８．再度VSCodeを再起動して改めてコマンドを入力
flutter doctor –android-licenses
９．もう一度flutter doctorを実行して確認
flutter doctor
１０．「Android license status unknown」の赤いメッセージが消えていることを確認できればOK
[X] Visual Studio だけ残ってるけど、これはWindowsアプリ開発用なのでAndroidアプリ開発には不要。無視してOK！
まとめ
この記事ではWindows環境にFlutter開発環境をVS Codeで構築する手順を解説しました。
インストールするものは以下の4つです。
- VS Code
- Flutter拡張機能（Dart Code）
- Git for Windows
- Flutter SDK
環境変数のPathにC:\flutter\binを追加して、flutter doctorで確認すれば環境構築は完了です。Android license status unknownのエラーが出た場合はAndroid StudioのSDK ManagerからCommand-line Toolsをインストールして、flutter doctor --android-licensesで対応できます。
次の記事ではエミュレーターの設定と実際にアプリを動かすところまで解説します。
コメント