Zenn
🎃

Flutter環境構築 (画像多めでわかりやすく)

2020/09/25に公開
Flutter
tech

はじめに

Flutterの開発環境構築の手順について解説していきます。
また本記事ではmacOSでの手順解説となります。
Windows・Linuxを使用されている方は別途、Flutter公式サイトのWindows版・Linux版 などをご参照下さい。

システム要件

まずFlutterをインストールして実行するには、以下の要件を満たしている必要があります。

  • オペレーティングシステム(OS): macOS(64-bit)
  • ディスク容量: 2.8 GB (IDE /ツールのディスク容量は含まれません)
  • ツール: 以下のコマンドラインツールが使用できること。
    • bash
    • curl
    • git 2.x
    • mkdir
    • rm
    • unzip
    • which
    • zip

この条件が揃っていましたら、早速環境構築していきましょう。

Flutter SDKのインストール

1.Flutter SDKをインストールする

Flutter公式サイト右上の「Get started」をクリック

installページにきたらmacOSを選択

Get the Flutter SDK 欄のダウンロードボタンをクリックし、Flutter SDKをダウンロード

完了したら、ダウンロードしたzipファイルをクリックして解凍
Macでは基本「Downloads」の中にダウンロードされていると思います。
解凍できたら、次項目からターミナルにてコマンドを実行していきます。

Flutterコマンドのセットアップ

ターミナルにて以下を実行していきます。

1.Flutterをパスに常に追加する

ホームディレクトリに移動

cd

「development」ディレクトリを作成

mkdir development

作成した「development」ディレクトリに移動

cd development

「flutter」ファイルを「development」ディレクトリの中に移動
ユーザー名のところは各自のユーザー名を入力して下さい。
また、インストールされたflutterファイルの場所によってこちらは書き換えて下さい。

mv /Users/ユーザー名/Downloads/flutter ./

「flutter」ファイルに移動

cd flutter

Flutterをパスに常に追加する

vi ~/.bash_profile

**「i」**をタイプして挿入モードにし、export PATHの先頭に以下コードを記入します。
ユーザー名は各自ユーザー名を記述して下さい。
パスの区切りの「:」を忘れないようにして下さい。

/Users/ユーザー名/development/flutter/bin:

コードの全体（例）

export PATH="/Users/ユーザー名/development/flutter/bin:~/.rbenv/shims:/usr/local/bin:$PATH"

escキーで挿入モードを終了します。

編集が完了したら、「:wq」を入力しEnterで編集を終了させます。

:wq

2.Flutterコマンドが実行できるようにする

source ~/.bash_profile

3.Flutterコマンドを実行

flutter

するとコマンドが実行され、「Welcome to Flutter！」と表示されます。

これでFlutterコマンドが実行できるようになりました。

Xcodeのインストール

1.App StoreよりXcodeをインストール

App StoreにてXcodeを検索し、インストールします。

すでにインストールされている方はアップデートがないかを確認し、
最新バージョンでなければアップデートする方が吉だと思います。
※ Flutter公式サイトより引用 ※
[ 最新の安定バージョンより古いバージョンでも動作する可能性がありますが、Flutter開発にはお勧めできません。古いバージョンのXcodeを使用してビットコードをターゲットにすることはサポートされておらず、機能しない可能性があります。 ]

2.最新Ver.のXcodeを使用するようにXcodeコマンドラインツールを構成

ターミナルにて以下を実行します。
パスワードを求められるので入力します。

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

3.Xcodeライセンスの確認

以下を実行し内容を確認します。
spaceキーで下にスクロールすることができます。
qキーでページを抜けることができます。

sudo xcodebuild -license

ページを抜けた後、以下を入力することでライセンスに同意します。

agree

#iOSシミュレーターのセットアップ

1.iOSシミュレーターを実行

ターミナルにて以下を実行します。

open -a Simulator

するとiOSシミュレーターが立ち上がります。

Flutterアプリを作成し実行

シンプルなFlutterアプリを作成し、実行していきます。

1.ディレクトリ作成

今回のサンプルアプリ用にディレクトリを作成します。
各々好きな名前で構いません。

mkdir 好きな名前

2.作成したディレクトリへ移動

cd 先ほど作成したディレクトリ名

3.Flutterアプリ作成

以下コマンドを入力すると、
先ほど作成したディレクトリの中に
my_appというサンプルのFlutterアプリが作成されます。

flutter create my_app

4.作成したmy_appへ移動

cd my_app

5.iOSシミュレーターでmy_appを実行

iOSシミュレーターを起動した状態で以下を実行します。

flutter run

するとiOSシミュレーター内でmy_appが実行されます。
右下の＋ボタンを押すと数字がカウントアップされます。
ターミナルでqキーを入力するとアプリを終了できます。

これでシンプルなFlutterアプリの作成・実行ができました。

Android Studioのインストール

1.Android Studioをダウンロード

こちらのAndroidの公式サイトの「DOWNLOAD ANDROID STUDIO」をクリックする。

すると規約と条件が表示されるので、
「I have read and agree with the above terms and conditions」の欄にチェックを入れて規約に承諾し、
「DOWNLOAD ANDROID STUDIO FOR MAC」をクリックしてダウンロードします。
※「I have read and agree with the above terms and conditions」のチェックを入れないとダウンロード出来ません。

2.Android Studio DMGファイルを起動

ダウンロードしたAndroid Studio DMGファイルをダブルクリックして起動し、
ApplicationフォルダにAndroid Studioをドラッグ＆ドロップします。

