Flutter開発環境構築手順【Mac】全画像付き

Flutter開発環境構築手順【Mac】全画像付き

 

本記事では、Macユーザー向けに、Flutter開発環境の構築手順を紹介する。
なお開発に使うエディタはVisual Studio Codeを前提に進めていく。

 

Flutterとは

Flutterの画像

Flutterとは、モバイルアプリ開発用のフレームワークのこと。
同じ言語(Dart)でiOS/Android両方のアプリ開発ができるのが最大の特徴。
Googleによって2018年にリリースされた。

Dartとは

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」をクリック
JDKのダウンロード

「macOS Installer」のjdkをインストールする。macOSのJDKのダウンロード

 

インストール後、アプリケーションフォルダにコピーするだけでOK。

 

Flutter SDKのインストール

次にFlutter SDKをインストールする。
Flutter SDKはFlutter開発の核となる部分である。

下記公式からダウンロード、インストールしていく。

https://flutter.dev/docs/get-started/install/macos

 

Flutter SDKインストール手順

macos向けのFlutter SDKをダウンロードする。macos向けflutterSDKをダウンロードする画像

ダウンロードされる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の画像

次にAndroid Studioをセットアップする。
下記公式からダウンロード、インストールしていく。

https://developer.android.com/studio?hl=ja

 

Android Studioのインストール手順

「DOWNLOAS ANDROID STUDIO」をクリック。android-studioのダウンロード画面

ダウンロードされたAndroid Studioをインストール後、アプリケーションフォルダにコピーするだけでOK。

 

Android Studioの初期設定手順

インストールしたAndroid Studioを起動すると以下のような画面が表示されるので、
「Do not import settings」を選択し、OKをクリック。Android Studioのデータインポート選択画面

Nextをクリック。Android Studioのwelcome画面

次にAndroid Studioのインストールタイプ選択画面が表示される。
特にこだわりがなければ「Standard」を選択して、Nextをクリック。Android StudioのInstall Type選択画面

次にAndroid Studioのテーマ選択画面が表示される。
黒を基調にしたテーマか白を基調にしたテーマか、好きな方のテーマを選択してNextをクリック。Android Studioのテーマ選択画面の画像

 

次にAndroid Studioの設定確認画面が表示されるので、Finishをクリック。
設定内容でダウンロードが始まる。Android Studioの設定確認画面の画像

 

完了すると次のような画面が表示されるので、Finishをクリック。Android Studioのコンポーネントダウンロード画面

以上でAndroid Studioの初期設定自体は終わりになるが、これで終わりではなく、
Flutter開発に必要なAndroid SDKと、Flutterプラグイン、DartプラグインをAndroid Studioにインストールする必要がある。順に手順を実施していく。

 

Android SDKのインストール手順

まずはAndroid SDKのインストール手順を紹介する。

Android Studio起動画面の画面右下にある、「configure」をクリックし、
その中にある、「SDK Manager」をクリックする。Android Studioの起動画面からSDK Managerを選択する画像

様々なバージョンのAndroid SDKが表示されるで、
最新のものを含めいくつか選択(チェックをいれる)し、OKをクリックする。ダウンロード対象Android SDK選択画面

するとライセンス同意画面が表示されるので、
「Accept」にチェックを入れ、「Next」をクリック。Andorid SDKのライセンス同意画面の画像

ダウンロードが始まるので、終わったら、Finishをクリック。Android SDKダウンロード画面

以上でAndroid SDKのインストールは完了。

 

Flutterプラグインのインストール手順

次にFlutterプラグインをAndroid Studioにインストールする手順を紹介する。

Android Studio起動画面の画面右下にある、「configure」をクリックし、
その中にある、「Plugins」をクリックする。Android Studioのプラグインインストール画面を開く画像

Android Studioのプラグインインストール画面が開くので、
検索ボックスに「flutter」と入力する。

すると「Flutter」「Flutter Intl」という二つのプラグインがあるはずなので、両方インストールする。

以上でAndroid Studio関連の設定は全て完了だ。

 

Visual Studio Codeのセットアップ

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サービスだ。

https://flutterstudio.app/

Flutter Studioでは、モバイル画面のデザイン部分(ボタンとか、テキストとか)を、ドラッグアンドドロップで作成でき、作成した画面のソースコードを取得することができる。

Flutter Studioの画像

まあ開発時まで何かすることはないので、ブラウザのお気に入りにでも追加しておくと良いだろう。

 

Flutter Doctorを実行

最後に、Flutter Doctorを実行する。
Futter Doctorとは、Flutter開発環境の設定確認を行えるサービスだ。

ターミナルを開き、下記コマンドを実行する。

flutter doctor
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より、「表示 > コマンドパレット」を選択。Visual Studio Codeでコマンドパレットを開く画像

入力用のテキストボックスが現れるので、「flutter」と入力する。
「Flutter: New Project」が選択肢に現れるので、クリック。Visual Studio CodeでFlutterプロジェクト立ち上げコマンドを検索する画像

テキストボックスにプロジェクト名を入力。Flutterのプロジェクト名を入力する画面

プロジェクトを保存するディレクトリを選択する。Flutterプロジェクト保存場所の選択画面

保存が済んだら、画面左上のフォルダを開くボタンから、
プロジェクトを保存した場所を開き、プロジェクトが存在することを確認する。Flutterプロジェクトの画像

 

モバイルエミュレータの起動

同じくコマンドパレットから、「flutter: Launch Emulator」を選択。モバイルエミュレータ起動コマンド入力画面

スマホデバイスの候補が表示されるので、任意のデバイスを選択する。エミュレータ用モバイルデバイスの一覧

選択したモバイルデバイスでエミュレータが起動する。起動したモバイルエミュレータの画像

 

 

記事が気に入った方はシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。