【MacOS】Flutterの環境構築を画像付きで解説

【MacOS】Flutterの環境構築を画像付きで解説

はい、どーもりぅです(「・ω・)「

「MacOSでFlutter(フラッター)を始めたい!!」という方の為に、
環境構築の手順を画像付きでわかりやすく解説していきます!

Flutterとは

FlutterはGoogleによって開発された、1つソースコードでiOS / Android両方に対応するアプリを作れるフレームワークです。
つまり、iOSのアプリを作る為にSwiftを勉強し、Androidのアプリを作成する為にKotlinを勉強する…という必要がなくなる&開発スピード2倍になる!

MacOSでの動作環境

Flutter開発環境が次の最小要件を満たしている必要があります。

OS macOS (64-bit)
空きディスク容量 2.8 GB(IDE /ツールのディスク容量は含まれません)
コマンドラインツール bash, mkdir, rm, git, curl, unzip, zip, which

Flutterをダウンロードする

まずは以下の公式ページリンクからFlutterをダウンロードします。
https://flutter.dev/docs/get-started/install/macos

・「flutter_macos_1.20.4-stable.zip」をクリック

 

・「許可」
※今後このサイトでファイルをダウンロードすることを許可するかどうか

"flutter.dev"でのダウンロードを許可しますか?

 

・「flutter」フォルダがダウンロードされます。

flutterダウンロード完了

Flutter SDKにPATHを通す

解凍後、Flutter SDKにPATHを通すことで、flutterコマンドが利用できるになります。

・任意の場所に「flutter」フォルダを移動
自分はアプリケーションに移動しました。

任意の場所に「flutter」フォルダを移動

 

・PATHの取得
flutter直下のbinフォルダを右クリック後、「optionキー」を長押しで表示された「”bin”のパス名をコピー」クリックする。

flutter>binへのpathの取得

・PATHを通すコマンドを実行する
ターミナル内のシェルスクリプトの種類の確認する為にターミナルで以下のコマンドを実行

前Stepの結果によって、実行するコマンドが変わります。
「bin/zsh」の場合は①のコマンド
「bin/bash」の場合は②のコマンド

→①「bin/zsh」の場合

→②「bin/bash」の場合

Attention

[PATH_TO_FLUTTER]は先ほど取得したPATHを入力してください。

Memo

自分と同じように「アプリケーションフォルダ>flutterファイル」に格納した場合、以下のパスになります。
echo ‘export PATH=”$PATH:/Applications/flutter/bin”‘ >> ~/.zshrc

・flutterコマンドが使えるのか確認
以下のコマンドを実行

こんな感じの結果になればOK!

Flutterの実行環境に必要なツールを揃える

以下コマンドで必要なツールを確認する

以下のような結果が出力されました。

上記、全て[✓]マークにする必要があります!

Xcodeはインストール済みなので[✓]となっており、
[ ! ]の箇所はAndoroid SDKをインストールして、
Androidのデバイス接続したら解決しそうですね!

Android Studio インストール

Developer.android.comに接続し「DOWNLOAD ANDOROID STUDIO」をクリック

 

・同意チェックをして「ダウンロードする:ANDROID STUDIO(MAC用)」をクリック

 

・「許可」を選択

 

・「android-studio-ide-193.6626763-mac.dmg」を起動し「Applications」フォルダへドラッグで移す

 

・「Android Studio.app」を起動

 

・「開く」

 

・「Do not impoert setting」を選択し「OK」

 

・「Send usage statistics to Google」を選択
※使用統計を Google に送付するか否かの選択なので、任意です

 

・セットアップ画面で「Next」をクリック

 

・「Standard」を選択し「Next」

 

・見た目をお好みで選んで「Next」
自分はダークモードっぽいのにしました\( ‘ω’)/

 

・設定内容を確認し「Finish」

 

・インストール待ち…

 

・インストール中、以下が出ますが管理者Password(ログインする時のやつ)を入力し「OK」

 

・「”セキュリティ”環境設定を開く」

 

・「鍵マークをクリック(閉じた状態)」→「パスワード入力」→「ロックを解除」

 

・「許可」→「鍵マークをクリック(開いた状態)」

 

・「Finish」

 

・Andoroid Studio が起動されたら完了です!

 

・一旦ここで flutter doctor で確認

※ターミナルで矢印上を押せば、コマンド履歴が表示されます

「Andoroid toolchain」が[ × ]から[  !  ]に変わるとともに以下のメッセージが表示されました

Android licenses not accepted.  To resolve this, run: flutter doctor –android-licenses
//和訳:Androidライセンスは受け入れられません。 これを解決するには、以下を実行します:flutter doctor –android-licenses

・言われた通りのコマンドを実行

 

・承認されていないライセンスを確認する

上記コマンドの出力結果に対して「y(yesの意味)」を5回くらい入力します

 

