M1 MacにFlutter環境を構築する
株式会社tolvの宍戸陽介です。
今回は、ちょっと気が向いたのでFlutterの環境をM1 Macに構築してみようと思ったので、構築メモを残しつつ構築していきたいと思います。
Rosetta2のインストール
公式のドキュメントを見ると、M1環境で動くみたいですが、一部まだRosetta2を使用しているようなので、Rosetta2をインストールします。
Developing with Flutter on Apple Silicon
$ sudo softwareupdate --install-rosetta --agree-to-license
.
.
.
Install of Rosetta 2 finished successfully ← これが表示されれば完了Flutterのインストール
下記よりFlutter本体をダウンロードします。
基本的には公式の通りに進めていきます。
Xcodeのインストールが推奨されているみたいなので、事前にXcodeのインストールを行なっておきましょう。
Flutter_macos_2.5.3-stable.zip からダウンロードします。
※ バージョンは変わってる可能性があります。
今回は公式の通りホームディレクトリにdevelopmentフォルダを作成してインストールを行なっていきます。
$ mkdir ~/development
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_2.5.3-stable.zip~/development/flutter/bin にpathを通すために、~/.zshrc に下記を記載します。内容は公式とはちょっと違って直接binまでのパスを記載しています。
パスに関しては、それぞれのflutterを配置した場所によって変更してください。
export PATH="$PATH:$HOME/development/flutter/bin"コマンドで、flutterが正常にインストールされているか確認します。
$ 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... 9.7s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.5.3, on macOS 12.0.1 21A559 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
✗ 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.62.0)
[✓] Connected device (1 available)
! Doctor found issues in 3 categories.Android SDKとCocoaPodsがインストールされていないようなので、installしていきます。Android Studioをインストールすれば、Android SDKが入りそうなので、Android Studioをインストールしていきます。
※ Android SDK 単体でも入れられるとは思います。
Android Studioのインストール
下記サイトからAndroid Studioをダウンロードします。
Download Android Studio and SDK tools | Android Developers
Download Android Studioをクリックします。
I have read and agree with the above terms and conditions にチェックを入れて、Mac with Apple chipを選択します。
ダウンロードしたアプリをインストールし、Android Studioを起動します。
流れに沿って設定を行なってください。特に難しいことはないので、割愛します。
設定が完了するとメニューが表示されるので、PluginからFlutterのPluginをインストールします。
左上のメニューの[Android Studio] - [Preferences]で設定画面を開き、[Appearance & Behavior]-[System Settings]-[Android SDK]からAndroid SDK Command-Line Toolsをインストールします。
下記画面が出るので、インストールを進めます。
下記コマンドで、Android Licenseに同意します。
途中、何回か入力を求められますが、全て y を返します。
$ flutter doctor --android-licensesflutter doctorで再度インストール情報を確認します。
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.5.3, on macOS 12.0.1 21A559 darwin-arm, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[!] Xcode - develop for iOS and macOS
✗ 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 (version 2020.3)
[✓] VS Code (version 1.62.0)
[✓] Connected device (1 available)
! Doctor found issues in 1 category.Cocoa Podsのインストール
必須ではないようですが、Cocoa Podsをインストールします。
今回は、Homebrewからインストールします。
$ brew install cocoapodsflutter doctorで再度インストール情報を確認します。
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.5.3, on macOS 12.0.1 21A559 darwin-arm, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.62.0)
[✓] Connected device (1 available)
• No issues found!これで、一通りインストールができました。
確認
試しにサンプルプロジェクトを作成してみます。
真ん中の New Flutter Project を選択します。
flutterを選択します。
今回はお試しなので、Project Nameを適当に入れて、Finishを押します。
IDE上部で、[Chrome(web)]を選択して、右の緑の再生ボタンを押すと、Chromeが起動して、サンプルプログラムが起動します。
iosシミュレーターや、Androidエミュレータを選択すると、それぞれの端末のエミューレーターが起動して、動作確認をすることができます。
iosシミュレーターは実行までに結構時間がかかります。
最後に
今回は、M1 macにFlutterの環境を構築してみました。
そこまで詰まることなく構築できたので、敷居は結構低いかなと思います。
Laravelもやらないとなのですが、Flutterも興味が出てきてどれも中途半端な感じになってますね。。。
それではまた。
Author : Yosuke Shishido
この記事が気に入ったらサポートをしてみませんか？