MacBookPro
macOS Monterey Ver.12.5.1
Xcode Ver.13.4.1　※Xcodeはインストール済みとします

Flutterについて

FlutterはGoogle社の開発したモバイル向けのフレームワークです。一番の特徴はマルチプラットフォームに対応している点で、一度の開発でiOS、Android等のアプリが作れるため、コストの削減になるかと思います。言語はDartという、これもGoogle社で開発した言語を使用します。

手順１．Android Studioダウンロード＆インストール

以下リンクよりAndroid Studioをダウンロードし、インストールを行います。
https://developer.android.com/studio

手順２．Flutter SDKダウンロード＆配置

以下リンクより「flutter_macos_3.3.0-stable.zip」をダウンロードします。
https://docs.flutter.dev/get-started/install/macos
ダウンロード後、解凍した「flutter」フォルダを任意の場所に配置します。例えばユーザフォルダ直下など。

手順３．パスを通す

flutterをコマンドで使用できるようにパスを通します。パスの通し方はシェルの種類により変わってきますが、ここではbashを前提とした説明となります。シェルの種類はターミナルで以下コマンドを実行することで確認できます。
echo $SHELL
bashだとして、、まずユーザフォルダの配下にある「.bash_profile」というファイルを開きます。なければ作成します。開いたら以下を追記して保存します。
export PATH="$PATH:[配置したflutterフォルダのパス]/bin"
私の場合、flutterフォルダをユーザフォルダ直下に置いたので例えば以下のようになります。
export PATH="$PATH:/Users/lumimac/flutter/bin"
その後、以下コマンドでflutterを配置したパスが表示されればOKです。
which flutter

手順４．flutter doctor実行

ターミナルで以下コマンドを実行します。
flutter doctor
おそらくいくつか×がついたエラーが表示されると思います。私の場合３つのエラーが表示されました。１つずつ解決法をご説明します。

①cmdline-tools component is missing
Android StudioのSDK Managerを開き「Android SDK＞SDK Tools」タブを開きます。開いたら画面下部「Hide Obsolete Packages」のチェックを外し、
「Android SDK Command-line Tools(latest)」と「Android SDK Tools(Obsolete)」にチェックを付けてOKを押します。

②Some Android licenses not accepted.
以下コマンドを実行します。実行すると途中で何度か「y/n」の入力を求められますが全て「y」を入力します。
flutter doctor --android-licenses

③CocoaPods not installed
以下コマンドを実行します。
sudo gem install cocoapods

全て対応したら再度 flutter doctor を実行して、全てのエラーが解消されたことを確認できればOKです。

手順５．プラグインインストール

Android StudioのPluginsより、検索欄で「flutter」を入力し、「Flutter」をインストールします。
インストールするとボタンが「Install」から「Restart IDE」に変るので「Restart IDE」を押してAndroid Studioを再起動すればOKです。

プロジェクト作成

以上で導入が完了しました。試しに新規でプロジェクトを作成してみます。

Android StudioのProjectsから「New Flutter Project」を選択します。

続いて「Flutter」を選択して「Next」へ。

続いてProject nameを適当に入力して「Finish」するとプロジェクトが作成されます。Project locationはプロジェクトが作られる場所で、適宜変更します。デフォルトだとユーザフォルダ配下に「StudioProjects」というフォルダができて、その直下にプロジェクトが作成されます。

実行

シュミレータで実行してみます。まず、画面上部より「Open iOS Simulator」を選択します。

そうするとシュミレータが起動されます。起動したら、画面上部の再生ボタン（三角記号）を押して実行します。

ビルドにやたらと時間がかかりますが、、ひとまず実行できました。新規でプロジェクトを作っただけですが、簡単な画面デザインと実装が入っています。右下＋ボタンを押すと画面中央のカウンタがアップします。

まとめ

導入までは難しくありませんでした。これから色々と試してみようと思います。気になるのが画面のデザインの仕方や、Dartはどうなのか、どこまでFlutterでできてどこからネイティブじゃないとできないのか、とか。今後、そこらへんを試しつつ記事にできたらと思います。