これでAndroid Studioのインストールは完了です。

Android Studioのセットアップ

1.Android Studioを起動

Android Studioをダブルクリックで起動します。
するとセットアップ画面が表示されるのでNextをクリックして進んでいきます。

  • 「Install Type」 はStandardのままでNextをクリック。
  • 「Select UI Theme」はDarculaかLight、お好みで選択しNextをクリック。
  • 「Verify Setting」では設定内容を確認しFinishをクリック。するとComponentsのインストールが始まり、パスワードを求められたら入力します。
  • インストールが完了したらログが表示されますので、確認したらFinishをクリック。

すると以下のような画面が表示されます。

2.Flutterプラグインのインストール

先程の画面右下のConfigureをクリックし、Preferencesをクリック。

すると以下の画面が表示されます。

左側のタブのPluginsをクリックし、検索欄にFlutterと入力し検索をかけます。
検索結果で出てくる、「Flutter」と「Flutter i18n」のinstallをクリックしインストールします。

  • 「Third-party Plugins Privacy Note」が表示されるので、Acceptをクリック。
  • 「Plugin Dependencies Detected」が表示されるので、YesをクリックしDartプラグインも同時にインストールします。

インストールが完了すると「Restart IDE」のボタンが表示されるのでクリックし、Android Studioを再起動します。

するとAndroid Studio起動後の画面に「Start a new Flutter project」という欄が追加されます。

これでAndroid Studioのセットアップは完了です。

サンプルのFlutterアプリを実行

1.Flutterプロジェクトを開く

前編の「Xcode・iOSシミュレーターセットアップ編」で作成したmy_appファイルを開いていきます。
まずはAndroid Studioを起動した画面で、Open an existing Android Studio projectをクリックします。

するとファルダ一覧が表示されるので前編で作成したmy_appファイルを選択し、Openをクリックします。
するとプロジェクトが展開されます。

2.Flutterアプリを実行

プロジェクトが展開されたら、画面上方の**<no device selected>**と書かれたセレクトボックスをクリックし、Open iOS Simulatorを選択します。

するとiOSシミュレーターが起動します。

起動が完了したら、Android Studio画面上方のRunをクリックし、Flutterアプリを起動します。

起動完了すると、iOSシミュレーターに反映されます。

これでサンプルのFlutterアプリの実行が完了しました。

Androidエミュレータのセットアップ

1.仮装デバイスを作成する

Android Studio画面の上タブのToolsをクリックし、AVD Managerを選択します。

Your Virtual Devicesの画面が表示されるので、画面中央のCreate Virtual Devicesをクリックして仮装デバイスを作成します。

お好みで仮装デバイスを設定してNextをクリックしていき、最後Finishをクリックすると仮装デバイスの作成ができます。

作成が完了すると、Your Virtual Devices画面に先程作成した仮装デバイスが表示されます。

2.Android Studioのセットアップ

Androidエミュレータを実行するために、Android Studio側でも設定を行います。
Android Studio画面の上タブのToolsをクリックし、SDK Managerを選択します。

Preferences for ProjectsのAndroid SDK画面が表示されます。
Android SDK画面のSDK Platformsタブにて、先程作成した仮装デバイスのAndroidバージョンと同じバージョンのチェックボックスをクリックしてチェックを入れておきます。

次にタブのSDK Platform右横のSDK Toolsをクリックします。
画面右下のHide Obsolete Packagesのチェックボックスを外し、Android SDK Tools(Obsolete)にチェックを入れます。
最後に画面右下のOKをクリックすることで先程チェックを入れた、AndroidのバージョンとAndroid SDK Toolsがインストールされます。

これでAndroidエミュレータを起動する準備が整いました。

3.AndroidエミュレータでFlutterアプリを起動

Your Virtual Devices画面に表示された仮装デバイスのActions欄のLaunch this AVD in the emulatorボタンをクリックして起動します。

以下Androidエミュレータ起動後画面。

起動ができたら、iOSシミュレーターの時と同様にAndroid Studio画面のRunボタンをクリックすることで、現在展開中のFlutterプロジェクトを実行することができます。

これでAndroidエミュレータにてFlutterアプリを実行できるようになりました。

VSCodeのインストール

※VSCodeで開発することのない方（AndroidStudioしか使わない方）はこちらの構築は不要です

1.VSCodeをインストールする

VSCode公式サイトへ行き、今すぐ無料でダウンロードするをクリックします。

各自使用しているOSのものをダウンロードします。

ダウンロードが完了したら解凍し、VSCodeを起動します。

VSCodeのセットアップ

1.Flutterプラグインをインストールする

VSCodeが起動できたら、左タブのExtensionsをクリックします。

検索欄でFlutterと入力し、Flutterプラグインをインストールします。

2.Androidライセンスを承諾する

ターミナルにて以下を実行します。

flutter doctor —android-licenses

yを複数回入力していき、ライセンス条項を承諾していきます。

3.flutter doctorを実行

ターミナルにて以下を実行します。

flutter doctor

実行すると以下のように表示されます。
ここで、Connected device以外のものに全て✔︎（チェックマーク）が入っていたらセットアップ完了となります。
もし!（ビックリマーク）がついているものがありましたら、そこに記述されている内容通りに行い、再度flutter doctorを実行してください。

最後に

以上で終了となります。お疲れ様でした。
最後までご覧下さりありがとうございました。

参考サイト[Flutter公式サイト]

Discussion