はじめに
この記事は、以下の動画をまとめたものです。
Mac を使用していることを前提とした記事なので、Windows をお使いの方はこちらの解説動画をご覧ください。
手順は公式 HP のmacOS installに沿って行っていきます。
ではさっそく環境構築を始めていきましょう！
Flutter のインストール
まずはじめに、Flutter をインストールします。
①Flutter 公式 HPの「Install」ページでmacOS を選択
②「Get the Flutter SDK」 から zip ファイルをダウンロードし解凍
③ユーザーフォルダ直下に「development」フォルダを作成し、ダウンロードした「flutter」フォルダを移動
※動画内では「Developer」という名前で作成していますがどちらでも問題ありません。
フォルダ構成は、Macintosh HD > ユーザー > (ユーザー名)> development > flutterとなりました。
パスを通す
Flutterをインストールした後、Flutterを使えるようにするには「パスを通す」という作業が必要になります。
①使用しているシェルを調べる
ターミナルを起動して以下を実行してください。
echo $SHELL
/bin/zshと返ってきたら使用しているシェルはzsh、/bin/bash と返ってきたらbash を使用していることになります。
このシェルによって次の作業が異なってきます。
自分の環境に合ったほうを実行して進めてください。
// zshの場合
vim .zshrc
// bashの場合
vim .bash_profile
②vim というエディターが起動した状態になるので、**i **キーを押して「INSERT」モードに切り替える
③画像を参考にexport PATH="$PATH:[flutterフォルダが格納されているディレクトリ]/flutter/bin" を入力する
なお、フォルダをターミナル内にドラッグ&ドロップすることでディレクトリが自動で入力されます。
④esc キーを押してINSERTモードを終了し、:WQ と入力しENTERで内容を上書き保存
⑤ターミナルで下記を実行し、パスが表示されれば設定完了！
which flutter
次に、AndroidとiOSのセットアップを行います。
Android のセットアップ
①Android Studio 公式 HPからダウンロードし、案内に従ってインストールする
②Flutter、Dart のプラグインを導入するため、「Preferences」** **を開く
③Flutter、Dart をインストールする
④Android Studio を再起動し、初期画面に「start a new flutter project」があることを確認する
⑤プロジェクトを作成する
「Start a new Flutter Project」 → 「Flutter Application」の順で選択し、Project name にはアプリの名前を入れておきます。
「Package name」は、アプリのストアで識別するための一意な名前を設定します。
デバッグするだけなら初期設定の状態のままでも大丈夫です。
⑥デバッグのためにエミュレーターをダウンロードする
「AVD Manager」にアクセスします。
iPhone からエミュレーターをダウンロードします（画像は Pixel 3a を選択）。
⑦「再生ボタン」をタップしてエミュレーターを起動する
⑧デバックボタンを押してビルドできれば完了！
これ以降は、プロジェクトを開いたらエミュレータが選択できるようになります。
iOS のセットアップ
最後に、iOSのセットアップを行います。
① Xcode をAppStoreからダウンロードする
②Android Studio に戻り、「Open iOS Simulator」でシミュレーターを起動する
③デバックボタンを押し、Androidと同様にビルドできれば完了！
これでFlutterでアプリ開発を始める準備が整いました！
まとめ
今回を突破できたら、もうFlutter開発の８割はマスターしたようなものです。笑
環境構築が一番めんどくさいので。
ということで、次回はFlutter開発の全体像を見ていきます。