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コマンドを回しながら×を消していきましょう。
お疲れ様でした。
これで開発環境は整ったはずです。
次回からは簡単なアプリを実際に作ってみましょう。

コメントを残す