前提
- Flutter導入済み
- エディタ：Visual Studio Code（VSCode）
- OS：macOS
- バージョン
- Flutter：2.2.3
- VSCode：1.58.2
本記事の目標
Visual Studio Code（以下、VSCode）を使ってFlutterプロジェクトを作成する
本記事の流れ
- VSCodeに「Flutter」プラグインを導入
- プロジェクトの作成
VSCodeに「Flutter」プラグインを導入
得体の知れないプラグインを導入したくない人もいると思うので
なぜプラグインを導入する必要があるかを納得してもらおうかな
ということで導入前と導入後で比較してみます
プラグイン導入前
VSCodeを開いてください
VSCodeを開いたらキーボードの「command + Shift + P」を押してください
すると、上部に検索ウィンドウのようなものが降りてくるはずなので「flutter」と入力してみてください
上画像のように「No matching commands」と表示されるはずです。
プラグイン導入後
プラグインを導入して「flutter」と検索すると下画像のようになります
このようにインストール直後のVSCodeではプロジェクトを作成することはできませんが
「Flutter」プラグインを導入すればプロジェクトの作成ができるようになります
ということで導入していきましょう！
プラグイン導入
VSCodeを開いたら左側に「正方形のブロックが一個仲間外れにされたマーク」（下画像の矢印先）があると思うのでそれをクリックして
検索ウィンドウに「flutter」と入力してみてください
一番上に「Flutter」プラグイン（下画像の角丸長方形）が出てくるので「Install」をクリックしてください
これでインストールが始まります
インストールが完了したら「Flutter」プラグインの導入は完了です！
プロジェクトの作成
新規プロジェクトの作成は簡単です！
「Flutter」プラグインを導入してもらっていると思うので
「command + Shift + P」を押して「flutter」と検索してみてください
先ほどと同じ画像ですが、一番上の「Flutter: New Application Project」をクリック！
すると新プロジェクトの保存先を決めるウィンドウが出てくるので
保存先を決めたら右下の「Select a folder to create the project in」をクリックしてください
（僕はFlutterProjectsフォルダを作ってそこにプロジェクトを作成しています！）
保存先フォルダーを決めたあとは、プロジェクト名を決めます
上画像の場合だと「flutter_application_1」という名前のプロジェクトが作られます
名前を決めたら「Enter」を押してください〜
これでプロジェクト作成終了です！
先ほど指定したフォルダを見てみてください
新しいプロジェクトができているはずです！
