# 目次

1. 概要

2. CupertinoAlertDialogとは

3. CupertinoAlertDialogの基本的な使い方

   3-1. 必要なパッケージと環境設定

   3-2. CupertinoAlertDialogの構築方法

4. CupertinoAlertDialogのカスタマイズ

   4-1. ボタンのカスタマイズ

   4-2. アイコンとテキストのカスタマイズ

5. CupertinoAlertDialogの活用例

6. まとめ

# 1. 概要

FlutterはGoogleが提供するモバイルアプリ開発フレームワークであり、iOSやAndroid向けに美しいデザインのアプリケーションを構築することが可能です。その中で、特にAppleスタイルのUIを再現するためには、Cupertinoウィジェットを使用します。このガイドでは、Cupertinoウィジェットの一部であるCupertinoAlertDialogの表示方法について詳しく解説します。

# 2. CupertinoAlertDialogとは

CupertinoAlertDialogは、iOSスタイルのアラートダイアログを表示するためのウィジェットです。このダイアログは、ユーザーに重要な情報を提供したり、操作を確認したりするために使用されます。

# 3. CupertinoAlertDialogの基本的な使い方

## 3-1. 必要なパッケージと環境設定

FlutterでCupertinoAlertDialogを使うためには、Flutter SDKがインストールされていることが前提となります。特に追加パッケージを必要としないため、Cupertino（iOSスタイル）ウィジェットはデフォルトで利用可能です。

```yaml

dependencies:

  flutter:

    sdk: flutter

```

## 3-2. CupertinoAlertDialogの構築方法

以下に、CupertinoAlertDialogの基本的な実装例を示します。

```dart

import 'package:flutter/cupertino.dart';

void _showCupertinoDialog(BuildContext context) {

  showCupertinoDialog(

    context: context,

    builder: (BuildContext context) {

      return CupertinoAlertDialog(

        title: Text('アラート'),

        content: Text('この操作を確認しますか？'),

        actions: <CupertinoDialogAction>[

          CupertinoDialogAction(

            isDefaultAction: true,

            child: Text('キャンセル'),

            onPressed: () {

              Navigator.of(context).pop();

            },

          ),

          CupertinoDialogAction(

            isDestructiveAction: true,

            child: Text('確認'),

            onPressed: () {

              // 確認した際の処理

              Navigator.of(context).pop();

            },

          ),

        ],

      );

    },

  );

}

```

# 4. CupertinoAlertDialogのカスタマイズ

## 4-1. ボタンのカスタマイズ

CupertinoAlertDialog内のCupertinoDialogActionをカスタマイズすることで、ボタンの見た目や機能を調整できます。例えば、色やフォントサイズを変更することが可能です。

```dart

CupertinoDialogAction(

  child: Text(

    'カスタムボタン',

    style: TextStyle(

      color: CupertinoColors.activeBlue,

      fontSize: 18.0,

    ),

  ),

  onPressed: () {

    // カスタム処理

    Navigator.of(context).pop();

  },

)

```

## 4-2. アイコンとテキストのカスタマイズ

アイコンをダイアログに追加することも可能です。

```dart

CupertinoAlertDialog(

  title: Row(

    children: [

      Icon(CupertinoIcons.exclamationmark_triangle),

      SizedBox(width: 10),

      Text('注意')

    ],

  ),

  content: Text('この操作は元に戻せません。'),

  // 他のコード

)

```

# 5. CupertinoAlertDialogの活用例

CupertinoAlertDialogは、アプリケーション内で様々な場所で活用できます。以下に、いくつかの活用例を示します。

- ユーザー設定の変更を確認する際

- データ削除の確認

- 特定の操作についてユーザーにガイドする際

# 6. まとめ

CupertinoAlertDialogは、ユーザーにオプションを提示する場合に非常に有用なウィジェットです。Flutterを使用してiOSスタイルのアプリケーションを作成する開発者にとって、このウィジェットを活用することはユーザー体験を向上させる一助となります。カスタマイズ可能なボタンやアイコンを利用して、自分のアプリのデザインに合ったアラートダイアログを設計しましょう。

目次

続きを読むには単価診断を受けてください（30秒）