モバイルアプリ開発

Flutter入門！環境構築からサンプルアプリ起動まで解説！

この記事は、ハイブリッドアプリのフレームワークであるFlutterの始め方チュートリアルです。

公式のチュートリアル記事を参考にしつつ、環境構築でハマりがちな落とし穴について丁寧に解説しています。(mac OSを前提にしています)

Flutterとは

Flutterとは、Googleが開発したiOSとAndroidのモバイルアプリを同時に制作できるハイブリッドアプリ構築用のフレームワークです。

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

プログラミング言語はDartという聞き慣れない言語を使いますが、プログラミング初心者でも問題なく使えるクセのないモダンな言語です。

もし、JavaやSwiftなどのオブジェクト指向言語を使った経験があれば違和感ないと思います。

Flutterのダウンロード

下記のFluuter公式ページから最新バージョンのSDKをダウンロードします。

Flutter SDK releases
All current Flutter SDK releases, both stable, dev, and master.

環境変数の設定

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を下記のページからインストールしてください。

Download Android Studio and SDK tools | Android Developers

インストールしたらAndroid Studioで「my_app」という名前のFlutterアプリを開きます。

Android Studioを起動するとFlutterのプラグインやDartプラグインを入れるようにポップアップで促される事があります。（下図）


ポップアップをクリックするとインストールが始まるので、プラグインをインストールしてあげてください。

Android端末を接続

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

Configure on-device developer options | Android Developers
Learn how to configure system behaviors that help you profile and debug your app performance.

USBケーブルを使用して、Android端末をコンピューターに接続します

アプリ起動

Android Studioのツールバーの三角形の実行アイコンをクリックします。

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

おわりに

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