Flutterを入れてみた
アプリ開発環境としてflutterを入れてみました。インストール手順を解説したWebサイトはいろいろありますが、微妙に内容が最新の公式版とあってないような感じのところもあったので、念の為公式に沿って進めました。なお、環境はmacOSになります。（Apple Silicon版MacBook Pro）
Flutterのインストール
前提条件
Flutterをインストールするにはいくつかの必要なものがあります。その辺りの判定は手順の中で出てくるので後で触れますが、自分の環境の場合、以下はflutter以前にインストール済みでした。
- Xcode 13.2.1
- VSCode 1.64.2
Flutter SDKインストール
macOS環境なので、公式ドキュメントの「macOS install | Flutter」を参照します。
“System requirements"は確認してもらうとして、次の"Get the Flutter SDK"にあるリンクからflutter_macos_2.10.2-stable.zipをダウンロードします。
次の手順の例のように、developmentディレクトリを作り、そこにダウンロードしたZIPファイルを展開します。展開は結構時間がかかります。
% mkdir development
% cd !$
% unzip ~/Downloads/flutter_macos_2.10.2-stable.zip展開したdevelopment/flutter/binにパスを通せとのことなので、~/.zshrcを編集して左記のパスを追加し、"source ~/.zshrc"してパスを反映します。利用しているシェルに合わせてファイル名は適宜読み替えてください。
次に"Run flutter doctor"の項に進み、書かれている通りにコマンド実行すると、しばらくして以下の結果が出ました。
% flutter doctor
╔════════════════════════════════════════════════════════════════════════════╗
║ Welcome to Flutter! - https://flutter.dev ║
║ ║
║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
║ statistics and basic crash reports. This data is used to help improve ║
║ Flutter tools over time. ║
║ ║
║ Flutter tool analytics are not sent on the very first run. To disable ║
║ reporting, type 'flutter config --no-analytics'. To display the current ║
║ setting, type 'flutter config'. If you opt out of analytics, an opt-out ║
║ event will be sent, and then no further information will be sent by the ║
║ Flutter tool. ║
║ ║
║ By downloading the Flutter SDK, you agree to the Google Terms of Service. ║
║ Note: The Google Privacy Policy describes how data is handled in this ║
║ service. ║
║ ║
║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and ║
║ crash reports to Google. ║
║ ║
║ Read about data we send with crash reports: ║
║ https://flutter.dev/docs/reference/crash-reporting ║
║ ║
║ See Google's privacy policy: ║
║ https://policies.google.com/privacy ║
╚════════════════════════════════════════════════════════════════════════════╝
Running "flutter pub get" in flutter_tools... 5.4s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.10.2, on macOS 12.2.1 21D62 darwin-arm, locale
ja-JP)
[✗] Android toolchain - develop for Android devices
✗ Unable to locate Android SDK.
Install Android Studio from:
https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK
components.
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup
for detailed instructions).
If the Android SDK has been installed to a custom location, please use
`flutter config --android-sdk` to update to that location.
[!] Xcode - develop for iOS and macOS (Xcode 13.2.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 see
https://guides.cocoapods.org/using/getting-started.html#installation for
instructions.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.64.2)
[✓] Connected device (1 available)
! Error: Failed to prepare device for development. Please unlock and
reconnect the device. (code 806)
[✓] HTTP Host Availability
! Doctor found issues in 3 categories.Android関係はまだインストールしていないので良いですが、Xcodeで1件CocoaPodsがインストールされていないと出てきます。”https://guides.cocoapods.org/using/getting-started.html#installation”を見てインストールしろとのことなので、以下を実行。これもちょっと時間がかかります。
% sudo gem install cocoapods
... 中略 ...
Done installing documentation for concurrent-ruby, i18n, tzinfo, zeitwerk, activesupport, nap, fuzzy_match, httpclient, algoliasearch, ffi, ethon, typhoeus, netrc, public_suffix, addressable, cocoapods-core, claide, cocoapods-deintegrate, cocoapods-downloader, cocoapods-plugins, cocoapods-search, cocoapods-trunk, cocoapods-try, molinillo, atomos, colored2, nanaimo, rexml, xcodeproj, escape, fourflusher, gh_inspector, ruby-macho, cocoapods after 27 seconds
34 gems installedこれで再度実行して問題が解消していることを確認しました。
% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.10.2, on macOS 12.2.1 21D62 darwin-arm, locale
ja-JP)
[✗] Android toolchain - develop for Android devices
✗ Unable to locate Android SDK.
Install Android Studio from:
https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK
components.
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup
for detailed instructions).
If the Android SDK has been installed to a custom location, please use
`flutter config --android-sdk` to update to that location.
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.64.2)
[✓] Connected device (1 available)
! Error: Failed to prepare device for development. Please unlock and
reconnect the device. (code 806)
[✓] HTTP Host Availability
! Doctor found issues in 2 categories.次の"Downloading straight from GitHub instead of using an archive"は、上記のアーカイブを使わない手順なのでスキップします。
”Update your path”ですが、これも先ほどシェルの初期設定ファイルを書き換えたので確認だけしておきました。
% which flutter dart
/Users/woinary/development/flutter/bin/flutter
/Users/woinary/development/flutter/bin/dart特に問題なさそうです。
Flutterの設定
プラットフォーム・セットアップ
自分の場合はXcodeはインストール済みで、正常動作を確認済みです。”open -a simulator”を実行してシミュレータが起動することは確認しました。
Androidの方は手順に従って後回しにします。
簡単なFlutterアプリの作成と実行
次は"Create and run a simple Flutter app"です。
手順通りに"flutter create my_app"を実行します。
% flutter create my_app
Signing iOS app for device deployment using developer identity: "Apple
Development: XXXXXXXXXXXXXXXXXX"
Creating project my_app...
Running "flutter pub get" in my_app... 2,801ms
Wrote 96 files.
All done!
In order to run your application, type:
$ cd my_app
$ flutter run
Your application code is in my_app/lib/main.dart.メッセージにあるように、作成したアプリのフォルダに移動して実行してみると、何やら動き始めます。しばらく放っておきます。
% cd my_app
% flutter run
Launching lib/main.dart on iPhone 12 in debug mode...
Running Xcode build...
└─Compiling, linking and signing... 49.5s
Xcode build done. 130.0s
Syncing files to device iPhone 12... 189ms
Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
💪 Running with sound null safety 💪
An Observatory debugger and profiler on iPhone 12 is available at:
http://127.0.0.1:51868/2LnwzpJ-fGA=/
The Flutter DevTools debugger and profiler on iPhone 12 is available at:
http://127.0.0.1:9100?uri=http://127.0.0.1:51868/2LnwzpJ-fGA=/シミュレータで以下のアプリが動いていました。画面右下の＋ボタンを押すと、中央のカウンタが増えるようです。
なお、出力されている文中にあるURL2つをコピペして参照してみましたが、問題なく動いているようです。
続いて"Devply to iOS devices"で、実機へのインストールです。しかし、これはXcodeで試しているので省略します。
Android Studioインストール
次は"Install Android Studio"です。ダウンロードして、インストールしろの1行だけですが。Macの場合、Intelチップ版とApple Silicon版があるので、使っているMacに合わせて片方をダウンロードします。
インストール手順ですが、公式サイトにインストール方法のページがあります。Flutterと違って日本語になっています。セットアップ手順の動画まである親切設計です。さすがに、動画の中は英語ですけど。
時間がかかるので待ちます。
終わったら再度"flutter doctor"を実行と手順にあるので実行して、問題ないことを確認しました。
% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.10.2, on macOS 12.2.1 21D62 darwin-arm, locale
ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version
32.1.0-rc1)
✗ cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/macos#android-setup for
more details.
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.64.2)
[✓] Connected device (1 available)
[✓] HTTP Host Availability
! Doctor found issues in 1 category.Android StudioはOKになりましたけど、Android toolchainがNGです。sdkmanagerを実行せよとのことですが、はて、それはどこにあるのやら？
ここから色々調べて、javaをインストールしたり色々難航するのですが、的外れだったので省略します。正解は下記リンク先のように、Android StudioのPreferenceからAndroid SDKを選択して、SDK Toolsタブを開き、そこにあるAnrdoid SDK Command-line Tools(latest)にチェックを入れてApplyしてインストールすることでした。
https://zenn.dev/captain_blue/articles/flutter-android-licen...これをやってから"flutter doctor –android-licenses"を実行して、再度、"flutter doctor"を実行して、すべての問題が解消したことを確認できました。
% flutter doctor --android-licenses
All SDK package licenses accepted.======] 100% Computing updates...
% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.10.2, on macOS 12.2.1 21D62 darwin-arm, locale
ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version
32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.64.2)
[✓] Connected device (1 available)
[✓] HTTP Host Availability
• No issues found!
これでようやく、すべての作業が完了しました。
念の為補足
こちらの環境では色々と試行錯誤してしまったため、もしかすると、上の手順ではうまく動かないかもしれません。
ポイントとしては、flutter doctorの以下の警告は無視して、上記の手順を行えば大丈夫だろうと思います。
✗ cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`sdkmanager自体は”~//Library/Android/sdk/tools/bin”にありますが、これを実行しようとするとjavaがないとエラーが出ます。どうにかしようとhome brewでjavaを入れてもjavax/xml/bind/annotation/XmlSchemaクラスがないとエラーが出ます。これをなんとかしようと色々調べましたが、結局は上述の手順で行けるはずです。多分。