LoginSignup
1
2

More than 3 years have passed since last update.

Flutter入門メモ:開発環境構築編

Posted at

経緯

久々に新規でモバイルアプリでも作ろうかと思い、
一人で趣味で作るレベルだと、Swift・Kotlinでそれぞれ構築するのは掛けられる工数的に現実感が無いので、
1ソース系を試してみようかと。

1ソース系は他にも選択肢がありますが、
React Nativeはなんか好みではないのと、Apache Cordovaは嫌な思い出しかないので、
流行ってるFlutterでやれないかなと、公式を見ながら少し試してみる事にしました。
今回は開発環境までのメモ。

確認環境

  • macOS Catalina
  • Essential Essential Phone PH-1 (Android 10)

前提

  • Homebrewがインストールされている。

※今回確認を実施したMacでは、XcodeやIntelliJ、VS Codeが予めインストールされています。

手順

Flutterのインストール。

$ brew install flutter
$ flutter --version
Flutter 1.22.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 1aafb3a8b9 (2 weeks ago) • 2020-11-13 09:59:28 -0800
Engine • revision 2c956a31c0
Tools • Dart 2.10.4

設定の確認と解消

設定の確認をすると色々と怒られるので、一つ一つ確認。

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

[!] Android toolchain - develop for Android devices (Android SDK version 27.0.3)
    ✗ Flutter requires Android SDK 29 and the Android BuildTools 28.0.3
      To update the Android SDK visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions.
    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] Xcode - develop for iOS and macOS (Xcode 12.1)
    ✗ 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 (not installed)
[!] IntelliJ IDEA Ultimate Edition (version 2020.2.4)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.51.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 6 categories.

Android Studio (not installed)

Android Studioのインストール。

$ brew install android-studio

設定の確認をすると下記も必要な様子。

[!] Android Studio (version 4.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
  1. Android Studioを起動し、Preferences->Pluginsを選択する。
  2. FlutterとDartをインストールする。

IntelliJ IDEA Ultimate Edition (version 2020.2.4)

  1. IntelliJを起動し、Preferences->Pluginsを選択する。
  2. FlutterとDartをインストールする。

VS Code (version 1.51.1)

extensionからFlutterをインストールする。

Android toolchain - develop for Android devices (Android SDK version 27.0.3)

Android SDK 29及びAndroid BuildTools 28.0.3以降のインストール。

  1. Android Studioを起動し、Configure->SDK Managerを選択する。
  2. Android SDKからAndroid 10.0を選択し、Apply。
  3. SDK ToolsからAndroid SDK build-Toolsを選択し、Apply。

ライセンスの許可を実行し、問題なければ全てyで進める。

$ flutter doctor --android-licenses

Xcode - develop for iOS and macOS (Xcode 12.1)

$ gem update --system
$ sudo gem install cocoapods

Connected device

  1. About phoneからBuild numberを連打して開発者向けオプションを開放し、
    System->Advanced->Developer optionsを選択、
    Developer optionsとUSB debuggingをオンにする。
  2. 端末をつなげる。

設定の再確認

Android Studioのpluginに関してはエラーが出たままだが、

下記によると、使用上は問題なさそう。
https://github.com/flutter/flutter/issues/67986#issuecomment-715452201

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

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)

[✓] Xcode - develop for iOS and macOS (Xcode 12.1)
[!] Android Studio (version 4.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] IntelliJ IDEA Ultimate Edition (version 2020.2.4)
[✓] VS Code (version 1.51.1)
[✓] Connected device (1 available)

! Doctor found issues in 1 category.

感想

doctorの指示に従って対応すれば良いのでだいぶ楽になりましたね。
はるか昔、Android1.6や2.1くらいの時は結構大変だった記憶があったような…。
また、環境構築時にAndroid Studio 3.1の残骸を見て、
Androidアプリの作成は何年も触ってもいないんだなという時間の流れを感じました。

参考

1
2
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
1
2