[Flutter] ブラウザ/iOS/Androidでの稼働確認方法

2023年4月25日2023年10月3日

Flutterは1つのコードで異なるデバイスのアプリを開発できるクロスプラットフォームフレームワークです。本記事では、１つのコードを複数のデバイスで稼働確認を行う方法を紹介します。

今回利用するサンプルコード

以下のコードをブラウザ/iOS/Androidそれぞれで確認します。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
        selectedItemColor: Colors.amber[800],
        onTap: (int index) {},
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

各デバイスで確認する

稼働確認できるデバイスを確認する

コードを記載した後、稼働確認するには以下のコードをコマンドプロンプト上で入力します。

flutter devices

実行結果として、以下のように、稼働確認可能なデバイスが表示されます。

2 connected devices:

macOS (desktop) • macos  • darwin-arm64   • macOS 13.3.1 22E261 darwin-arm64
Chrome (web)    • chrome • web-javascript • Google Chrome 112.0.5615.137

稼働確認を行う

実行可能な稼働確認デバイスが確認できたら、実際にflutterを実行します。

flutter run -d <device-id>
例) flutter run -d chrome

実行したら、指定したデバイスで記載したコード内容が表示されます。

また、<device-id>を指定せずに実行すると、以下のように、起動するデバイスを選択する画面がプロンプト上に表示されるので、起動したいデバイスの左側の番号を入力することで、デバイスが起動します。

# device-idを指定せず、"flutter run" を実行したら以下の内容が表示されます。
Multiple devices found:
macOS (desktop) • macos  • darwin-arm64   • macOS 13.3.1 22E261 darwin-arm64
Chrome (web)    • chrome • web-javascript • Google Chrome 112.0.5615.137
[1]: macOS (macos)
[2]: Chrome (chrome)
Please choose one (To quit, press "q/Q"): "ここに起動したいデバイスの番号を入力する"

ブラウザで稼働確認

上記、デバイス一覧に記載のブラウザを指定することで、ブラウザでコード内容が表示されます。

flutter run -d chrome

以降の内容は、下記記事の内容を把握している前提で記載します。

iOSシミュレータで稼働確認

コマンドプロンプトで以下を実行するとシミュレータが起動します。

open -a Simulator

起動した状態でデバイスリストを確認すると、iOSデバイスのシミュレータが追加されていると思います。

# デバイス一覧を確認する
flutter devices

# 以下の内容がプロンプト上に表示される
#iPhone SE (2nd generation) (mobile) • XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
#macOS (desktop)                     • macos                                • darwin-arm64   • macOS 13.3.1 22E261 darwin-arm64
#Chrome (web)                        • chrome                               • web-javascript • Google Chrome 112.0.5615.137

<device-id>を指定して起動すると、上記、ブラウザで表示された内容と同等のものがiOSシミュレータ上に表示されます。

<device-id>は”XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX”で記載している部分です。実際には別の文字列が入っていますが、マスクしているため、全てX文字で置換して表示してます。

flutter run -d XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX

Androidエミュレータでの稼働確認

`flutter devices`コマンド実行時に、Androidエミュレータが見つからない場合、以下の手順でエミュレータを起動してください。エミュレータの追加方法は以下を参考にしてください。

macOSでの稼働確認

macOSも含めてクロスプラットフォームアプリを作成する場合、まず、pubspec.yaml の dependencies: に以下を追加してください。

dependencies:
  desktop_window: ^0.4.0

上記状態で、起動コマンドを実行すると、macOSアプリが起動します。

flutter run -d macos

ブラウザ/iOS/Androidシミュレータで同時確認

Flutterでは、iOSおよびAndroidシミュレータを同時に起動することができます。以下の手順で行うことができます。

iOSシミュレータを起動する

ターミナルを開き、Flutterプロジェクトのルートディレクトリに移動し、以下のコマンドを実行してiOSシミュレータを起動します。

flutter run -d <ios-device-id>

<ios-device-id>の部分には、起動したいiOSシミュレータのIDを指定します。

Androidシミュレータを起動する

別のターミナルを開き、Flutterプロジェクトのルートディレクトリに移動し、以下のコマンドを実行してAndroidシミュレータを起動します。

flutter run -d <android-device-id>

<android-device-id>の部分には、起動したいAndroidシミュレータのIDを指定します。

このように、複数のターミナルを使ってiOSおよびAndroidシミュレータを同時に起動することができます。ただし、PCのスペックによっては、両方のシミュレータを同時に起動するとパフォーマンスが低下する場合があります。

まとめ

FlutterでiOSおよびAndroidシミュレータを起動するには、ターミナルでflutter runコマンドを実行し、起動したいデバイスのIDを指定します。例えば、iOSシミュレータを起動する場合はflutter run -d <ios-device-id>、Androidシミュレータを起動する場合はflutter run -d <android-device-id>となります。両方を同時に起動する場合は、別々のターミナルでコマンドを実行します。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！