Flutter アプリ開発の道 〜その① 環境構築〜

スマホアプリを自分で開発できることを目指して、1からアプリを作ってみようと決意しました。
今回は Flutter でアプリを開発します。

Flutterとは

FlutterはGoogleがリリースしたフレームワークです。
Flutterはクロスプラットフォームです。
Flutterでアプリを開発するとAndroidとiOSで動くアプリができるので今回はFlutterで開発を進めていきます。

開発環境構築

今回は開発環境構築です。
私はパソコンがmac bookですのでMac OS Xを前提とした開発となります。

Flutter SDK ダウンロード

公式サイトからインストールします。

macOS install

今回は
「flutter_macos_v2.0.6-stable.zip」
をダウンロードします。バージョンはその時の最新になるかと思います。
サイトにコマンドでのファイル解凍方法やパスの通し方が記載されています。
2021年5月時点では以下の画面でした。

解凍してPATH(パス)を通す

公式ページだと↓のパスを通す方法が記載されています。
しかしこれだとターミナルを立ち上げるたびに、このコマンドを実行しないといけないとのことで ~/.bash_profileファイルにPATHを書き込む方法 を紹介します。

$ export PATH="$PATH:`pwd`/flutter/bin"

まずは解凍です。

公式サイトから flutter_macos_2.0.6-stable.zip がダウンロードされたのを確認して、development のフォルダに解凍します。
development のフォルダを指定した理由としては、ネットで development を指定するサンプルが多いので環境構築がやりやすいという理由です。
development のフォルダがあるならそれを使ってください。
今回は新規でフォルダを作成します。
↓はコマンドでやる方法ですが、Finder で解凍しても大丈夫です。

mkdir ~/development
cd ~/development

unzip ~/Downloads/flutter_macos_2.0.6-stable.zip

次に~/.bash_profileファイルにPATHを書き込む方法です。

※ .bash_profileファイルがない場合は作成してください。
　　作成せずに進むと Flutter コマンドが実行できずにハマります。

↓のコマンドでファイルが作成されます。

$ touch ~/.bash_profile

作成したファイルはFinderでも確認できます。

ファイルが作成できたので、↓のコマンドで .bash_profile にFlutterのPATHを書いておきます。
(PATHにフルパスをコピーして書く方法も多くネットにありますが
~/development/flutter/bin
の指定が楽でしたのでこちらを紹介します)

$ echo 'export PATH="$PATH:~/development/flutter/bin"' >> ~/.bash_profile
$ source ~/.bash_profile

PATHを通すとFlutterコマンドが使えるようになります。
まず、PATHが通っているは↓のコマンドで確認できます。

$ echo $PATH

Flutterコマンドの確認は↓で現在のSDKバージョンが確認できればOKです。

$ flutter --version

私の場合はこのような表示になりました。

ツールのダウンロード

flutter precache コマンドを実行して、Flutter Tool をダウンロードします。こちらは必要になりますので忘れずにダウンロードしておきます。

$ flutter precache

（時間がかかります）

​flutter doctor コマンドを実行して、開発に必要なソフトウェアがインストールされているか確認することができます。

$ flutter doctor

これで開発環境構築は完了です。
環境構築が意外と一番大変です(汗)

次回の予定

Flutter新規プロジェクトを作成してエミュレータで起動するところを実施する予定です。