【Flutter基礎】macOSへ開発環境を構築する【VScode】

AndroidアプリとiOSアプリのクロス開発フレームワークであるFlutterを勉強中なので、忘備録としてもまとめていきます。

2019年6月現段階では日本語の文献も少なく（日本語公式ドキュメントもありません）、つまづいたところはだいたい英語で調べる必要があったので、翻訳しつつわかる範囲で解説もできたらなと思います。

まずは開発を始めるために、パソコンへ環境を整えていきます。

Flutterってなんぞや？という人はこちらを参照にしてみてください（英語）。

参考 Flutter

注意

この記事は「プログラムとかよくわかんないけど、とにかくアプリ開発がしたい」という方向けに書いています。そのため多少冗長になることをご了承ください。

開発環境を構築しよう

開発環境を構築しよう

開発環境の構築は基本公式ドキュメントにしたがって行いますが、ところどころわかりやすくするため改変を加えています。

またmacOSでの環境構築をしていきます。

https://flutter.dev/docs/get-started/install/macos
このページを開いて進めていきましょう。

Flutter SDKをインストールする

まずは青色のボタンを押して、Flutter SDKをダウンロードしましょう。

ちなみにSDKというのは、Software Development Kitといって、開発に必要なソフトをまとめたものになります。

ダウンロードが完了したら、Finder内適当な場所に解凍しましょう。

ホームディレクトリなどがいいと思います。

PATH環境変数を追加する

次にPATHを通す作業を行います。

ここからはターミナルというアプリケーションを使うので、cmd+spaceを押して「ターミナル」と検索、アプリを開いてください。

真っ黒なウィンドウが出てきたと思います。

ここで「.bash_profile」というファイルに環境変数を追記していきます。

（PATHや環境変数についてよくわからない人は、これを読んで勉強しましょう。）

この.bash_profileをvimというエディタを使って編集していきます。

先ほどのターミナルへ以下を入力してください。

vim ~/.bash_profile

するとエディタが起動するので、以下を一番下に追記します。

# setting PATH for Flutter
PATH="$PATH:~/flutter/bin"
export PATH

記述をしたらcontrol+cを押して編集を終わり、「:wp」を入力してファイルを保存しましょう。

Xcode/Android studioをインストールする

続いてiOS開発に必要なXcode、Androidに必要なAndroid studioをインストールします。

ターミナルへ以下をコピペしてください。

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

またAndroid studioをこちらからダウンロードします。

ダウンロードが完了したらセットアップウィザードの指示に従って設定を進めます。

このとき一番新しいAndroid SDKとAndroid SDK Platform-Tools、そしてAndroid SDK Build-Toolsをインストールしましょう。

エディターの設定をする

各種インストールができたらエディターを設定します。

推奨エディターはAndroid studioとVisual Studio Code(VScode)となっています。

今回はVScodeを利用する前提で話を進めていきます。

まずこちらからVScodeのダウンロードをします。

VScodeを開き、cmd+shift+Pを押して「install」と入力、「Extensions: Install Extensions」をクリックしてください。

左側にまた検索ボックスが現れるので「flutter」と検索してインストールします。

同様に「Dart」もインストールしましょう。

flutter doctorをする

さて各種インストール、エディターの準備ができたので他に必要なものがないか確認しましょう。

ターミナルで「flutter doctor」と入力してみてください。

[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/obiwan/Library/Android/sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.dev/setup/#android-setup for detailed instructions.

記述は違うと思いますが、このような文字列が現れるはずです。

この文字列にはFlutterを使った開発に足りないツールをわかりやすく表示してくれます。

足りないものをコピペしてどんどんインストールするだけで勝手に環境が整うようになっています。

ここで出てくる文字列は人によって違うので、英語を頑張って解読するしかありません。

×印がついたところを読み、指示に従えば残りの環境が綺麗に整うはずです。

何度かflutter doctorコマンドを回しながら×を消していきましょう。

お疲れ様でした。

これで開発環境は整ったはずです。

次回からは簡単なアプリを実際に作ってみましょう。