【Flutter】iOSのエミュレータ上でAndroidの動きを確認する方法

はじめに

Flutterでアプリ開発中にiOSとAndroidで画面を分けたいなと思う場面がありました。
Androidのシミュレータや実機でビルドし直すのがめんどくさい時に役に立つと思います。

MaterialApp内のthemeを設定する

return MaterialApp(
	//themeを以下のように設定する
      theme: ThemeData(platform: TargetPlatform.android),
    );

このようにすることでiOSのデバイスでもAndroidの動きを確認することができます！

逆もまた然りでiOSを指定することもできます

return MaterialApp(
	//themeを以下のように設定する
      theme: ThemeData(platform: TargetPlatform.iOS),
    );

他にも TargetPlatform.macOS や　TargetPlatform.windows なども指定可能です。

https://api.flutter.dev/flutter/material/ThemeData/platform.html

使用例

iOSとAndroidでUIが異なる時の簡単な確認に使用しました。

ログイン方法をiOSとAndroidで変えている例

Future<void> showLoginDialog(
    BuildContext context, MyPageModel profileModel) async {
  return showDialog<void>(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context) {
      return AlertDialog(
        title: const Text('ログインが必要です'),
        content: SingleChildScrollView(
          child: ListBody(
            children: <Widget>[
              SignInButton(
                Buttons.Email,
                text: 'Emailでサインイン',
                onPressed: () async {},
              ),
	      //iOSでのみ使えるようにしたい
              if (Theme.of(context).platform == TargetPlatform.iOS)
                SignInButton(
                  Buttons.Google,
                  text: 'Googleでサインイン',
                  onPressed: () async {},
                ),
		//iOSでのみ使えるようにしたい
              if (Theme.of(context).platform == TargetPlatform.iOS)
                SignInButton(
                  Buttons.AppleDark,
                  text: 'Appleでサインイン',
                  onPressed: () async {},
                )
            ],
          ),
        ),
        actions: <Widget>[
          TextButton(
            child: const Text('閉じる'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

TargetPlatform.iOS	TargetPlatform.android