🍏
Cupertino widgets③

2024/12/30に公開
 iOSのダイアログを表示するSwiftだとDialogをAlertと呼ぶらしい。iOSのUIで表現するにはCupertinoAlertDialog classを使用します。
今回は公式のコードをそのまま使います。表示するだけですからね。どんなの機能なのか公式の解説を翻訳してみました。
An alert dialog informs the user about situations that require acknowledgment. An alert dialog has an optional title, optional content, and an optional list of actions. The title is displayed above the content and the actions are displayed below the content.
This dialog styles its title and content (typically a message) to match the standard iOS title and message dialog text style. These default styles can be overridden by explicitly defining TextStyles for Text widgets that are part of the title or content.
To display action buttons that look like standard iOS dialog buttons, provide CupertinoDialogActions for the actions given to this dialog.
Typically passed as the child widget to showDialog, which displays the dialog.
アラートダイアログは、承認が必要な状況についてユーザーに通知します。アラートダイアログには、任意のタイトル、任意のコンテンツ、および任意のアクションのリストがあります。タイトルはコンテンツの上に表示され、アクションはコンテンツの下に表示されます。
このダイアログは、iOSの標準的なタイトルとメッセージダイアログのテキストスタイルに合うように、タイトルとコンテンツ（通常はメッセージ）のスタイルを設定します。これらのデフォルトスタイルは、タイトルやコンテンツの一部であるTextウィジェットのTextStylesを明示的に定義することで上書きできます。
標準的なiOSのダイアログボタンのように見えるアクションボタンを表示するには、このダイアログに与えられるアクションにCupertinoDialogActionsを指定します。
通常、ダイアログを表示するshowDialogの子ウィジェットとして渡されます。
import 'package:flutter/cupertino.dart';

/// Flutter code sample for [CupertinoAlertDialog].

void main() => runApp(const AlertDialogApp());

class AlertDialogApp extends StatelessWidget {
  const AlertDialogApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      theme: CupertinoThemeData(brightness: Brightness.light),
      home: AlertDialogExample(),
    );
  }
}

class AlertDialogExample extends StatelessWidget {
  const AlertDialogExample({super.key});

  void _showAlertDialog(BuildContext context) {
    showCupertinoDialog<void>(
      context: context,
      builder: (BuildContext context) => CupertinoAlertDialog(
        title: const Text('Alert'),
        content: const Text('Proceed with destructive action?'),
        actions: <CupertinoDialogAction>[
          CupertinoDialogAction(
            /// This parameter indicates this action is the default,
            /// and turns the action's text to bold text.
            isDefaultAction: true,
            onPressed: () {
              Navigator.pop(context);
            },
            child: const Text('No'),
          ),
          CupertinoDialogAction(
            /// This parameter indicates the action would perform
            /// a destructive action such as deletion, and turns
            /// the action's text color to red.
            isDestructiveAction: true,
            onPressed: () {
              Navigator.pop(context);
            },
            child: const Text('Yes'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('CupertinoAlertDialog Sample'),
      ),
      child: Center(
        child: CupertinoButton(
          onPressed: () => _showAlertDialog(context),
          child: const Text('CupertinoAlertDialog'),
        ),
      ),
    );
  }
}
普段見るFlutterのDialogとは違ったUIでしたね。Swiftの経験があるので同じUIが作れるのだなと驚きました。しかしiOSの時だけCupertinoの設定にする。Androidの時だけMaterial Designにする設定をしてビルドする実験をしたのですが、エラーが出ました😱
OSが違ったらUIを切り替える設定のアプリ作るのはリスクが高いかも😅

iOSしか開発しないFlutterアプリだと変ですが、そんなものを作るときには適しているのかも？

私なら、SwiftUIで作りますけどね。
iOSのダイアログを表示する

Discussion
