FlutterでWebを含めてPlatformを判定する

Flutter WebでTargetPlatformを指定しようとしたら、
TargetPlatform.webがなかったので、
いろいろ調べたときの備忘録(*´ω｀*)

Webの場合は、kIsWebを使わないといけない

TargetPlatform.webやPlatform.isWebは存在しないっぽい。
また、ブラウザでPlatform.isAndroidなどを呼ぶとクラッシュする。

仕組みなどはこの記事に詳しく書かれている。

• Flutter の Platform 判定を正しく理解する. Flutterは、Android・iOS・Web・Windows・macOS・L… | by mono  | Flutter 🇯🇵 | Medium

正しく判定したい場合は、TargetPlatformとkIsWebを併用する感じ。

• macのブラウザ = TargetPlatform.macOS / kIsWeb=true
• iOSのアプリ = TargetPlatform.iOS / kIsWeb=false
• Androidのアプリ = TargetPlatform.android / kIsWeb=false
• Androidのブラウザ = TargetPlatform.android / kIsWeb=true

現在のPlatformを確認するサンプル

class App extends HookConsumerWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 現在のTargetPlatformの取得
    TargetPlatform platform = Theme.of(context).platform;
    
    final platformName = "${platform.name}${kIsWeb ? "+web" : ""}";
    debugPrint("platformName=$platformName, platform=$platform, isWeb=$kIsWeb");
    // => platformName=macOS+web, platform=TargetPlatform.macOS, isWeb=true
    
    // 略
  }
}

TargetPlatformのコード

TargetPlatformの定義はこんな感じ。

• flutter/packages/flutter/lib/src/foundation/platform.dart at 3.10.5 · flutter/flutter · GitHub

/// The platform that user interaction should adapt to target.
/// The [defaultTargetPlatform] getter returns the current platform.
enum TargetPlatform {
  /// Android: <https://www.android.com/>
  android,
  /// Fuchsia: <https://fuchsia.dev/fuchsia-src/concepts>
  fuchsia,
  /// iOS: <https://www.apple.com/ios/>
  iOS,
  /// Linux: <https://www.linux.org>
  linux,
  /// macOS: <https://www.apple.com/macos>
  macOS,
  /// Windows: <https://www.windows.com>
  windows,
}

universal_platformのenum

universal_platformを使うとWebを含めた判定が楽になる。

• universal_platform | Dart Package

// universal_platformのコード
enum UniversalPlatformType {
  Web,
  Windows,
  Linux,
  MacOS,
  Android,
  Fuchsia,
  IOS
}

// 使い方
bool isIos = UniversalPlatform.isIOS;
bool isWeb = UniversalPlatform.isWeb;

• flutter-universal-platform/lib/universal_platform.dart at master · gskinnerTeam/flutter-universal-platform · GitHub

PageTransionsThemeでWebも考慮する

Map<TargetPlatform, PageTransitionsBuilder>のような場合は、
kIsWebで渡すMapを切り替えるといいっぽい。

final appTheme = ThemeData(
  pageTransitionsTheme: const PageTransitionsTheme(
    builders: kIsWeb
        // webの設定
        ? {
            TargetPlatform.android: _webTransition,
            TargetPlatform.fuchsia: _webTransition,
            TargetPlatform.iOS: _webTransition,
            TargetPlatform.macOS: _webTransition,
            TargetPlatform.linux: _webTransition,
            TargetPlatform.windows: _webTransition,
          }
        // appの設定
        : {
            TargetPlatform.android: _appTransition,
            TargetPlatform.fuchsia: _appTransition,
            TargetPlatform.iOS: _appTransition,
            TargetPlatform.macOS: _appTransition,
            TargetPlatform.linux: _appTransition,
            TargetPlatform.windows: _appTransition,
          },
  ),
);

以上!! マルチプラットフォーム、こういうのが大変。。(*´ω｀*)

参考にしたサイト様

• Flutter の Platform 判定を正しく理解する. Flutterは、Android・iOS・Web・Windows・macOS・L… | by mono  | Flutter 🇯🇵 | Medium
• universal_platform | Dart Package