※本記事で使用している環境
＜パソコン＞
機種：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）
前回は、Androidアプリの開発環境を整える方法の解説を行いました。
今回は、VS Code をエディターとして使用する方法の解説を行います。
記事を執筆するにあたって、以下の書籍を参考にしました。
おすすめ書籍
公式ドキュメントの該当箇所
主に、赤枠で囲まれた部分「Test drive」を扱います。
内容としては、Visual Studio Code をエディターとして設定することです。
サンプルアプリを作る
サンプルアプリを作っていきます。
拡張機能のインストール
1： アクティビティバーの 拡張機能 をクリック
2： 検索ボックスに「flutter」と入力
3： Flutter 拡張機能にある インストール をクリック
Flutter プロジェクトの作成
コマンドパレットを開き、
flutter: New Projectと入力します。
コマンドパレットの開き方
Mac command ＋ shift ＋ P
Win Ctrl ＋ Shift ＋ P
次に、
Applicationと入力します。
自分のホームフォルダか、以前作成したdevelopmentもしくは、その配下のフォルダを選択します。
プロジェクトの名前を、設定します。
今回は、デフォルトで入力されている
flutter_application_1としました。
このmain.dartにプログラムを書き込んで、アプリを作っていきます。
アプリを仮想デバイスで実行してみる
作ったアプリを仮想デバイス上で実行してみます。
iOS シミュレーターと連携する手順
ターミナルに以下のコードを入力し、iOS シミュレーターを起動します。
open -a Simulator
コマンドパレットを開き、
Flutter: Select Deviceと入力
アプリを実行する
1: メニューバーにある 実行 をクリック
2: デバッグを開始 をクリック
Flutter のホットリロード機能を使う
Flutter には、ホットリロードという機能があります。
プログラムを変更した際に、すぐにシミュレーター（もしくは、エミュレーター）で確認できる機能
実際に、ホットリロードを試していきます。
'You have pushed the button this many times:',と書かれている部分を、以下に変更します。
'これからアプリ開発を始めます',
ファイルを保存すると、ホットリロードの機能でシミュレーターの画面が切り替わります。
ファイルを保存する方法
Mac command ＋ s
Win Ctrl ＋ S
これにて、VS Code をエディターとして使用する方法の解説を終わります。
次は、Dart の概要についての解説を行います。
コメント