前編では、Flutter SDKのインストール、エディタの準備、プラグインのインストール、およびオプションのAndroid StudioとXcodeのインストールを行いました。後編では、Androidエミュレータのセットアップと、Flutterアプリの動作確認を行います。

5. エミュレータ/シミュレータのセットアップ

Flutterアプリを開発する際には、エミュレータ/シミュレータ上でアプリの動作を確認しながら進めるのが一般的です。このチュートリアルでは、Androidエミュレータを使用します。

5.1 Androidエミュレータ

Androidエミュレータを使用するには、Android StudioでAVD（Android Virtual Device）を作成する必要があります。以下の手順に従ってください。

1. Android Studioを起動します。
2. "Configure" -> "AVD Manager" をクリックします。
3. "Create Virtual Device" ボタンをクリックします。
4. "Phone" カテゴリから、任意のデバイス（例：Pixel 6）を選択し、"Next" をクリックします。
5. システムイメージを選択します。推奨はx86かx86_64のイメージです。最初はダウンロードが必要な場合がありますので、ダウンロードしてから"Next"をクリックします。
6. AVDの設定を確認し、必要に応じて変更します。特に問題がなければ、そのまま "Finish" をクリックします。
7. 作成したAVDが一覧に表示されます。右側の緑の再生ボタンをクリックして、エミュレータを起動します。
   • エミュレータの起動には、少し時間がかかる場合があります。

6. 動作確認：最初のFlutterアプリを実行

エミュレータが起動したら、Flutterアプリを実行して動作確認を行いましょう。ここでは、VS Codeを使ってFlutterのサンプルアプリを作成し、エミュレータ上で実行する手順を説明します。

1. VS Codeを開きます。
2. コマンドパレットを開きます（Ctrl+Shift+P / Cmd+Shift+P）。
3. 「Flutter: New Project」と入力し、選択します。
4. プロジェクトのテンプレートとして「Application」を選択します。
5. プロジェクトの保存先フォルダを選択し、プロジェクト名（例：my_first_app）を入力します。
   • プロジェクト名には、スネークケース（小文字とアンダースコア）を使用します。
6. プロジェクトが作成され、VS Codeで開かれます。
7. 画面下部のステータスバーで、実行するデバイスとして起動したエミュレータが選択されていることを確認します。
   • 表示されていない場合は、ステータスバーの右側にあるデバイス名（例：No Devices）をクリックし、リストからエミュレータを選択してください。
8. lib/main.dart ファイルを開きます。これが、Flutterアプリのエントリーポイントとなるファイルです。
9. ツールバーの「Run」->「Start Debugging」を選択するか、F5キーを押して、アプリを実行します。
   • 初回実行時には、必要なファイルのダウンロードやビルドが行われるため、少し時間がかかります。
10. エミュレータ上に、"Flutter Demo Home Page" というタイトルのサンプルアプリが表示されます。画面中央の「+」ボタンをタップすると、カウンターが増加することが確認できます。

これで、Flutterアプリの動作確認が完了しました。

次に、このサンプルアプリを修正して、"Hello World" を表示するように変更してみましょう。

1. lib/main.dart ファイルを開きます。
2. MyHomePage クラスの _incrementCounter メソッドを、以下のように変更します。

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

↓

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter = 0; // カウンターをリセット
    });
  }

3. MyHomePage クラスの build メソッド内の、Text ウィジェットの部分を以下のように変更します。

          Text(
            '$_counter',
            style: Theme.of(context).textTheme.headlineMedium,
          ),

↓

          Text(
            'Hello World', // 表示するテキストを変更
            style: Theme.of(context).textTheme.headlineMedium,
          ),

4. ツールバーの「Restart」ボタン（緑色の丸い矢印）をクリックするか、Shift+F5キーを押して、アプリを再起動します。
5. エミュレータ上に、「Hello World」というテキストが表示されます。「+」ボタンをタップすると「Hello World」に戻ります。

これで、Flutterアプリで "Hello World" を表示することができました。