More than 3 years have passed since last update.

Flutterをはじめる[環境設定〜立ち上げ]

Posted at 2021-01-01

概要

現在エンジニアの需要が高まりと同時にエンジニア転職のために某スクールに通って勉強をする人等が増えている。
そのような人が勉強する内容はwordpress等のweb制作であることが多い。このような技術は差別化を測るのが難しいのでモバイルアプリの開発をしようと考えた。
swiftやkotlinではなくFlutterを選択した理由は主に以下の3つである。

・iosとandroidの両方の開発ができる
・Google様がバックに居るためメンテナンスが定期的に行われる
・新しい技術なので参入できる可能性が高い

実行環境

・mac Catalina

インデックス

1.環境構築
 2.flutter doctorのエラー対処
 3.アプリの立ち上げ

1. 環境構築

環境構築は非常に簡単で以下のステップを踏むと完了する。

1.Flutter SDKのdownload
2.環境変数の設定
3.Android studioのdownload

以下で簡潔にそれぞれのステップについて解説する。

1.Flutter　SDKのdownload

以下の公式HPよりFlutter SDKをdownloadする。

Flutter公式

自分のosにあったものを選択する。

downloadしたファイルを解凍し開発用のFolderに格納しておく。

2.環境変数の設定

以下のように環境変数を設定する。
pwdにはステップ1でflutterを格納したFolderまでのpathを記述する。
bash_profileへは
vim ~/.bash_profile
で移動可能。

bash_profile

export PATH="$PATH:`pwd`/flutter/bin"

変数の設定が完了したら以下のコマンドを通るか確認する。

$ flutter doctor

このような出力になったら成功。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.5, on Mac OS X 10.15.7 19H2 darwin-x64, locale
    ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.

仮にこのコマンドが通らない場合はpathが間違っているので再度Folderのpathを確認する。

3.Android studioのdownload
flutterの公式ドキュメントからandroid studioに飛べるのでそこからandroid studioをdownloadする。
以下のように解答できたらApplication folderに移動させる。

諸々聞かれるのでデフォルトの解凍をしていく。

最終的にdownloadが完了すると以下のような画面になるのでConfigureのPreferenceからPluginsを選択し、その中のFlutterをdownloadする。

追加後、android studioをrestartさせると以下のようにCreate New Flutter Projectの項目が追加されているのでここを押せば新しいFlutterのアプリケーションが作成できる。

この後、諸々application nameやら聞かれるが適当でok。
最終的に以下のような画面になれば開発ができるようになる。

2. flutterのエラー対処

Terminalでflutter doctorとコマンドを叩くと以下のようなエラーを吐かれた。
この状態だと開発がスタートさせられないためそれぞれの解決策を記述する。

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        sudo gem install cocoapods
[!] Android Studio (version 4.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.46.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

✗ Android licenses not accepted. To resolve this, run: flutter doctor

flutter doctor --android-licensesを打てば解決すると書いてあるので以下のコマンドを叩く。

$ flutter doctor --android-licenses

諸々聞かれるので全てyで通す。

✗ CocoaPods not installed.

To install: sudo gem install cocoapods

とのことなので言われたとおりに以下のコマンドを叩く。

$ sudo gem install cocoapods

認証のためにpasswordを聞かれるのでmacのpasswordを入力して必要なgemをインストールする。

✗ Flutter plugin not installed; this adds Flutter specific functionality.

FlutterのPluginは入れているはずなのにinstallされていないことになっているらしい。

以下のgithubより解決策がわかった。
どうやら以下のコマンドを叩くと解決するらしい。(なんでかは不明だが・・・)

$ ln -s ~/Library/Application\ Support/Google/AndroidStudio4.1/plugins ~/Library/Application\ Support/AndroidStudio4.1

これにより同時にDartのエラーについても解消される。

対象のgithub
↓↓↓↓↓↓
https://github.com/flutter/flutter/issues/68429

✗ Flutter extension not installed; install from

これについては以下のurlからFlutterのプラグインを入れることで解決。

以上で全てのエラーが解決！！

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.5, on Mac OS X 10.15.7 19H2 darwin-x64, locale
    ja-JP)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 12.3)
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.46.1)
[✓] Connected device (1 available)

• No issues found!