旧サイトから記事の移行中です

Visual Studio CodeでFlutterの新規プロジェクト作成から実行までの手順

VSCode(Visual Studio Code)で、Flutterプロジェクトを作成して、エミュレーターを立ち上げ、実行するまでの手順を紹介します。

VSCodeでのFlutter新規作成は、モバイル開発に特化しているAndroid Studioとはちょっと違うので戸惑うかもしれないけど、一度覚えてしまえばVSCodeの方が簡単で素早くできます。

目次

VSCode「Flutter New Project」の実行

STEP

メニュー:[表示]ー[コマンドパレット]をクリック

VSCodeを起動し、メニューバーから[表示]ー[コマンドパレット]を選びます。

VSCodeを起動し、メニューバーから[表示]ー[コマンドパレット]を選ぶ
STEP

「Flutter: New Project」を選ぶ

画面上部に表示されたコマンドパレットに「flutter」と入力すると、実行可能なFlutterコマンドがフィルタリングされて出てきます。

その中から「Flutter: New Project」を選択します。

VSCodeのコマンドパレットに「flutter」と入力して、Flutter関連のコマンドをフィルタリング表示
STEP

「Application」を選択

次に「Application」を選びます。

VSCodeのFlutterプロジェクトの作成:
コマンドパレットの「Flutter: New Project」で「Application」を選択する
STEP

プロジェクトの保存フォルダを選択

次は、プロジェクトを作るフォルダの選択です。

ダイアログが表示されたら、これから作成するFlutterプロジェクトを保存するフォルダを選んで、「Select a folder to create the project in」をクリックします。

VSCodeのFlutterプロジェクトの作成: プロジェクトを作成するフォルダを選ぶ
この段階で、プロジェクトの保存場所を決める
STEP

Flutterプロジェクトの作成

プロジェクトの作成場所を指定したら、画面上部の入力欄にプロジェクト名を入力して「Enter」キーを押します。

使える文字は「半角小文字の英数」と「_(半角アンダースコア)」です。「ー(ハイフン)」は使えません。

初期値は「Flutter_application_1」となっています。

VSCodeのFlutterプロジェクトの作成: プロジェクト名を入力する。 使用文字は「半角小文字のアルファベット」と「半角アンダースコア」を使う
ここで入力した名前でプロジェクトフォルダが作成される
STEP

完成

プロジェクト名を入力して「Enter」すると、VSCodeの画面には「main.dart」というソースコードが表示されます。

それと同時に、画面左側のエクスプローラーには、いま作成されたフォルダと、その他の最低限必要な設定ファイルなども作成されています。

これでめでたく、Flutterの新規プロジェクトの完成です。

VSCodeでFlutterプロジェクトを新規作成した直後のフォルダ構成と「main.dart」

Flutterのプログラムを初めて見たときは、いきなり沢山のコードが書かれていて少し面食らうかもしれません。

でも「//(スラッシュ2つ)」から始まっている行は全て、プログラムが何をしているのかを説明しているコメント行です。

コメントをちゃんと読むと、たいしたことないな、ってちょっと安心できますよww

エミュレーターの起動

開発したFlutterアプリを実行してスマホに表示するには、実際のスマホをパソコンに繋いで実機で見ることもできますが、まずはパソコン上に仮想のスマホ端末(エミュレーターまたはシミュレーターと呼ぶ)を作成して表示します。

ここでは、「Google Pixel 6a」で「APIレベル 33」の設定で作成したエミュレーターを選択してみます。

Visual Studio Code(VSCode)でエミュレーターを起動するには、画面右下「No Device」のクリック後に表示されるエミューレーターの一覧から目的のエミュレーターを選択する。
エミュレーターの起動前は「No Device」と表示されている

VSCode画面の右下にある「No Device」をクリックすると、画面上部に作成済みのエミュレーターの一覧が表示されるので、その中から選んで起動します。

しばらくすると、パソコンの画面上にスマホ画面が表示されました。

Androidエミュレーター「Google Pixel 6a」の画面
パソコン画面に表示されたエミュレーター。
アイコンのクリックもできる。

エミュレーターを起動すると、VSCodeの右下には選んだエミュレーターの名前が表示されます。

VSCodeでエミュレーターを起動すると、画面右下に、起動したエミュレーターの名前が表示される。

エミュレーター(シミュレーター)は、Android Studioの「Virtual Device Manager(バーチャル・デバイス・マネージャー)」で作成します。

スマホの種類やAPIレベルなどの設定を組み合わせて、複数作れます。

Andoroid Studioでエミュレーターを作るには「Visual Device Manager」をクリックする。
エミュレーターは、Android Studioで作成

Flutterプロジェクトの実行

では早速、作成されたFlutterのサンプルプロジェクトを実行して、エミュレーターでどんなふうに表示されるのか見てみましょう。

STEP
「デバッグなしで実行」

VSCode画面の右上のボタンから、「Run Without Debugging」をクリックで実行します。

VSCodeでFlutterプロジェクトを実行してエミュレータに表示するには、画面右上のデバッグボタンから「Run Without Debugging」を選択する
「Run Without Debugging」を選ぶと、エミュレーターに実行結果が表示される

すると、画面右下に「Flutter: Launching…」のメッセージが表示されるので、少し待ちます。

Flutterプロジェクトの実行時、画面右下に表示される「Flutter: Launching...」のメッセージ
STEP
エミュレータで操作する

しばらくすると、エミュレーターでFlutterプロジェクトが起動しました。

実際のスマホアプリと同じように動作します。

Flutterのエミュレーターに表示されたサンプルアプリで、「+」ボタンを押した回数がカウントアップされて実際に動作する様子。
「+」をクリックするたびに数字がカウントアップされるアプリ

修正したら「ホットリロード」

Flutterでは、ソースコード(プログラムコード)を修正したら、保存するだけでプログラムがリロード(ホットリロード)されて結果に反映されます。

ためにし、デモアプリに表示されている「Flutter Demo Home Page」を「Flutter デモのホームページ」に変更して「+S(ctrl+S)」で保存します。

すると、即効でスマホ画面も変更されました。

Flutterのソースコードを変更して保存する。
エミュレーターを起動したまま、修正して保存すると実行結果にすぐ反映される
VSCodeでFlutterプロジェクトを「ホットリロード」で更新するボタン
VSCode画面上部に表示されたホットリロードの実行ボタンは「いなずま」
よかったらシェアしてね!
  • URLをコピーしました!
目次