【Flutter】XcodeとiOS Simulatorのセットアップ方法(MacOS)

Flutterの環境構築iOS Simulator
この記事がおすすめな人
  • 既にMacOSでFlutterのSDKのインストールを終えている
  • Android StudioでFlutter/Dartのプラグインのインストールを終えている
  • Xcodeをインストール・セットアップしたい
  • FlutterでiOS Simulatorをセットアップしたい

\ MacOSでのFlutterの環境構築が全て分かる解説記事はこちら /

How to Install and Setup Flutter for App Development on Mac – Part 4

世界的に有名なプログラマー、Angela YuさんのFlutterでXcodeのセットアップ方法の解説動画がこちらです。(iOS Simulatorのセットアップ動画は記事の後半にあります。)

英語が分からない方のために動画の各パートの説明を日本語でまとめているので、動画と解説文の両方をご覧になってみてください。

スポンサーリンク

Xcodeのインストール

手順

  1. App Storeで「Xcode」をインストールします。(0秒) 

Install Xcode」ページを開き、「Mac App Store」> 「View in Mac App Store」>「Open App Store」の順にクリックすると、App Storeの「Xcode」のインストール画面が開くのでMacにXcodeをインストールしてください。また、App Storeを自分で開いて「Xcode」と検索してインストールしても大丈夫です。

Xcode install1
Xcode install2
Xcode install3
Xcode install4
Xcodeのインストールがまだの方は「UPDATE」と表示されてる箇所が「GET」のはずです。

これでXcodeのインストールは完了です。

Xcodeのセットアップ

手順

  1. 「Xcode」をApp Storeでインストールして初めて開くと、いくつかライセンスの確認事項が表示されるので「Yes」と全て答えていきます。(動画ではこのパートは省略されています)
  2. 「terminal」を開き、下記のコマンドを入力し「Enter」をクリックします。(1分20秒)
 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
  1. 上記のコマンドを入力すると「Password:」と出力されるので、Macでログインするときに使うPasswordを入力し「Enter」をクリックします。(1分43秒)
Xcode セットアップ
  1. 「terminal」と「Xcode」を一度終了します。

これでXcodeのセットアップは完了です。

iOS Simulatorのセットアップ

How to Install and Setup Flutter for App Development on Mac – Part 5

Angela YuさんによるiOS Simulatorのセットアップ方法の解説動画がこちらです。

「Xcode」をインストールした際にiOSの「Simulator」も同時にインストールされているので、Xcodeのライセンスの確認事項に同意、セットアップが完了していれば「Simulator」を使用できます。

手順

  1. Spotlight Search(メニューバーの右側にある🔍)などで「Simulator」を開くと、iOS Simulatorが自動で表示されます。(14秒)
Simulator setup1
Simulator setup2

また、iOS SimulatorのiPhoneのデバイスを変更したい場合は「Simulator」のメニューバーで「File」>「Open Simulator」>「iOS」を順にクリックして好きなデバイスに変更できます。

Simulator setup3
  1. Flutterで開発中のアプリをiOS Simulatorで起動させるには、下の画像のように「Simulator」で起動しているデバイスを選択し、「▶️マーク」をクリックします。
Simulator setup4
Simulator setup5
  1. Flutterの「Console」で「Xcode build done.」と表示されれば無事、iOS SimulatorでUIが反映されます。
Simulator setup6
Simulator setup7

これでiOS Simulatorのセットアップは完了です。

関連記事

タイトルとURLをコピーしました