Flutterはじめる

【Flutter】VSCodeでプロジェクトを作成する

前提

  • Flutter導入済み
  • エディタ:Visual Studio Code(VSCode)
  • OS:macOS
  • バージョン
    • Flutter:2.2.3
    • VSCode:1.58.2

本記事の目標

Visual Studio Code(以下、VSCode)を使ってFlutterプロジェクトを作成する

本記事の流れ

  1. VSCodeに「Flutter」プラグインを導入
  2. プロジェクトの作成

VSCodeに「Flutter」プラグインを導入

得体の知れないプラグインを導入したくない人もいると思うので

なぜプラグインを導入する必要があるかを納得してもらおうかな

ということで導入前と導入後で比較してみます

プラグイン導入前

VSCodeを開いてください

VSCodeを開いたらキーボードの「command + Shift + P」を押してください

すると、上部に検索ウィンドウのようなものが降りてくるはずなので「flutter」と入力してみてください

Flutterプラグイン導入前にflutter検索

上画像のように「No matching commands」と表示されるはずです。

プラグイン導入後

プラグインを導入して「flutter」と検索すると下画像のようになります

Flutterプラグイン導入後にflutter検索

このようにインストール直後のVSCodeではプロジェクトを作成することはできませんが

「Flutter」プラグインを導入すればプロジェクトの作成ができるようになります

ということで導入していきましょう!

プラグイン導入

VSCodeを開いたら左側に「正方形のブロックが一個仲間外れにされたマーク」(下画像の矢印先)があると思うのでそれをクリックして

検索ウィンドウに「flutter」と入力してみてください

一番上に「Flutter」プラグイン(下画像の角丸長方形)が出てくるので「Install」をクリックしてください

Flutterプラグインの導入

これでインストールが始まります

インストールが完了したら「Flutter」プラグインの導入は完了です!

プロジェクトの作成

新規プロジェクトの作成は簡単です!

「Flutter」プラグインを導入してもらっていると思うので

「command + Shift + P」を押して「flutter」と検索してみてください

flutterプロジェクトの作成

先ほどと同じ画像ですが、一番上の「Flutter: New Application Project」をクリック!

すると新プロジェクトの保存先を決めるウィンドウが出てくるので

保存先を決めたら右下の「Select a folder to create the project in」をクリックしてください

(僕はFlutterProjectsフォルダを作ってそこにプロジェクトを作成しています!)

新プロジェクトを作成するフォルダー選択

保存先フォルダーを決めたあとは、プロジェクト名を決めます

新プロジェクト名を決める

上画像の場合だと「flutter_application_1」という名前のプロジェクトが作られます

名前を決めたら「Enter」を押してください〜

これでプロジェクト作成終了です!

先ほど指定したフォルダを見てみてください

新しいプロジェクトができているはずです!

作成プロジェクトの確認

  • この記事を書いた人

てるりんぴっく

-Flutterはじめる