【Flutter】プロジェクト作成から仮想デバイスでの実行までの手順

【動作環境】

<パソコン>
機種:MacBook Air(13inch)
OS:macOS Sonoma(ver.14.5)
チップ:Apple M3
シェル:zsh

<ソフトウェア>
・Flutter(ver.3.22.3)
・Xcode(ver.15.4)
・CocoaPods(ver.1.15.2)
・Android Studio(ver.2024.1)
・Visual Studio Code(ver.1.92.0)

今回は、Flutterのプロジェクト作成から仮想デバイスでの実行までの手順ついて解説します。

目次

Flutterプロジェクトの作成手順

STEP
[Visual Studio Code]を起動する
説明画像1
STEP
コマンドパレットを開く

以下のキーを押して、コマンドパレットを開きます。

Mac command + shift + P
Win Ctrl + Shift + P

説明画像2
STEP
「Flutter: New Project」と入力する
説明画像3
STEP
「Application」と入力する
説明画像4
STEP
Flutterプロジェクトを作成するフォルダを選択する
説明画像5

1: 保存先のフォルダを選択します。

2: [Select a folder to create the project in]をクリックします。

今回は、shima というホームフォルダを選びました。

STEP
プロジェクトの名前をつける
説明画像6

デフォルトでは、「flutter_application_1」と入力されています。

プロジェクトに合わせて、適宜変更しましょう。

プログラムを仮想デバイスで実行する

iOSシミュレーターと連携する手順

STEP
iOSシミュレーターを起動する

ターミナルに、以下のコマンドを入力します。

open -a Simulator

すると、以下のようにiOSシミュレーターが起動します。

説明画像7
説明画像8
STEP
コマンドパレットを開く
説明画像9
STEP
「Flutter: Select Device」と入力する
説明画像10
STEP
起動したiOSシミュレーターを選択する
説明画像11

作成したアプリを実行する

STEP
デバッグを行う
説明画像12

1: メニューバーにある[実行]をクリックします。

2: [デバッグを開始]をクリックします。

すると、以下のように、作成したアプリがiOSシミュレーター上で動くようになります。

説明画像13

これにて、Flutterのプロジェクト作成から仮想デバイスでの実行までの手順ついての解説を終わります。

次は、画面構築の基本についてです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

shimaのアバター shima ライター

IT企業のエンジニア。
ITやソフトウェアに関することをわかりやすくまとめ、多くの人にそれらを知ってもらおうと活動しています。
ご質問やご要望、お仕事依頼がございましたらお問合せフォームよりお願いいたします。

コメント

コメントする

CAPTCHA



reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

目次