LoginSignup
6
4

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 5 years have passed since last update.

@uehatsu(Hatsuhito UENO)

Flutter 1.2.x 環境をmacOS上に構築する

Last updated at Posted at 2019-03-30

なぜこの文章を書いているか？

今までWebアプリばかり作っていたのですが、そろそろスマホアプリも作ってみたいと考え、React Native(もしくはEXPO)やNativeScript Vueなどつまみ食いしていたのですが、どうもしっくりこない。どうせなら今まで触ったことの無い言語でこれからも使えそうなモノ(Dart)を勉強しながらできるのが良いなとFlutterにたどり着きました。
基本的には本家サイトの通りにやっていけば良いのですが、折角なのでメモとして残しておこうと思います。
手順は自分がローカルで行った順番なので、本家サイトとは多少順番が前後します。

環境（2019/03/30現在）

  • macOS Mojave (10.14.4)
  • Xcode 10.2
  • Andoroid Studio 3.3.2
  • Flutter 1.2.1

Xcodeをインストールする

Xcodeがインストール済みならスキップしてください

  1. 「App Store」アプリを起動し、左うえの検索窓に"xcode"と入力しエンターキーを入れ検索
  2. 検索結果一覧の中の「Xcode」を「入手」＞「インストール」でインストールを実行（しばらくかかります）
  3. 「Xcode」を起動し、「License Agreement」の内容を確認した上で「Agree」をクリック、パスワードを要求されるので入力し「OK」をクリック、諸々のインストールがさらに始まります
  4. 「メニュー」＞「Xcode」＞「Open Developer Tool」＞「Simulator」でシミュレーターが起動する事を確認します

Homebrewをインストール

インストール

ターミナルを開き（方法は色々ありますが割愛）、以下を実行

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  • Press RETURN to continue or any other key to abortと表示されたら「ENTER」キーを押します
  • パスワードを聞かれるのでパスワードを入力し「ENTER」キーを押します
  • インストールが終わったら以下を実行し正しくインストールされているか確認します

インストールを確認

以下を実行し、Your system is ready to brew.と出ていればOKです。出なかった場合は画面の指示に従って修正してください

$ brew doctor

Android Studioをインストールする

anyenv, jEnvをインストール

$ brew install anyenv
$ anyenv install --init
$ echo 'eval "$(anyenv init -)"' >> ~/.bash_profile
$ exec $SHELL -l
$ anyenv install jenv
$ exec $SHELL -l

homebrewでversionsをtapする

$ brew tap caskroom/versions

JDK1.8(java8)をインストールする

$ brew search java
（前略）
java8
（後略）
$ brew cask install java8

JDK1.8をjEnvにaddする

$ jenv add $(/usr/libexec/java_home -v 1.8)
oracle64-1.8.0.202 added
1.8.0.202 added
1.8 added
$ jenv versions
* system (set by /Users/user/.anyenv/envs/jenv/version)
  1.8
  1.8.202
  oracle64-1.8.0.202
$ jenv global 1.8
$ java -version
java version "1.8.0_202"
Java(TM) SE Runtime Environment (build 1.8.0_202-b08)
Java HomeSpot(TM) 64-Bit Server VM (build 25.202-b08, mixed mode)

Homebrewを使ってAndroid Studioをインストール

$ brew cask install android-studio
  • アプリケーションフォルダの中の「Android Studio」を起動
  • "Welcome"画面で「Next」ボタンをクリック
  • "Install Type"画面で「Stuandard」を選択し「Next」ボタンをクリック
  • "Select UI Theme"画面では好きな方を選択し「Next」ボタンをクリック
  • "Verify Settings"画面で内容を確認し「Finish」ボタンをクリック
  • ダウンロードが始まりますのでしばらく待ちます
  • 途中"Intel HAXM"のインストール時に「機能拡張がブロックされました」と出るので「"セキュリティ"環境設定を開く」ボタンをクリックし「開発元"Intel Corporation Apps"のシステムソフトウェアの読み込みがブロックされました。」と書かれている横の「許可」ボタンをクリックします。

.bash_profileにANDROID_HOMEを設定

$ echo 'ANDROID_HOME=$HOME/Library/Android/sdk' >> ~/.bash_profile
$ exec $SHELL -l

Flutterをインストールする

ダウンロード

  1. まずは本家サイトでmacOSを選びます
  2. zipファイルをダウンロードします（2019/03/30現在 flutter_macos_v1.2.1-stable.zip）。ダウンロード先は~/Downloads/とします

インストール

