毎日Flutter生活 Advent Calendar 2025 の12日目です

こんにちは！tatata-keshiです

Flutterには、一つのコードベースからAndroidやiOSといった複数のプラットフォーム向けのアプリケーションを開発できるという強みがあります。

しかし、Flutterで用いられるMaterial DesignのウィジェットはAndroidのUIに準じているため、これをiOSで表示するとユーザー目線で違和感があります。

一方でiOSのUIに準じたCupertino DesignのウィジェットをAndroid端末で表示するのも同様に違和感を覚えます。

そのような課題を解決するため、この記事ではプラットフォームに応じて表示するUIを出し分けてネイティブなUIUXを実現する方法についてまとめました。

1. flutter_platform_widgetsについて

プラットフォームに応じてアプリケーションのUIを切り替える方法として、flutter_platform_widgetsというパッケージを使用する方法があります。

このパッケージは、MaterialウィジェットとCupertinoウィジェットの両方を抽象化し、単一のウィジェットで各プラットフォームのデザイン言語に対応させるラッパーライブラリです。

導入方法

flutter pub add flutter_platform_widgets

他にも、pubspec.yamlに直接記載してpub getを実行する方法もあります。

dependencies:
  flutter:
    sdk: flutter

  flutter_platform_widgets: ^9.0.0

これで導入は完了です。次に実際の使い方を見てみましょう。

2. 実装例

冒頭でも説明したように、flutter_platform_widgetsは単一のウィジェットでMaterialやCupertinoといったプラットフォームごとのデザイン言語に対応させるパッケージです。

ここからは実装方法について解説します。

MaterialAppをPlatformAppに置き換える

今回はデフォルトのカウントアプリをflutter_platform_widgetsで置き換えていきます。

はじめに標準のMaterialAppを、flutter_platform_widgetsが提供するPlatformAppに置き換えます。これにより、アプリ全体がプラットフォームを意識した動作をするようになります。

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
  // MaterialAppからPlatformAppに書き換える
    return PlatformApp(
      title: 'Flutter Demo',
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Scaffoldとその子要素を書き換える

次に、Scaffoldとその子要素のウィジェットをパッケージが提供しているウィジェットに置き換えていきます。

こちらが変更前のコードです。

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: .center,
          children: [
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

そして置き換えた後のコードが以下のものになります。

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return PlatformScaffold(
      appBar: PlatformAppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: .center,
          children: [
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      material: (_, __) => MaterialScaffoldData(
        // floatingActionButtonプロパティに通常のFloatingActionButtonを渡す
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
      ),

      // Cupertino (iOS) の設定 (通常、iOSではFABは使用しないため、ここでは設定しないか、別のカスタムウィジェットを指定します)
      cupertino: (_, __) => CupertinoPageScaffoldData(
        body: Stack(
          children: [
            Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text('You have pushed the button this many times:'),
                  Text(
                    '$_counter',
                    style: Theme.of(context).textTheme.headlineMedium,
                  ),
                ],
              ),
            ),
            // Material の endFloat 相当（右下）
            Positioned(
              right: 16,
              bottom: 16,
              child: SafeArea(
                minimum: const EdgeInsets.only(right: 0, bottom: 0),
                child: CupertinoButton.filled(
                  padding: const EdgeInsets.all(14),
                  onPressed: _incrementCounter,
                  child: const Icon(CupertinoIcons.add),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Materialと異なり、CupertinoではfloatingButtonが存在しないため少し長めの実装となってしまいます。

iOSの画面

Androidの画面

まとめ

このように、flutter_platform_widgetsパッケージを用いることでAndroidとiOSそれぞれのプラットフォームでも違和感のないUIUXを提供することができます。

しかしFloatingButtonのようにMaterialには存在するがCupertinoには存在しないウィジェットもあるため、より綺麗な実装にまとめるには一工夫必要そうですね。