DartとFlutterでAndroidアプリ開発をはじめてみた

Dart

Mac にFlutterをインストールして使えるようにする

Macにflutterをインストールして使えるようにする方法です。

FlutterはiOSとAndroidの両方のアプリをほとんど同じコードベースで開発できるのが特徴です。
一つのコードで2つのプラットフォームに対応できるということです。

とりあえず、ここではAndroid用の開発環境をセットアップします。

flutterをダウンロードする

flutter.ioからflutter_macos_v1.2.1-stable.zip(現時点)をダウンロードした後、zipファイルをダブルクリックで解凍します。

解凍するとflutterフォルダが生成されます。

flutterのパスを通す

このflutterフォルダ内のbinフォルダにあるflutterがどこからでも使えるようにパスを通します。

ターミナル vim ~/.bash_profile

でホームにある隠しファイル.bash_profile

export PATH="/[flutterフォルダが存在するパス]/flutter/bin:$PATH"

を追記します。

これで、flutter/bin内にあるコマンドをどこからでも参照できるようになります。

flutterフォルダがある場所でpwd コマンドを実行するとパスを確認することができます。

(pwd = present working directory (現在のワーキングディレクトリ))

source コマンドで設定を再読込します。

ターミナル source ~/.bash_profile

flutterコマンドを実行してみます。

ターミナル flutter

Manage your Flutter app development.

Common commands:

...

のようにflutterコマンドが存在しているような結果がでればひとまずOKです。

もし、command not found のようなメッセージがでるようであれば、ターミナルを再立ち上げしてみてください。設定が読み込まれていない可能性があります。

Android Studioをインストールする

Flutterでアンドロイドアプリを制作できるようにセットアップします。

なにわともあれAndroid Studioをダウンロード&インストールします。

.dmgファイルがダウンロードされますので、ダブルクリックで中身を開いて、指示にしたがってアプリケーションフォルダにアプリを移します。

アプリケーションフォルダからAndroid Studioを起動します。

ターミナル flutter doctor --android-licenses
アンドロイドSDKのライセンスの確認を行います。全部”y”(yesという意味)と入力してエンターでOKです。

エミュレータの設定

アプリをテストするための仮想環境をエミュレータと呼びますが、その設定を行います。

Android Studio の
Tools → AVD Manager
から + Create Virtual Device...をクリックします。

Virutal Device Configuration

トラブルの解決

flutter runを実行すると

No connected devices.

Run 'flutter emulators' to list and start any available device emulators.

If you expected your device to be detected, please run "flutter doctor" to
diagnose
potential issues, or visit https://flutter.io/setup/ for troubleshooting tips.

なぜか、デバイスとOS環境の組み合わせが、Nexus 5x + Pie の設定ではflutter run でエミュレータと接続することができなかったです。

Pixel XL + Q の組み合わせで再度デバイス環境を作成するとエミュレータとflutterを接続することができました。

うまく行かないときはデバイスとOSの組み合わせを変更してみると良いかもしれません。

コメント