ターミナルを開き、以下を実行

$ mkdir ~/development
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_v1.2.1-stable.zip

もしくは、Safariでダウンロードしてzipファイルが展開済みであれば以下

$ mkdir ~/development
$ mv ~/Downloads/flutter ~/development/.

.bash_profileにPATHを追加

$ echo 'PATH=$PATH:~/development/flutter/bin' >> ~/.bash_profile
$ exec $SHELL -l

flutter doctorを実行

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.2.1, on Mac OS X 10.14.4 18E226, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[✗] iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS
      development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with
      Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that
        responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work
        on iOS.
        For more info, see https://flutter.io/platform-plugins
      To install:
        brew install cocoapods
        pod setup
[!] Android Studio (version 3.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.

問題の修正

いくつか問題があるので続いて一つずつ修正していきます

Android Studioのライセンスを読み、了解（"y"を入力して"ENTER"）します

$ flutter doctor --android-licenses

xcodeのインストールを完了します

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

libimobiledevice, ideviceinstaller, ios-deploy, CocoaPodsをインストールします

$ brew update
$ brew install --HEAD usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller
$ brew install ios-deploy
$ brew install cocoapods
$ pod setup

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

  • Android Studioが起動していなければ起動します
  • Welcome画面の右下の歯車アイコンの「Configure」から「Plugins」を選びクリックします
  • 下段の「Browse repositories...」をクリックします
  • 左うえの検索窓にflutterと入力し一覧からFlutterを選択します
  • 右側に「Install」ボタンがあるのでクリックします
  • Third-party Plugins Privacy Noteを読んで「Accept」ボタンをクリックします
  • Plugin Dependencies Detectedと出て「Dart」プラグインのインストールを薦められるので「Yes」をクリックします
  • 先ほどの「Install」ボタンが「Restart Android Studio」となっているのでクリック
  • Pluginsウィンドウで「OK」をクリック
  • IDE and Plugin Updatesのモーダルウィンドウは「Restart」をクリックし再起動します

iOSシミュレータを起動するか、iPhoneなどの実機をUSB接続します

この状態でもう一度flutter doctorを実行します

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.2.1, on Mac OS X 10.14.4 18E226, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.2)
[✓] Android Studio (version 3.3)
[✓] Connected device (1 available)

• No issues found!

オールグリーンになりました :100:

テストアプリを実行してみる

プロジェクトを作成する

  1. Android StudioにFlutterプラグインを入れる事でWelcome画面に追加された「Start a new Flutter Project」というメニューをクリックします
  2. "Flutter Application"を選択し（デフォルトで選択されているはずです）「Next」ボタンをクリックします
  3. "Project name"など必要な内容を編集して「Next」ボタンをクリックします
  4. "Company domain"は自分で持っているドメイン名を入力します。デフォルトでは"example.com"となっています
  5. 「Finish」ボタンをクリックします

iOSシミュレーターを起動する

  1. 上段右側のアイコンが並んでいる中に「main.dart」があり、先ほどの手順でiOSシミュレーターを起動していれば、その左に「iPhone XR」等と表示があるのを確認します
  2. なければ、その「main.dart」と書かれているプルダウンの左のプルダウンメニューから「Open iOS Simulator」を選択しiOSシミュレーターを起動します

サンプルアプリの実行

  1. iOSシミュレーターが起動できたら、アイコンの列にある実行ボタン（緑色の▶）をクリックし実行します
  2. iOSシミュレーターに自動的にFlutterアプリがインストールされ、自動起動し「Flutter Demo Home Page」とタイトルに書かれた画面が表示されます
  3. アプリの右下の丸にプラスマークのアイコンをタップ（クリック）すると、中央の数字がカウントアップされます

Dartを少しだけいじってみる（Hot reloadの実演）

  1. iOSシミュレーターとAndroid Studioが並び、どちらかで一方を隠さないように調整します
  2. iOSシミュレーターが見えている状態で"main.dart"ファイルの23行目あたりを'Flutter Demo Home Page'から'ホームページ'に書き換え、"main.dart"を保存します
  3. 保存した次の瞬間iOSシミュレーター上のアプリのタイトルが「ホームページ」に書き換わるのが確認出来ます

終わりに

ひとまずこれでFlutterの開発環境が一通り揃いました。実機でテストするにはもう一手間必要なのですが、今回はまずmacOS上に開発環境を構築する事だけに絞ってみました。この環境を使って色々とアプリを作成していくつもりです :laughing:

参考サイト

6
4
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
Sign upLogin
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?