・これで、すべてのSDKパッケージライセンスが受け入れられました!

 

・もっかい flutter doctor コマンドで状態確認

「Android toollchain」が [ ✓ ] になりました!

Android Studioプラグインを導入する

× になっている以下2点をインストールします。
Flutter plugin
Dart plugin

 

・Flutter Plugin の追加

「Configure」→「Plugin」の順で選択

 

・プラグインの管理画面からインストール

「flutter」で絞り込み「Install」をタップ

 

・「Accept」同意する

 

・「install」

 

・Dart Plugin の追加

実はFlutterプラグインインストール時に一緒にインストールされています。
プラグインを追加後に「Restart IDE」ボタンでAndroid Studioを再起動しましょう!

Memo

IDE = 統合開発環境 = Android Studio

 

・はい、ここで診断コマンド!

「Andoroid Studio」も [ ✓ ] になりました!

次で最後です!

Deviceを接続(追加する)

[  !  ] Connected device を解消する方法は以下のどちらかです。
・デバイスを繋げる
・エミュレーター(仮想デバイス)を追加する

それぞれ解説していきます!

 

デバイスを繋げる

これはただMacとiPhoneまたはAndoroidをコードで接続するだけです!

iPhoneなら「USBC TypeC」で接続でき、
iPadProまたはAndoirdの方は「USBC to USBC」のコードで接続できます!

Point

カメラを使うようなアプリを開発する場合、
実機がないとテストが出来ないので、
コードを買っておくことをおすすめします!

エミュレーター(仮想デバイス)を追加する

実機がなくても、Mac上で仮想のデバイスを動作させるエミュレーターを追加することで解決します!
今回はこちらの方法を詳しく説明していきます。

Point

実機がなくても気軽に動作確認できるのでコチラがおすすめ!
※しかしマシンのスペックが低いとしんどい

・「Configure」→「AVD Manager」

 

・「+ Create Virtual Device」

 

・「Phone」→「Pixel(※任意のデバイスを選択)」→「Next」

 

・「Download」

 

・ダウンロード待ち…

 

・「Finish」を選択

 

・先ほどDownloadしたデバイスを選択した状態で「Next」

 

・設定不要なのでそのまま「Finish」

 

・仮想デバイスが使用出来る状態になったので、赤枠の▶︎アイコンをクリック

 

・PC上に仮想デバイスがビルドされたと思います!

 

・それと同時に出るマイクへのアクセス可否は「OK」を選択

・ここで恒例の診断コマンド

No issues found!
無事全てに[ ✓ ]がつきました\( ‘ω’)/!!!

 

Xcodeインストール方法も一応紹介…

自分はインストール済みなので、
すんませんがさくっとした説明で済ませます←

 

・Xcode最新版インストールコマンド

・仕様許諾に同意するコマンド(Xcodeを開いて確認してもOK)


※この時に要求されるパスワードはPCログイン時のパスワードと一緒です!

 

・CocoaPods(Xcodeのプラグイン)インストールコマンド

 

・診断コマンドで確認

これでXcodeに[ ✓ ]がついていなかった方もついたはずです!!

 

Flutterサンプルアプリを実行してみよう!

環境は整ったので、プリセットで用意されているサンプルアプリを動かしてみましょう!

 

・Android Studio の「Start a new Flutter project」を選択

 

・「Flutter Application」を選択して「Next」

 

・各項目を入力して「Next」

 

・デフォルトのままで良いので、そのまま「Finish」

 

・「OK」

 

・Andoroid Studioが起動したら「Run」→「Run ’main.dart’」でデフォルトで入っているサンプルアプリを起動

コントロール R でも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のキャッシュやらデバイスデータが圧迫していたので削除したら起動できました!

あとがき

とても長い手順お疲れ様でした!
これで開発する環境が整いました₍₍ (ง ˙ω˙)ว ⁾⁾

ちなみにこんな長い手順を踏まなくても、
Web上でのプレイグラウンドツールがあるので、
そちらも合わせてご確認ください✨

Dartpad(登録不要)

Web上のプレイグラウンドで、
簡単なコードなどここで試してみるくらいはできます!

https://dartpad.dartlang.org

CODEPEN(要アカウント作成)
※紹介記事は作成中

これもWeb上のプレイグラウンドですが、
Dartpadとは違うのは自分のアカウントに保存しておけることです!
メソッドなどを作成して保存しておくことができるので便利ですね\_(・ω・`)ココ重要!

そして編集した結果が即時プレビュー で変わるのでスピード編集でき、
コードをそのままブログに埋め込みできることも魅力の一つです!\_(・ω・`)ココモ重要!

埋め込み例

 

See the Pen
【Flutter#82】AboutDialog
by Riumaru (@Riumaru)
on CodePen.

Flutterカテゴリの最新記事