未熟学生エンジニアのブログ

TetsuFeの個人開発ブログ

TetsuFeはテツエフイー と読みます。FlutterやWeb周り全般、チーム開発について語るブログ

Flutterメモ 1. 開発環境の構築(iOS)

flutterの環境構築

Android版の記事もあります。

swiftfe0.hatenablog.com

この記事を読んでできること

  • flutter sdkをインストールできる
  • flutter コマンドが使える様になる
  • Xcodeツールのインストール
  • コマンドからのflutterアプリの作成
  • flutterアプリをiOS Simulatorで動かす

環境

flutter sdkのインストール

https://flutter.io/setup-macos/ これに従ってインストールしました。

現在は少し変わっている様なので、こちらを参照した方が良いかもしれません。 MacOS install - Flutter

まずは上のサイトから、sdkをダウンロードしましょう。Downloads以下にダウンロードされるはず。

/Users/xxx/development に移動させます。ターミナルを開きましょう。

$ mkdir /Users/xxx/development
$ cd /Users/xxx/development
$ mv /Users/xxx/Downloads/flutter .

flutter コマンドを使える様に、パスを通します。

~/.bash_profile

#flutter
export PATH=/Users/xxx/development/flutter/bin:$PATH
$ source ~/.bash_profile

flutter docker

flutter doctorというコマンドで、うまくインストールできているか確認することができます。

$ flutter doctor

こんな感じならOKです。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel dev, v1.2.1, on Mac OS X 10.14.4 18E194d, locale ja-JP)

xcode用ツールのインストール

$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller
$ brew install ios-deploy
$ brew install cocoapods # cocoapodsをインストール済みの場合は、brew upgrade cocoapods
$ pod setup

flutter doctorで確認します。開発環境がちゃんと整っているか確認できるのは嬉しいですね。

$ flutter doctor

こんな感じならOKです。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel dev, v1.2.1, on Mac OS X 10.14.4 18E194d, locale ja-JP)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.2.1)

プロジェクト(アプリ)の作成・起動

$ flutter create first_sample

出力

(前略)

All done! In order to run your application, type:

  $ cd first_sample
  $ flutter run

Your main program file is lib/main.dart in the first_sample directory.

上のガイドにしたがって、以下のようにしてFlutterアプリを起動します。

$ cd first_sample
$ flutter run
Launching lib/main.dart on iPhone 8 in debug mode...
Starting Xcode build...                                          
 ├─Assembling Flutter resources...                    2.0s
 
 └─Compiling, linking and signing...                 13.2s
 
Xcode build done.                                           18.0s
Syncing files to device iPhone 8...                          6.4s

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on iPhone 8 is available at: http://127.0.0.1:58361/
For a more detailed help message, press "h". To quit, press "q".

ここまできたら、勝手にiOSシミュレータが起動して、サンプルアプリが起動します!(iOSシミュレータをインストールしていない人は、Xcodeからインストールしましょう)

f:id:swiftfe:20190422130201p:plain

ターミナル上で qを押すと、終了します。