8
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Flutter環境構築 - 2(Xcode・iOSシミュレーターセットアップ編)

Last updated at Posted at 2020-04-05

#はじめに
今回はFlutter環境構築第2弾 「Xcode・iOSシミュレーターセットアップ編」です!
Flutter SDKのインストール・Flutterコマンドのセットアップがお済みでない方は、
先に「Flutter SDKインストール編」をご覧ください。

Flutter環境構築シリーズ
Flutter環境構築 - 1(Flutter SDKインストール編)
Flutter環境構築 - 3(Android Studio・Androidエミュレータセットアップ編)
Flutter環境構築 - 4(VSCodeセットアップ編)

#「iOSシミュレーター実行編」でやること
本編では以下の項目を行います。

  • Xcodeのインストール
  • iOSシミュレーターのセットアップ
  • Flutterアプリを作成し実行する

では次項目より実際に作業していきます。

#Xcodeをインストールする

1.App StoreよりXcodeをインストール

App StoreにてXcodeを検索し、インストールします。

すでにインストールされている方はアップデートがないかを確認し、
最新バージョンでなければアップデートする方が吉だと思います。
※ Flutter公式サイトより引用 ※
[ 最新の安定バージョンより古いバージョンでも動作する可能性がありますが、Flutter開発にはお勧めできません。古いバージョンのXcodeを使用してビットコードをターゲットにすることはサポートされておらず、機能しない可能性があります。 ]
スクリーンショット 2020-03-30 8.43.19.png

2.最新Ver.のXcodeを使用するようにXcodeコマンドラインツールを構成

ターミナルにて以下を実行します。
パスワードを求められるので入力します。

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

3.Xcodeライセンスの確認

以下を実行し内容を確認します。
spaceキーで下にスクロールすることができます。
qキーでページを抜けることができます。

sudo xcodebuild -license

ページを抜けた後、以下を入力することでライセンスに同意します。

agree

#iOSシミュレーターのセットアップ

1.iOSシミュレーターを実行

ターミナルにて以下を実行します。

open -a Simulator

するとiOSシミュレーターが立ち上がります。
スクリーンショット 2020-04-05 16.51.22.png

#Flutterアプリを作成し実行する
シンプルなFlutterアプリを作成し、実行していきます。

1.ディレクトリ作成

今回のサンプルアプリ用にディレクトリを作成します。
各々好きな名前で構いません。

mkdir 好きな名前

2.作成したディレクトリへ移動

cd 先ほど作成したディレクトリ名

3.Flutterアプリ作成

以下コマンドを入力すると、
先ほど作成したディレクトリの中に
my_appというサンプルのFlutterアプリが作成されます。

flutter create my_app

4.作成したmy_appへ移動

cd my_app

5.iOSシミュレーターでmy_appを実行

iOSシミュレーターを起動した状態で以下を実行します。

flutter run

するとiOSシミュレーター内でmy_appが実行されます。
右下の+ボタンを押すと数字がカウントアップされます。
ターミナルでqキーを入力するとアプリを終了できます。
スクリーンショット 2020-04-05 17.23.05.png
これでシンプルなFlutterアプリの作成・実行ができました!

#最後に
以上で「Xcode・iOSシミュレーターセットアップ編」は終了となります。お疲れさまでした。
実機にてアプリの確認をしたい場合はFlutter公式サイト
「Deploy to iOS devices」欄を参考にしてみてください。

最後までご覧くださりありがとうございました。

Flutter環境構築シリーズ
Flutter環境構築 - 1(Flutter SDKインストール編)
Flutter環境構築 - 3(Android Studio・Androidエミュレータセットアップ編)
Flutter環境構築 - 4(VSCodeセットアップ編)

参考サイト[Flutter公式サイト]

8
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?