この記事は、ハイブリッドアプリのフレームワークであるFlutterの始め方チュートリアルです。
公式のチュートリアル記事を参考にしつつ、環境構築でハマりがちな落とし穴について丁寧に解説しています。(mac OSを前提にしています)
Flutterとは
Flutterとは、Googleが開発したiOSとAndroidのモバイルアプリを同時に制作できるハイブリッドアプリ構築用のフレームワークです。

近年、右肩上りで人気の上がっているハイブリッドフレームワークで、日本では、競合製品であるIonicやReact Nativeなどを抑えて、不動の地位を確率しつつあります。

プログラミング言語はDartという聞き慣れない言語を使いますが、プログラミング初心者でも問題なく使えるクセのないモダンな言語です。
もし、JavaやSwiftなどのオブジェクト指向言語を使った経験があれば違和感ないと思います。
Flutterのダウンロード
下記のFluuter公式ページから最新バージョンのSDKをダウンロードします。

環境変数の設定
FlutterSDKはDownloadsフォルダにダウンロードしてください。
その上で、ターミナルで下記のコマンドを実行します。このコマンドで~/development_flutterフォルダにFlutterSDKが解凍されます。
下記のシェルでは1.22.6-stableを設定していますが、適宜あなたのダウンロードしたバージョンに応じて変更してください。
mkdir ~/development_flutter
cd ~/development_flutter
unzip ~/Downloads/flutter_macos_1.22.6-stable.zip
環境変数の設定ファイルの編集
次に環境変数にFlutterを設定します。下記のコマンドを実行してターミナルの環境変数ファイルを開きます。
open $HOME/.bash_profile
もし、.bash_profile does not exist.とファイルがないという文言がターミナルに表示されたら、
touch $HOME/.bash_profile
と入力してファイルを生成してください。
このファイルの最後の行に、
export PATH=$PATH:/Users/ここにユーザ名を入れます/development_flutter/flutter/bin
と最後の行に書きこみます。
上記コマンドで「ここにユーザ名を入れます」と書いてあるところに各個人のPCのホームフォルダの名前を入れてください。例えば、/Users/yamada/とかになります。
もしPATHが反映されない場合は、下記のコマンドを実行してみてください。
source ~/.bash_profile
設定を確認
下記のコマンドが正常に実行できることを確認してください。これが実行できればPATHは正常に通せています。
このコマンドは付随的にプログラミング言語などの環境を整えてくれます。
このコマンドの出力結果にエラーがあれば、内容を確認してそれに対応してください。
flutter doctor
ここまででFlutterSDKの構築は完了です。次にAndroidとiOS向けにアプリを作っていきます。
iOS向けのアプリビルド
XCodeインストール
iOSビルドするためには、XCodeというMacの開発ツールが必要です。これをインストールしていきます。
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
シミュレーター起動
次にiPhoneのシミュレーターを起動します。下記のコマンドを実行してください
open -a Simulator

次に現在のフォルダ階層に新しく「my_app」という名前のFlutterアプリを作成します。
flutter create my_app
アプリ起動
最後に、flutter runを実行すれば、サンプルアプリが起動できるはずです。
cd my_app
flutter run

ここまでで何かうまくいかない場合は、XCodeをAppStoreでアップデートしてからやり直すと良いかもしれないです。
ちなみに、
実機で実行する場合は、AppleDeveloperアカウントというライセンス資格を持っている必要があるので、下記のページで購入してください。2021年2月時点では99 USD /年の費用がかかります。
https://developer.apple.com/support/compare-memberships
ライセンス以外にも、各種設定が必要なので、iOSのネイティブ開発している人以外は、まずエミュレーターで実行するのがオススメです。
Android向けのアプリビルド
Android Studio起動
AndroidStudioを下記のページからインストールしてください。
インストールしたらAndroid Studioで「my_app」という名前のFlutterアプリを開きます。
Android Studioを起動するとFlutterのプラグインやDartプラグインを入れるようにポップアップで促される事があります。(下図)
ポップアップをクリックするとインストールが始まるので、プラグインをインストールしてあげてください。

Android端末を接続
Android端末で開発者向けオプションとUSBデバッグを有効にします。詳細な手順は下記URL参照してください。

USBケーブルを使用して、Android端末をコンピューターに接続します
アプリ起動
Android Studioのツールバーの三角形の実行アイコンをクリックします。

するとアプリが起動します!

おわりに
いかがでしたでしょうか。Flutterは今もっとも勢いのあるハイブリッドフレームワークです。
これからFlutterアプリ作成スキルを学んでいきましょう。