Flutterに触りながらFlutter関連のことを学んでいく記事です。
前回環境構築まで完了させたので、今回はAndroid StudioでFlutterのサンプルアプリの動作確認を実施していきます。
■前回記事はこちら↓
動作確認
Android Studioの動作確認を行っていきます。
仮想デバイスを起動して、Flutterのサンプルアプリを動かしていきます！
①プロジェクト作成
インストール直後はまっさらな状態なので新しいプロジェクトを作成していきましょう。
初期画面のCreate New Flutter Projectからプロジェクトを作成します。
(FlutterプラグインをインストールしていないとCreate New Flutter Projectは表示されないので注意)
Flutter SDKのパスを設定してください。
※自身がFlutterをインストールしたディレクトリを選択
プロジェクト名やその他設定を行っていきます。
今回は特に細かい設定は行わずデフォルトの設定で進めていきます。
プロジェクト名はとりあえずsampleとかでいいかな。
ちなみにProject nameにFlutterや_(アンスコ)などの文字は使用できませんでした。
Flutter自体やFlutterで使用されるdart言語において_(アンスコ)が特別な意味を持っているようで、そのへんが関係しているみたいです。
Finishボタンを押下してプロジェクト作成完了！
②仮想デバイス起動
前回インストールしたAndroid Studioを起動します。
画面右上にスマホマークを押下。
初期状態だと仮想デバイスが一つもないはずなので、Create Virtual Devideから新しいデバイスを作成します。
使用する画面サイズ、機種などを自由に選択できるようですね。
今回は特にこだわりなどはないのでPixel5を選択していきます。
次の画面でAndroidのバージョンを選択します。
こちらも特にこだわりはないので、最新のAndroidバージョンを選択してダウンロードします。
インストール完了！
インストールが完了したらNextボタンから次の画面へ。
名前や起動時の画面の向きなどを設定できるようです。
例のごとく何もせずデフォルト設定のままFinishボタンで完了です。
仮想デバイス起動画面に先ほど追加したデバイスが追加されているかと思います。
Actionsの起動ボタンを押下して起動しましょう。
無事仮想デバイスが起動されました！
③サンプルアプリの起動
画面右上の△ボタンを押下してサンプルアプリを起動します。
ちなみに今回起動するサンプルアプリは、Flutterインストール時に初期から入っているものです。
sample\lib\main.dart
Flutterのフォルダ構成なども次回あたりで学んでいきたいと思います。
起動情報などはコンソールで確認できます。
問題なく起動できたみたいですね。
今回のサンプルアプリは+ボタンを押下すると、真ん中に出力されている数字が1つずつ増加するわかりやすいものですね。
↓
環境構築後、仮想デバイスを起動してサンプルのFlutterアプリケーションを動作させることができました。
今回はここまでにします。
まとめ
Webアプリケーションなどは今まで携わってきたことはありますが、
モバイルのネイティブアプリに関しては全く素人なので簡単なアプリケーションが動作しただけでも楽しいですね！
次回以降はFlutterのフォルダ構成や、Flutterで使用されるdart言語について学んでいきたいと思います。
■次回