Edited at

Flutter始めてみる 〜環境構築からDemoアプリ起動編〜

こんにちはひろにぃです。

タイトル通りやっていきます。


目次


  • 作業環境

  • Flutterのインストール

  • 依存ツールのチェック

  • Android Studioの設定

  • Demoアプリの起動


作業環境


  • macOS Mojave version 10.14.4

  • Flutter v1.5.4-hotfix.2 // Stable版

  • Android Studio 3.4

  • Android SDK version 28.0.3

  • Xcode 10.2.1


Flutterのインストール

ではインストールします。

公式URL https://flutter.dev/docs/get-started/install/macos

$ cd

$ git clone -b stable https://github.com/flutter/flutter.git
$ echo "export PATH=$PATH:$HOME/flutter/bin" >> ~/.zshrc
$ source ~/.zshrc

これでFlutterのインストール完了です。続いて、Flutterに必要なツールがインストールされているかチェックします。


依存ツールのチェック

$ flutter doctor

実行すると以下の画像のように依存ツールがインストールされているかの有無が表示されます。

問題がある場合は、指示に従って修正してください。

スクリーンショット 2019-05-11 21.42.07.png


[!] Android toolchain

ほかのエラーはbrewでインストールしろと書いてありますが、これだけはURL先を見ろと言われます。

Terminalに書いてある通りアップデートしてやりますが、つまずいたところがあるのでここにメモします。

# update

$ ~/Library/Android/sdk/tools/bin/sdkmanager --update

ERROR: JAVA_HOME is set to an invalid directory

上記を実行するとこのようなエラーが出るかもしれません。

その場合は、 $JAVA_HOME を有効なものに変更してください。

# 解決例の一つ

$ brew tap homebrew/cask-versions
$ brew cask install adoptopenjdk8

$ echo $JAVA_HOME
# /Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home

アップデート後、ライセンスを有効にしてやります。

$ flutter doctor --android-licenses


Android Studioの設定

FlutterとDartのプラグインをインストールします。

Configure -> Plugins と移動しMarketPlaceでFlutterとDartで検索して当該プラグインをインストールします。

その後、IDEを再起動します。

スクリーンショット 2019-05-12 23.08.22.png

するとAndroid Studioのトップ画面に Start a new Flutter Project が追加されています。

スクリーンショット 2019-05-12 23.09.43.png

それをクリックしプロジェクトを作成していきます。


Demoアプリの起動

まず、Flutter Application を選択します。

スクリーンショット 2019-05-12 23.12.17.png

名前と保存先をテキトーに決めて 次へ

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3135383332342f30643962643939332d313431382d303562652d643131652d3533653862303134613966622e706e67.png

今回はDefaultのDemoアプリを起動するのでなにもいじらずこのままで Finish します。

スクリーンショット 2019-05-12 23.13.15.png

プロジェクトが開いたら、画面右上にある <no devices> と書かれたところをクリックして ios, Android のエミュレーターを起動します。

スクリーンショット 2019-05-12 23.13.58.png

エミュレーターが起動したら下記のようになります。

buildターゲットを選択し、横にある横三角ボタンで実行してください。

スクリーンショット 2019-05-12 23.15.34.png

すると、以下のようになります。

スクリーンショット 2019-05-12 23.05.05.png

以上です。お疲れ様でした。