この記事の概要
Flutter開発環境を構築後、実際に動く状態になっているのか、サンプルアプリを使って稼働確認します。
最初にAndroidStudioで試し、次にVSCodeで試しました。
＜環境＞
・MacBook Air（15インチ、M2、2023）Sonoma 14.6.1
・Android Studio Ladybug Feature Drop | 2024.2.2
・VSCode 1.96.2 (Universal)
・Flutter 3.27.1
Android Studioで試す
まずAndroid Studioに以下2つのプラグインがインストールされていることが前提です。
・Dart
・Flutter
AndroidStudioを起動し、「New Flutter Project」を選択する。
つまづきポイントだが、ジェネレーターでは「Flutter」を選択する。
「New Flutter Project」を選択したのだからデフォルトで「Flutter」が選択されているといいのに。
プロジェクト名に適当な値を入力する。
英小文字とアンダースコアのみ使える。
大文字を入れるとこんなエラーが表示される。
プロジェクト作成後。
実行ボタンを押す前に、その左隣のデバイスを確認する。
「<no device selected>」となっている場合は、何かしらを選択してから実行ボタンをクリックする。
ちなみに、Android Emulatorが表示されない場合は、一度Refreshしてみると現れるかも。
実行ボタンを押下してもうまく動かない場合
実行ボタンを押下してもうまく起動せずにこの↓エラーメッセージが表示される場合は以下を試してみてください。
「Error connecting to the service protocol: failed to connect to」
DeviceManagerをクリックし、起動中なら一旦停止する。
停止すると再生ボタンに変わるので、もう一度起動する。
すると勝手にRunning Device画面になり、デバイスが起動したらホーム画面が表示される。
その上で、アプリの実行ボタンを押下するとサンプルアプリが起動する。
VSCodeで試す
「コマンドパレット」を表示する。
「flutter」を入力し、「New Project」を選択する。
「Application」を選択する。
プロジェクトの配置先を指定する。
プロジェクト名を入力する。
信頼するを選択。
プロジェクトが作成できたら、右下のMac OSをクリックし、起動したいデバイスを選択する。
すると、自動的にデバイスが起動される。
VSCodeに戻ってF5を押すとサンプルアプリが起動する。
F5を押下してもうまく起動せずにこの↓エラーメッセージが表示される場合は、ファイヤーウォールの無効化を試してみてください。
「Could not GET 〜」
「Got soket exception 〜」
私の環境ではファイヤーウォールの無効化で起動できるようになりました。
以上。