本記事では、Macユーザー向けに、Flutter開発環境の構築手順を紹介する。
なお開発に使うエディタはVisual Studio Codeを前提に進めていく。
Flutterとは
Flutterとは、モバイルアプリ開発用のフレームワークのこと。
同じ言語（Dart）でiOS／Android両方のアプリ開発ができるのが最大の特徴。
Googleによって2018年にリリースされた。
Dartとは
Dartとは、開発言語の一種。
FlutterフレームワークではDartを使用して開発を進めていく。
iosならswift、Androidならjavaという風に、それぞれのモバイルプラットフォーム毎に代表的な開発言語が存在したが、FlutterではDartのみで両プラットフォームの開発を行うことができる。
JDKのインストール
まずはJDKをインストールする。
JDKは後に紹介する、AndroidStudioの利用に必要なものだ。
下記、公式からダウンロード、インストールしていく。
https://www.oracle.com/java/technologies/javase-downloads.html
JDKインストール手順
「JDK Download」をクリック
「macOS Installer」のjdkをインストールする。
インストール後、アプリケーションフォルダにコピーするだけでOK。
Flutter SDKのインストール
次にFlutter SDKをインストールする。
Flutter SDKはFlutter開発の核となる部分である。
下記公式からダウンロード、インストールしていく。
https://flutter.dev/docs/get-started/install/macos
Flutter SDKインストール手順
macos向けのFlutter SDKをダウンロードする。
ダウンロードされるFlutter SDKはzip形式なので、任意のパスにunzipコマンドで展開する。
cd [任意のパス]
unzip ~/Downloads/flutter_macos_1.22.4-stable.zip
Flutter SDKを任意の場所に展開したら、
次にflutterコマンドにPATHを通していく。
viコマンドかなんかでbash_profileを編集。
vi ~/bash_profile
下記一行をbash_profileに追記、保存する（※unzipを行ったパスを間違わないように注意）。
export PATH="[unzipを行ったパス]/flutter/bin:$PATH"
次に、いったんターミナルをログアウト（終了）しflutterコマンドを反映させたあと、下記コマンドを実行し、flutter SDKをアップグレードしておく。
# 一回ターミナルを終了してから下記コマンド実行
flutter upgrade以上でFlutter SDKの準備は完了。
Android Studioのセットアップ
次にAndroid Studioをセットアップする。
下記公式からダウンロード、インストールしていく。
https://developer.android.com/studio?hl=ja
Android Studioのインストール手順
「DOWNLOAS ANDROID STUDIO」をクリック。
ダウンロードされたAndroid Studioをインストール後、アプリケーションフォルダにコピーするだけでOK。
Android Studioの初期設定手順
インストールしたAndroid Studioを起動すると以下のような画面が表示されるので、
「Do not import settings」を選択し、OKをクリック。
Nextをクリック。
次にAndroid Studioのインストールタイプ選択画面が表示される。
特にこだわりがなければ「Standard」を選択して、Nextをクリック。
次にAndroid Studioのテーマ選択画面が表示される。
黒を基調にしたテーマか白を基調にしたテーマか、好きな方のテーマを選択してNextをクリック。
次にAndroid Studioの設定確認画面が表示されるので、Finishをクリック。
設定内容でダウンロードが始まる。
完了すると次のような画面が表示されるので、Finishをクリック。
以上でAndroid Studioの初期設定自体は終わりになるが、これで終わりではなく、
Flutter開発に必要なAndroid SDKと、Flutterプラグイン、DartプラグインをAndroid Studioにインストールする必要がある。順に手順を実施していく。
Android SDKのインストール手順
まずはAndroid SDKのインストール手順を紹介する。
Android Studio起動画面の画面右下にある、「configure」をクリックし、
その中にある、「SDK Manager」をクリックする。
様々なバージョンのAndroid SDKが表示されるで、
最新のものを含めいくつか選択（チェックをいれる）し、OKをクリックする。
するとライセンス同意画面が表示されるので、
「Accept」にチェックを入れ、「Next」をクリック。
ダウンロードが始まるので、終わったら、Finishをクリック。
以上でAndroid SDKのインストールは完了。
Flutterプラグインのインストール手順
次にFlutterプラグインをAndroid Studioにインストールする手順を紹介する。
Android Studio起動画面の画面右下にある、「configure」をクリックし、
その中にある、「Plugins」をクリックする。
Android Studioのプラグインインストール画面が開くので、
検索ボックスに「flutter」と入力する。
すると「Flutter」と「Flutter Intl」という二つのプラグインがあるはずなので、両方インストールする。
以上でAndroid Studio関連の設定は全て完了だ。
Visual Studio Codeのセットアップ
次に開発に使用するエディタのVisual Studio Codeのセットアップ手順を紹介する。
Visual Studio Codeはプログラム開発ツールで、MicroSoftによって提供されている。
下記公式からダウンロード、インストールしていく。
https://code.visualstudio.com/
Visual Studio Codeのインストール手順
「Downlaod for Mac」をクリックする。
ダウンロードしてインストール後、アプリケーションフォルダにコピーするだけでOK。
FlutterとDartのプラグインインストール手順
次にVisual Studio Codeに、FlutterとDartのプラグインをインストールしていく。
画面左の機能拡張ボタン（四角が四つ組み合わさっているアイコン）をクリックし、検索ボックスから「flutter」と「Dart」を検索する。
それぞれプラグインが見つかるので、インストールすればOK。
Flutter Studio
次に紹介するのはFlutter Studioと言う、webサービスだ。
Flutter Studioでは、モバイル画面のデザイン部分（ボタンとか、テキストとか）を、ドラッグアンドドロップで作成でき、作成した画面のソースコードを取得することができる。
まあ開発時まで何かすることはないので、ブラウザのお気に入りにでも追加しておくと良いだろう。
Flutter Doctorを実行
最後に、Flutter Doctorを実行する。
Futter Doctorとは、Flutter開発環境の設定確認を行えるサービスだ。
ターミナルを開き、下記コマンドを実行する。
flutter doctor
上記のように、[✔︎]や[！]と言ったマークとともに、何やら様々な出力がされたと思う。
これが設定確認結果だ。
赤い色でバツがついているものに関しては設定が足りないと言うことなので、画面に出力されている指定のコマンドを実行し、解決していく。
筆者の場合は画面の通り、cocosPodsがインストールされていないというのと、Flutter/Dartがインストールされていないということでバツがついている。
Flutter/Dartはこの手順内でも紹介した通り、Android StudioでPluginをインストールしてあるのでOK。なのでcocosPodsのみインストールしていく。
sudo gem install cocoapodsだがここでエラーになったので、これは参考までに別記事にまとめておく。
一通りバツが消えたら、最後にもう一手間。
android licenseの同意をコマンドから行う必要がある（画面赤枠の部分がその記載）。
赤枠に書いてある通り、以下のコマンドを実行する。
すると何回も「Accept? (y/N):」と聞かれるので、全て「y」でEnterを押す。
flutter doctor --android-licenses赤枠が消えたらOK。
これで、開発環境の構築は以上となる。
お疲れ様でした。
Visual Studio Code での開発
では最後にFlutterプロジェクトの立ち上げ方を簡単に紹介。
Flutterプロジェクトの立ち上げ
Visual Studio Codeより、「表示 > コマンドパレット」を選択。
入力用のテキストボックスが現れるので、「flutter」と入力する。
「Flutter: New Project」が選択肢に現れるので、クリック。
テキストボックスにプロジェクト名を入力。
プロジェクトを保存するディレクトリを選択する。
保存が済んだら、画面左上のフォルダを開くボタンから、
プロジェクトを保存した場所を開き、プロジェクトが存在することを確認する。
モバイルエミュレータの起動
同じくコマンドパレットから、「flutter: Launch Emulator」を選択。
スマホデバイスの候補が表示されるので、任意のデバイスを選択する。
選択したモバイルデバイスでエミュレータが起動する。
[…] Flutter開発環境構築手順【Mac】全画像付き […]