【Flutter】シミュレーターで最初のアプリを起動してみる【Mac】

先日、ベータ版がリリースされたとかで、急に話題になっていたGoogleのFlutter。言語はDartだそうで、全く触ったことないです。iOSのアプリも作れるらしく、面白そうなのでテンプレートのアプリをiPhoneのシミュレータで起動させるところまでやってみました。Xcodeはインストールされている前提です。ココに来る人は入ってますよね。

システム要件

先ずは以下の要件を満たしている必要があるみたいですね。

  • OS:macOS(64bit) – 僕がHigh Sierraでやりました
  • ディスクの空き容量:700MB(XcodeとかAndroid Studioの容量は含まないそうです)
  • 以下のツールがインストールされていること
    • bash
    • mkdir
    • rm
    • git
    • curl
    • unzip
    • which

git以外は標準で入ってるんじゃないでしょうか・・・たしか・・・gitはHomebrewでインストール出来ますね。ん・・gitも入ってましたっけ?
とりあえず、入っているかどうかはTerminalを立ち上げて、以下のように確認出来ると思います。パスが返ってくればインストールされています。

$ which git
/usr/local/bin/git

Flutterをクローン

gitのリポジトリからFlutterをクローンします。Terminalを開き、Flutterをインストールしたい場所へ移動します。そしたらそこへFlutterをコピーします。

$ cd ~/hoge
$ git clone -b beta https://github.com/flutter/flutter.git
Cloning into 'flutter'...
・
・
・

依存関係の確認

何やら依存関係等の診断アプリがあるらしく、以下のコマンドを実行すると、チェックしてくれるみたいです。が、先ずはFlutterのbinにパスを通してやる必要があります。

$ export PATH=`インストールパス`/flutter/bin:$PATH

通したら、以下を実行します。

$ flutter doctor
Downloading Dart SDK from Flutter engine・・・
・
・
・
[!] iOS toolchain - develop for iOS devices (Xcode 9.2)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
・
・
・
! Doctor found issues in 3 categories.

上記のように、3つほど足りてないものが表示されると思います。

依存モジュールのインストール

と、その前に、Flutterがちゃんと動いたのでパスを恒久的に反映扠せましょう。以下を~/.bash_profile等に追記してしまいましょう。

$ export PATH=`インストールパス`/flutter/bin:$PATH

即時に反映させてい場合は、さらに以下を実行しましょう。まあ、今回は何も変わらないと思いますが・・・

$ source ~/.bash_profile

で、本題の依存モジュールのインストールを行います。Flutter Doctorが教えてくれたように、以下のコマンドを実行します。Homebrewはインストールされている前提です。

$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller
$ brew install ios-deploy
$ # cocoapodsも入っていない方は以下も実行して下さい。
$ brew install cocoapods
$ pod setup

テンプレートモジュールの起動

それでは新規にアプリを作成します。アプリを作成するディレクトリに移動し、アプリの作成コマンドを実行します。プロンプトが返ってきたら、アプリのディレクトリへ移動します。

$ cd ~/page
$ flutter create myapp
Creating project myapp...
・
・
・
$ cd myapp

最後に、以下のコマンドを実行すると、シミュレータでアプリが起動されると思います。どうでしょう? 起動しましたでしょうか? 右下のフローティングしている「+」ボタンをタップすると、画面中央の数値がインクリメントされますでしょうか? 後は自分の作りたいアプリに作り変えていく感じですかね・・・Dartとか触れたことないので、おいおい少しずつ触ってみようと思います。

$ flutter run

久しぶりの更新でしたが、今日はこんな感じです。

関連記事

UIBarButtonItemのサイズがiOS11でおかしくなった際の対処法

【Objective-C】'void (^ _Nonnull __strong)...

【Xcode】ショートカット集

Invalid Binary?・・・PhotoLibraryへのアクセスは説明書...

【Swift】NSMutableArrayのremoveObject:をSwif...

【Google Home】Google Homeにテキストを読み上げさせたい