【Flutter】VSCodeで環境構築|新規プロジェクト作成までの流れ

今回はVSCode(Visual Studio Code)を使ってFlutterアプリ開発をするための環境構築を行なっていきます。

VSCodeでアプリ開発をするための自前準備として「Flutter SDKのインストール」、「Xcodeのセットアップ」、「Android Studioのセットアップ」が必要となります。まだセットアップが済んでいない方はこちらの解説記事を先にお読みください。

\ 世界最大級のオンライン学習サービス /

目次

VSCodeのダウンロード

VSCode公式を開いたら「今すぐダウンロード」をクリック。

自分が使用しているデバイスのエディタをダウンロードします。(今回はMacでダウンロード)

ダウンロードが完了したら、VSCodeを開き「拡張機能」を追加していきます。

VSCodeに拡張機能を追加

左サイドバーから「4つの四角のアイコン(Extentions)」をクリックし、拡張機能「Fluter」を検索しインストールします。インストールが完了すると上画像のように「Uninstall」と表示されます。

同様に拡張機能「Dart」もインストールします。

開発効率化の拡張機能は好みで追加します。

Flutterの新規プロジェクトを作成

VSCodeのコマンドパレットをショートカットキーで開きます。(Mac:Cmd+Shift+P, Windows:Ctrl+Shift+P)

コマンドパレットで「flutter」と検索し「Flutter: New Project」を選択。

Applicationを選択。

Flutterプロジェクトを保存する場所を聞かれるので好きな場所を選びます。

「Project Name」でプロジェクト名を入力しEnterをクリック。

少しすると上画像尿にFlutterの新規プロジェクトが作成されます。

一緒に読みたい

参考

  • URLをコピーしました!
目次