Platform class

Overview

iPhoneでは、Apple SignInのボタンを表示したいけど、Androidでは表示したくない。
このような場合は、どうすればいいのか?

このクラスを使えばできるらしい?
https://api.dart.dev/stable/3.2.0/dart-io/Platform-class.html

summary

こちらのimport文を一番上に追加して、表示したくないWidgetの上に書くだけですね。

import 'dart:io' show Platform;

このコードを追加すると、iOSでビルドした時しか、Widgetが表示されなくなる。

// 追加
if (Platform.isIOS)
// iPhoneでしか表示しなくないWidget
Container(
  width: 200,
  height: 50,
child: SignInButton(Buttons.apple, onPressed: () {}),
),

画面下のグレーの部分は、DevicePreviewというパッケージを使っているので表示されているだけです。
このページのクラスをimportすれば問題なく使えると思われます。表示するだけなら、StatelessWidgetで良いです。

import 'dart:io' show Platform;
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:sign_in_button/sign_in_button.dart';

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {

    return Scaffold(
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          if (Platform.isIOS)
            Container(
              width: 200,
              height: 50,
              child: SignInButton(Buttons.apple, onPressed: () {}),
            ),
          const SizedBox(height: 20),
          Container(
            width: 200,
            height: 50,
            child: SignInButton(Buttons.google, onPressed: () {}),
          ),
        ],
      )),
    );
  }
}

iPhoneのとき

Androidのとき

thoughts

アプリをリリースしたときに、iPhoneでは、表示したいWidgetがあるけど、Androidは表示したくないというシナリオがあります。
そんな場面では、Platform classを使ってみてください。