2025/3/26

【Flutter/Dart】CupertinoPageScaffoldの使い方！iOSライクなUI実装

この記事からわかること

Flutter/DartのCupertinoPageScaffoldとは？
iOSライクなUIの実装方法

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Android Studio：Koala
Xcode：16.0
Flutter：3.29.2
Dart：3.7.2
Mac M1：Sonoma 14.6.1

公式リファレンス：CupertinoPageScaffold

CupertinoPageScaffold

FlutterのCupertinoPageScaffoldはアプリの基本的なレイアウト構造を、iOSライクなUIをベースとして構築するための土台となるWidgetです。Cupertinoと付与されているWidgetは基本的にiOSのUIに準じたデザインベースになっておりiOSライクなUIを簡単に実装できるようになっています。

CupertinoPageScaffoldではナビゲーションバー(上部バー)の実装も簡単に可能になります。

定義を確認してみるとプロパティはそれほど多くはなく、navigationBarやchildが基本的な部分になります。

Scaffold定義
class CupertinoPageScaffold extends StatefulWidget {
  const CupertinoPageScaffold({
    super.key,
    this.navigationBar,
    this.backgroundColor,
    this.resizeToAvoidBottomInset = true,
    required this.child,
  });
}

AndroidライクなUI(マテリアルデザイン)での実装をしたい場合はScaffold Widgetを使用してください。

CupertinoPageScaffoldの使い方

CupertinoPageScaffoldは土台部分を構成するWidgetなので画面単位の土台として活用します。

サンプルコード
class MyCupertinoPage extends StatelessWidget {
  const MyCupertinoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: const Text('Cupertino Example'),
        trailing: CupertinoButton(
          padding: EdgeInsets.zero,
          child: const Icon(CupertinoIcons.add),
          onPressed: () {
            // 右上のボタンが押されたときの処理
            print('ボタンが押されました');
          },
        ),
      ),
      child: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              Text('CupertinoPageScaffold'),
            ],
          ),
        ),
      ),
    );
  }
}

CupertinoNavigationBar

コンストラクタの引数navigationBarはナビゲーションバー(上部バー)部分のUIを構築するWidgetを指定します。定義を確認すると指定できる型はObstructingPreferredSizeWidget?になっています。PreferredSizeWidgetは高さが明示的に指定されているという特徴があり、これをラップしたクラスが指定されています。

CupertinoPageScaffold定義
/// CupertinoPageScaffoldの上部に表示されるappBar
final ObstructingPreferredSizeWidget? navigationBar;

CupertinoNavigationBarはObstructingPreferredSizeWidgetを継承しているので基本的にCupertinoNavigationBarを使用すればOKです。カスタムで実装したい場合はObstructingPreferredSizeWidgetを継承させる必要があります。

navigationBar: CupertinoNavigationBar(
  // 中央に表示されるUI
  middle: const Text('Cupertino Example'),
  // 右側に表示されるUI
  trailing: CupertinoButton(
    padding: EdgeInsets.zero,
    child: const Icon(CupertinoIcons.add),
    onPressed: () {
      // 右上のボタンが押されたときの処理
      print('ボタンが押されました');
    },
  ),
)

child

コンストラクタの引数childは画面に表示するメインコンテンツを指定します。Widget型で指定できるので任意のUIを指定することが可能ですが、以下のように普通に実装するとnavigationBarのUI領域に隠れてしまいます。

return CupertinoPageScaffold(
  navigationBar: CupertinoNavigationBar(
    middle: const Text('Cupertino Example'),
    trailing: CupertinoButton(
      padding: EdgeInsets.zero,
      child: const Icon(CupertinoIcons.add),
      onPressed: () {
        print('ボタンが押されました');
      },
    ),
  ),
  // 以下のようにchild直下にそのまま指定するとnavigationBarのサイズを検知できていないので隠れてしまう
  child: Column(children: const [Text('CupertinoPageScaffold')]),
);

これを解消するためにはSafeAreaを使用します。SafeAreaはデバイスの画面の端にあるセンサー領域やノッチ、ステータスバー、ナビゲーションバーなどのインタラクティブなUI要素を避けて、コンテンツを表示するためのWidgetです。これでラップすることでUIが隠れることなく表示されるようになります。

child: SafeArea(
  child: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        Text('CupertinoPageScaffold'),
      ],
    ),
  ),
),

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。