Flutterの環境構築しよう!

Flutter とは

Flutter は、Google 社が開発したAndroid / iOS 向けのクロスプラットフォームフレームワークです。

同じくGoogle社が開発した「Dart(ダート)」を開発言語としており、Widget(ウィジェット)と呼ばれる独自の UI コンポーネントを用いて自由度の高いカスタム UI を構築することができます。

Flutter の特徴をもっと知りたい方は、以下のリンクをぜひ訪れてください。

Flutterとは? エヌ次元が企業としてFlutter開発を採用する理由

Flutter をインストール

まずは、以下のリンクに進み、Flutter SDK の圧縮ファイルをインストールしてください。

Flutter の公式サイト

公式サイトでは、最新バージョンの安定版パッケージをインストールすることが推奨されています。もし異なるバージョンや Dev 版や Beta 版をインストールしたい場合は、 こちらのリンク からインストールできます。

インストールが完了したら、 Terminal を開いてください。

そして、以下のコマンドを入力してください。

ディレクトリの名前は、各ユーザーの好きなもので命名して大丈夫です。ただし、こちらのマニュアルでは公式ドキュメントに倣い、developmentと命名します。

# ホームディレクトリ配下に development という名前のディレクトリを作成する
mkdir ~/development

# 作成した development ディレクトリに移動する
cd ~/development

# 圧縮ファイルを展開する                              
unzip ~/Downloads/flutter_macos_YOUR_VERSION-stable.zip

上記のunzipコマンドで展開する圧縮ファイル名の YOUR_VERSION には、あなたがインストールしたパッケージのバージョンを入力してください。

Flutter を実際に動かす

次に、以下のコマンドを入力してください。

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

これで、Flutter を起動する準備が整いました。

以下のコマンドを入力してみましょう。このコマンドは、Flutter で開発するのに必要な環境が揃っているかを診断してくれます。

flutter doctor

Flutter 開発していると、うまくプログラムが動かなくなるときがあります。 その時は、flutter doctorをして、Flutter 開発環境に問題がないか、まずチェックしてみましょう。

PATH 環境変数を登録する

先ほどの「Flutter を実際に動かす」にて、 Terminal 画面に入力したコマンドexport PATH=...で、Flutter を実際に動かしてみました。

ただし、こちらは Flutter を動かす一時的な登録コマンドであり、これから Flutter 開発するために永久的な登録をする必要があります。

まずは、どのファイルに PATH 環境変数を登録する必要があるか調べます。以下のコマンドを入力してください。

echo $SHELL

出力される結果に応じて、以下のコマンドを入力してください。

zsh が表示された場合

# zshの設定ファイル zshrc に PATH 環境変数を追記する
echo 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.zshrc

# 追記した設定ファイル zshrc を反映させる
source ~/.zshrc

bash が表示された場合

# bashの設定ファイル bash_profile に PATH 環境変数を追記する
echo 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.bash_profile

# 追記した設定ファイル bash_profile を反映させる
source ~/.bash_profile

次に、今登録した PATH 環境変数がしっかりと登録されているのか、以下のコマンドで確認します。

echo $PATH

以下の画像の赤枠に表示されている、/Users/YOUR_USER_NAME/development/flutter/binと出力されていれば大丈夫です。

もし表示されていなかったら、一度 Terminal を再起動してトライしてみましょう。

最後に登録したパスを通じて、 Flutter が読み込めるのか、以下のコマンドで確認します。

which flutter

以下の画像のような、/Users/YOUR_USER_NAME/development/flutter/binと出力されていれば大丈夫です。

iOS 端末のセットアップ

Xcode のインストール

iOS 端末のセットアップするために、 Xcode をインストールされていなければなりません。

Xcode をまだインストール済みでない方は、こちらのMac App Storeからインストールしてください。

もし Xcode のバージョンが最新バージョンでなければ、最新バージョンにアップデートしておきましょう。

準備が整ったら、 Xcode のセットアップを行います。

以下のコマンドを順番に入力してください。

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
sudo xcodebuild -license

iOS シミュレータのインストール

iOS シミュレータは iPhone 実機を Mac 上でシミュレートできるツールです。

以下のコマンドを入力すると、 iPhone の形をしたシミュレータが出てきます。

open -a Simulator

サンプルアプリを作って、実際に起動してみよう

ここまでで、 iOS 端末のセットアップは完了しました。

セットアップが正常に完了したかを確認するため、サンプルアプリを作り、実際に起動してみましょう。

以下のコマンドを入力してください。

# ホームディレクトリ配下に flutter_project という名前のディレクトリを作成する
mkdir ~/flutter_project

# 作成した flutter_project ディレクトリに移動する
cd ~/flutter_project

# my_appという名前のプロジェクトを新規作成する
flutter create my_app

# 作成したプロジェクト my_app のディレクトリに移動する
cd my_app

my_app プロジェクトをビルドする
flutter run

以下の画像のように、Flutter アプリを起動できたら成功です。

次は、Flutter 開発で推奨されているツールである Android Studio を設定します。

以下のリンクに進んでください。

Android Studio を設定する

参考リンク