どーも!りゅうです(「・ω・)「
「MacでFlutter(フラッター)を始めたい!!」という方の為に、
Visual Studio Codeでの環境構築の手順を画像付きでわかりやすく解説していきます!
- 1. Flutterとは
- 2. MacOSでの動作環境
- 3. Flutter SDKをインストール
- 4. Flutterの実行環境に必要なツールを揃える
- 5. Flutterサンプルアプリを起動してみよう!
- 6. トラブルシューティング
- 7. あとがき
Flutterとは
FlutterはGoogleによって開発された、1つソースコードでiOS / Android / Web に対応するアプリを作れるフレームワークです。
つまり、iOSのアプリを作る為にSwiftを勉強し、Androidのアプリを作成する為にKotlinを勉強し、Web言語も勉強…という必要がなくなり開発スピードが早くなります!
先日Flutter3が発表され、
MacのデスクトップアプリケーションのIntelチップだけでなく、Apple Silicon(ARM64、M1)チップのデスクトップアプリケーションへのビルドも正式対応されたり、Firebase連携が強化されたり、これから盛り上がっていくこと間違いなしな言語だと確信しました!(願望)
変更点の詳細は公式サイトの Flutter 3.0.0 release notesをチェック!
MacOSでの動作環境
Flutter開発環境が次の最小要件を満たしている必要があります。
OS | macOS (64-bit) |
空きディスク容量 | 2.8 GB(IDE /ツールのディスク容量は含まれません) |
コマンドラインツール | bash, mkdir, rm, git, curl, unzip, zip, which |
Flutter SDKをインストール
https://docs.flutter.dev/get-started/install/maco
・Flutter公式サイトにアクセスしFlutter SDKをインストール
Apple Silicon Macにインストールする場合、いくつかの補助ツールでRosetta翻訳環境を以下のコマンドで利用できるようにしておく必要があります。
sudo softwareupdate –install-rosetta –agree-to-license
・自分のMacのチップに合わせてダウンロード
・PC左上のマーク > このMacについて
Intel chipの場合の表記
プロセッサの行に「Intel Core」の記載あり
Apple Chipの場合の表記
・ダウンロードしたzipファイルをダブルクリックで解凍すると以下の「flutter」フォルダになる
Flutter SDKにPATH(パス)を通す
解凍後、Flutter SDKにPATHを通すことで、Macのターミナルでflutterコマンドが利用できるになります。
・任意の場所に「flutter」フォルダを移動
自分はアプリケーションに移動しました。。(本来どこで管理するのが良いのかわからん)
・PATHの取得
flutter直下のbinフォルダを右クリック後、「optionキー」を長押しで表示された「”bin”のパス名をコピー」クリックする。
・PATHを通すコマンドを実行する
ターミナル内のシェルスクリプトの種類の確認する為にターミナルで以下のコマンドを実行
前Stepの結果によって、実行するコマンドが変わります。
「bin/zsh」の場合は①のコマンド
「bin/bash」の場合は②のコマンド
→①「bin/zsh」の場合 ※1行ずつ実行してください
→②「bin/bash」の場合 ※1行ずつ実行してください
[PATH_TO_FLUTTER]は先ほど取得したbinフォルダまでのPATHを入力してください。
自分と同じように「アプリケーションフォルダ>flutterファイル」に格納した場合、以下のパスになります。
echo export PATH=”$PATH:/Applications/flutter/bin” >> ~/.zshrc
・flutterコマンドが使えるのか確認
以下のコマンドを実行
こんな感じの結果になればOK!
「zsh: command not found: flutter」と表示された場合は、ターミナルを再起動してみてください!
それでもダメなら記事後半のトラブルシューティングを確認!
Flutterの実行環境に必要なツールを揃える
以下のような結果が出力されました。
上図の全て[✓]マークにする必要があります!
Flutterは最初にインストールしたので必ず[✓]になっています。
Xcodeはインストール済みで[×]になっているのは、CocoaPodsがインストールされていなかったり、コマンド打てばどうにかなりそうです。
Andoroid SDKとAndroid Studioはインストールしたら解決しそう。
…という風に、メッセージ通りに足りないツールをインストールしていきます!
その他の項目も併せて解説していきますので、一緒に進めていきましょう!
まずはAndroid Studioのインストールからです。
初期の頃はJavaも必要でしたが不要になりました。
Android Studio インストール
Developer.android.comに接続し「Download Android Studio Giraffe」をクリック
・同意チェックをし、自分のPCのプロセッサに対応している方を選択してクリック
・PC左上のマーク > このMacについて
Intel chipの場合
プロセッサの行に「Intel Core」の記載あり
Apple Chipの場合
・「許可」を選択
※出ない場合はスキップ
・「android-studio-202X.XX.XX.XX-mac.dmg」を起動し「Applications」フォルダへドラッグで移す
※ドラッグ後はウィンドウ閉じてOKです
・「Android Studio.app」を起動
・「開く」
・「Do not impoert setting」を選択し「OK」
・「Send usage statistics to Google」を選択
※使用統計を Google に送付するか否かの選択なので、任意です
・セットアップ画面で「Next」をクリック
・「Standard」を選択し「Next」
・見た目をお好みで選んで「Next」
男は黙ってダークモード(∩’-‘⊂)シュッ
・設定内容を確認し「Next」
・コンポーネントのライセンスに「Accept(同意)」する。
android-sdk-license
android-sdk-preview-license
「android-sdk-license」と「android-sdk-preview-license」それぞれ選択してAcceptしないと「Finish」が選択できないです。
・インストール待ち…
・インストール中、以下が出ますが管理者Password(ログインする時のやつ)を入力し「OK」
※出ない場合はスキップ
・「”セキュリティ”環境設定を開く」
※出ない場合はスキップ
・「鍵マークをクリック(閉じた状態)」→「パスワード入力」→「ロックを解除」
※出ない場合はスキップ
・「許可」→「鍵マークをクリック(開いた状態)」
※出ない場合はスキップ
・「Finish」
・Andoroid Studio が起動されたら完了です!
・一旦ここで flutter doctor で確認
※ターミナルで矢印上を押すと、コマンド履歴が表示されます
Android Studioにプラグインをインストール
以下2点のプラグインをインストールします。
・Flutter
・Dart
最新版のAndroidStudioをインストールした場合、 [ ✓ ] がついていますが、
つまり「インストール可能な状態だけど、まだインストールはしてないよ」って意味なので、ここでプラグインをインストールしておきましょう!
Flutterのプラグインをインストール
左メニューの「Plugins」を選択後に表示される検索窓から「flutter」で絞り込み「Install」をタップ
・「Accept」同意する
Third-Party Plugin Privacy Note
The following plugins aren’t coming from JetBrains: Flutter (flutter.dev) Using third-party plugins may involve a plugin vendor processing your personal data. Please check the plugin vendor’s documentation for details concerning personal data processing. JetBrains is not responsible for any processing of your personal data by any third-party plugin vendors.
↓翻訳
サードパーティプラグインのプライバシー
以下のプラグインはJetBrainsからのものではありません: Flutter (flutter.dev) サードパーティのプラグインを使用すると、プラグインベンダーがあなたの個人データを処理する可能性があります。個人データ処理に関する詳細については、プラグインベンダーのドキュメントを確認してください。 JetBrainsは、サードパーティのプラグインベンダーによるお客様の個人データの処理について一切責任を負いません。
・「install」
Install Required Plugins
The ‘Flutter’ plugin requires “Dart” to be installed.
↓翻訳
必要なプラグインをインストールする
Flutter’プラグインには “Dart”がインストールされている必要があります。
・インストール後に「Restart IDE」(AndroidStudioの再起動)をクリック
Flutterプラグインをインストール後に再起動することで、Dartのプラグインもインストールされます。
Android toolchain インストール
Android toolchain自体はAndroid Studioインストール時に一緒にインストールされていますが、
別途、必要対応を記載されている内容を確認しながら進めていきます。
cmdline-toolsコンポーネントのインストール
コンポーネントのインストールコマンドですが、メッセージ通りのコマンド通りに打ってもうまくいかないので、違う方法で進めます。
・Android Studio > Settings
・以下の順に選択(※画像参照)
❶Languages&Frameworks
❷Android SDK
❸SDK Tools タブを選択
❹Hide Obsolete Packagesのチェックを外す
❺Android SDK Command-line Tools (latest) にチェック
❻Android SDK Tools (Obsolete) にチェック
❼OK
❹Hide Obsolete Packagesのチェックを外さないと❻Android SDK Tools (Obsolete) の項目が表示されません。
・「OK」を選択
・インストール完了したら「Finish」で閉じる
Android SDK ライセンスを受け入れる
・以下コマンドを実行
・承認されていないライセンスを確認する
上記コマンドの出力結果に対して「y(yesの意味)→Enter」を5回くらい繰り返し入力します
・これで、すべてのSDKパッケージライセンスが受け入れられました!
・再度
Android toolchainにもチェックマークがついて、残りはXcodeのみです。
Xcodeのインストール
Macにはデフォルトでインストールされていてissueにならない方のほうが多いのでは?
ただXcodeインストール済みでも付随したライブラリのインストールも必要になってくるので手順を解説していきます。
・ AppStoreからXcodeを新規インストール(XcodeがMacにない方)
※2、3時間かかります…※この時に要求されるパスワードはPCログイン時のパスワードと一緒です!
Xcode名前を変更している場合はパスも変わります!
例えば、名前を「Xcode14」にしていた場合のパスは以下になります。
また、「Xcode 14」のようにXcode名にスペースを入れている場合は、パスをダブルクォーテーションで囲むことで正しく認識されます!
・仕様許諾に同意するコマンド
・以下の文が表示されたらqキーを押す
Software License Agreements 'space' for more, or 'q' to quit
・以下の文が表示されたら「agree」と打ち込んでreturn ⏎キーを押す
By typing 'agree' you are agreeing to the terms of the software license agreements. Type 'print' to print them or anything else to cancel, [agree, print, cancel]
・CocoaPods(Xcodeのプラグイン)インストールコマンド
最後にこんな感じのメッセージが表示されればCocoaPodsインストール完了です!
“extconf failed, exit code 1″エラーがでる場合は、Rubyのバージョンが低いために拡張モジュールのffi gemをビルドしようとして失敗しているので、以下の記事を参照にRubyのバージョンをあげてみてください
【Mac】sudo gem install cocoapodsしたら「extconf failed, exit code 1」になる
brewが入ってない。そもそもbrewってなに? という方は以下の記事を参照にインストールすることをおすすめします!
【Mac】HOMEBREWのインストールと最低限知っておきたいコマンド一覧
・診断コマンドで確認
これでXcodeに[ ✓ ]がついたはずです!!
その他もチェック済みではありますが、
[ ✓ ]にする手順を説明していきます。
GoogleChromeダウンロード
GoogleChrome公式サイトからインストールすれば「Chrome – develop for the web」に[ ✓ ]がつきます。
Deviceを接続(追加する)
[ ! ] Connected device を解消する方法は以下のどちらかです。
・デバイスを繋げる
・エミュレーター(仮想デバイス)を追加する
いずれもiPhoneまたはAndroidを接続すればOKです。
それぞれ解説していきます!
デバイスを繋げる
これはデバイス(端末)とMacをUSB接続するだけです!
iPhoneなら「USB TypeC ⇔ ライトニング」で接続でき、
iPadProまたはAndoirdの方は「USBC to USBC」のコードで接続できます!
カメラを使うようなアプリを開発する場合、エミュレーターではテストが出来ないので、コードを買っておくことをおすすめします!
ちなみに以下のTypeCからライトニングに変換するアダプタがまじで有能なのでおすすめです。
エミュレーター(仮想デバイス)を追加する
実機がなくても、Mac上でiPhoneやAndoroidの仮想デバイスを動作させることが可能です!
実機がなくても気軽に動作確認できるのでコチラがおすすめ!
※マシンのスペックが低いとMacが悲鳴を上げますが。。
・More Actions > AVD Manager
・「+ Create Virtual Device」
・「Phone」→「Pixel(※任意のデバイスを選択)」→「Next」
・任意のOSを「Download」
とりあえず最新OSをダウンロードしておけば間違いないです!
・ダウンロード待ち…
・ダウンロード完了したら「Finish」を選択
・先ほどDownloadしたデバイスを選択した状態で「Next」
・任意の端末名を入力して「Finish」
※その他は設定不要です
・仮想デバイスが使用出来る状態になったので、赤枠の▶︎アイコンをクリック
・エミュレーター(仮想デバイス)が起動されるまで待機…
・「OK」で ”Android Studio” からマイクにアクセスを許可
・PC上に仮想デバイスがビルドされました!
インターネットに接続
「Network resources」はMacをインターネットに接続すればOKです!
VScodeのインストールとセットアップ
VScodeのインストール
・ VSCodeの公式サイトにアクセスして「Visual Studio Codeをダウンロードをする」をクリック
・自分のMacにあったチップの.zipファイルを選択
Intel chip: Intelチップ対応
Apple sillicon: M1・M1チップ対応
Universal: IntelチップとM1・M2チップどちらも対応
どちらも対応版は無難だが、片方のものより容量が軽いのでどちらかを選んだほうが良き。
・PC左上のマーク > このMacについて
Intel chipの場合の表記
プロセッサの行に「Intel Core」の記載あり
Apple Chipの場合の表記
・ダウンロードして解凍したVisual Studio Codeをアプリケーションに移動する
これでインストールは完了したのでセットアップしていきましょう!
解凍前の「VSCode-darwin.zip」は削除してよいです。
VScodeのセットアップ
・日本語化
アプリケーションからVSCodeを起動したらまずは日本語化するために右下に出るボタンをクリック!(自動で再起動され、日本語化されます。)
・左のアイコンから拡張機能「Flutter」を検索してインストール
「Dart」はFlutterインストール時に一緒にインストールされます!
最初の手順で右下のダイアログが消えてしまい日本語化パッケージをインストールしそびれた方は「Japanese Language Pack for VS Code」を検索すればOKです。
Flutterサンプルアプリを起動してみよう!
・shift ⇧ + ⌘commandcommand ⌘ + Pで表示された入力欄に「flutter」と入力後に「New Project」を選択
・「Application」を選択
右下のダイアログは以下のようなことが書いてあったので「OK」ボタン押しても無視でも良いです。
The VS Code IDE extensions for Dart and Flutter uses Google Analytics to report usage and diagnostic data along with package dependencies, and crash reporting to send basic crash reports. This data is used to help improve the Dart platform, Flutter framework, and related tools. Telemetry is not sent on the very first run. To disable reporting of telemetry, run this terminal command: dart –disable-telemetry. If you opt out of telemetry, an opt-out event will be sent, and then no further information will be sent. This data is collected in accordance with the Google Privacy Policy (https://policies.google.com/privacy).
↓翻訳
DartとFlutter用のVS Code IDEエクステンションは、Google Analyticsを使用してパッケージの依存関係とともに使用状況と診断データを報告し、クラッシュレポートを使用して基本的なクラッシュレポートを送信します。このデータはDartプラットフォームやFlutterフレームワーク、関連ツールの改善に役立てられます。テレメトリは最初の実行時には送信されません。テレメトリの報告を無効にするには、ターミナルコマンドで次のように実行します: dart –disable-telemetry. テレメトリーをオプトアウトすると、オプトアウトイベントが送信され、それ以降の情報は送信されません。このデータはGoogleプライバシーポリシー(https://policies.google.com/privacy)に従って収集されます。
・プロジェクトを作成する場所を選択して「Select a folder to create the project in」をクリック
・「Project Name」にプロジェクトフォルダの名前を入力してEnterキー
※デフォルトで「flutter_application_1」と入力されます
プロジェクト名に「大文字」と「-」は使えません。
・信頼のチェックして「はい、作成者を信頼します」をクリック
・flutterのプロジェクトを作成したら起動するデバイスを選択
色々ありますが、Androidのエミュレーターを選択
・「実行とデバッグ」をクリック
デフォルトでカウンターアプリのコードが記入されているので、実行するとサンプルアプリが起動します。
・「Send report」を選択
クラッシュレポートを送るか否かなのでどちらでもOK
・こんな感じのカウンターアプリが起動すればOKです!
右下のボタンをクリックすると、画面の数字がカウントアップしていきます。
トラブルシューティング
自分が詰まったところやエラーが出たものをメモしておきます_φ(・_・ )
エミュレーター実行時に以下のエラーで落ちた場合
“The emulator process for “デバイス名” was killed”
・Andoroid Studio下部メニューの「Events▼」からエラー内容を確認
・エラー内容
Emulator: emulator: ERROR: Not enough space to create userdata partition. Available: 2649.933594 MB at /Users/user123456/.android/avd/Pixel_API_30.avd, need 7372.800000 MB.
和訳:エミュレーター:エミュレーター:エラー:ユーザーデータパーティションを作成するための十分なスペースがありません。
利用可能:/Users/user123456/.android/avd/Pixel_API_30.avdで2649.933594 MB、7372.800000MBが必要です。
エミュレーター「Pixel_API_30.avd」を起動する為に必要な空き容量がないっていうことですね(›´ω`‹ )
Xcodeのキャッシュやらデバイスデータが圧迫していたので削除したら起動できました!
FlutterへのPATHを通しても「flutter not found」が表示される
原因は以下のどちらかになると思います。
・binまでのPATHが間違っている
・export文が複数ある
上記を確認するために.zshrcファイルを確認しましょう!
「zshrc」とはzshの設定ファイルのことです
.zshrcファイル確認・編集手順
・ターミナルを起動して以下コードを入力してEnter
「.zshrc」ファイルには複数のPATHが「:」区切りで存在している。
上記画像の場合、以下のPATHが登録されていることになる
/user/local/bin
/usr/bin
/bin
/usr/sbin
/sbin
/user/local/share/dotnet
~/.dotnet/tools
usr/bin/vim
/Applications/flutter/bin
・iキー を押してInsertモード(編集モード)に変更
編集モードの状態で誤りがあれば修正しましょう!
・編集完了したら、escキー(エスケープキー)後に:wq(:wq!)と入力してEnterキーで保存して終了
・最後にターミナルの再起動すればOK
あとがき
これで開発する環境が整いました!
とても長い手順お疲れ様でした。
Googleさん公式Youtube「Widget of the Week」で紹介されているウィジェットのサンプルコードを紹介している記事もありますのでぜひご覧ください!
【Flutter】Widget of the Week #1 SafeArea
それでは次の記事でお会いしましょう!