前回の記事で、Flutterの開発環境はひとまず出来たはずなので、早速プロジェクトを作り、動作を確認してみます。

新規プロジェクト作成から動作確認まで

Android Studioを起動し、「Start a new Flutter project」を選択します。

Flutter Applicatoinを選択します。

Flutter SDKのパスを指定し、Nextをクリックします。

パッケージ名などを指定します。今回は動作確認だけなので、すべてデフォルトで設定し、Finishをクリックします。

エディタが立ち上がりました。AndroidデバイスがUSBデバッグ有効の状態でつながっている場合、実行環境に物理デバイスが指定できます。緑色の再生ボタンをクリックすればビルドが始まりアプリケーションが実行されます。

ビルドしたアプリが、実機上で確認できました!

物理デバイスが存在しない場合、エミュレータを起動してそちらで確認することもできます。
ドロップダウンから作成したエミュレータ(仮想デバイス)を選択することで、エミュレータ上で動作確認を撮ることができます。

以上です。

ひとまずFlutterでHello World的な動作確認を取ることができました。開発環境の構築はかなり簡単でしたので、「アプリが作りたいっ！」と思ったらすぐに開発が始められそうです。
といっても、Flutterの開発言語であるDartは全く触ったことがないので、Dartも併せて勉強が必要ですね。

投稿 Flutter 最初のプロジェクトを作成 は Sheltie's Garage に最初に表示されました。

最近社内の別チームがFlutterを利用したアプリを開発しており、社内勉強会にて概要を知る機会がありました。現在Webで稼働させている一部のアプリをスマホネイティブに作り変えたいなという思いもあり、Flutterを入れてみることにしました。

環境作成

まずは開発環境の構築から・・・
以下の資料をもとに設定しました。
https://flutter.dev/docs/get-started/install/windows

Flutterの取得

注意点として、権限を要求されるディレクトリにインストールしてはいけません。( C:\Program Files\ など)
自分は「C:\flutter」に展開しました。

システム変数にflutter\binパスを追加

その後、プロンプトから「flutter doctor」を実行することでインストール状態が確認できます。

実行したところ、ライセンスに同意していないという警告が表示されたため、表示内容の通り
「flutter doctor –android-license」を実行しました

Android Studioインストール

今回Android Studioはインストール済みのため、自分の場合最新バージョンへのアップデートのみ行いました

Androidデバイスのデバッグ設定

Androidで隠しコマンドを実行するとUSBデバッグを有効にできます。
https://developer.android.com/studio/debug/dev-options?hl=ja
が参考になるかと思います。

Android Studio エミュレータ設定

最後にAndroidエミュレータを作成します。Android Studio 3.5.3では、以下の手順にて作成できました。

Welcomeダイアログの「Configure > AVD Manager」を選択

Create Virtual Deviceを選択

端末一覧が表示されるため、選択後「Next」をクリック

Androidバージョンが選択できるので、選択後「Next」をクリック

必要事項を設定し「Finish」で設定完了

ひとまず以上

開発環境とエミュレータのセットアップは以上です。
次はシンプルなFlutterアプリを作成し、実行してみます。

投稿 Flutter事始め は Sheltie's Garage に最初に表示されました。