Flutter自适应对话框插件adaptive_dialog的使用

adaptive_dialog 是一个用于在Flutter应用程序中根据平台（iOS或Android）显示相应的对话框或模态操作表单的插件。它提供了多种类型的对话框，以确保您的应用能够遵循各个平台的设计指南。

插件特性

• 根据平台自动选择合适的对话框样式。
• 提供了简单的API来展示确认对话框、带有输入框的对话框等。
• 支持文本输入对话框和文本回答对话框，后者可以防止用户误操作。

使用示例

1. 添加依赖

首先，在pubspec.yaml文件中添加对adaptive_dialog的依赖：

dependencies:
  flutter:
    sdk: flutter
  adaptive_dialog: ^2.0.0 # 确保使用最新版本

然后运行 flutter pub get 来安装插件。

2. 展示基本对话框

接下来是几个具体的例子，展示了如何使用这个插件的不同功能。

显示简单的确定对话框 (showOkAlertDialog)

import 'package:flutter/material.dart';
import 'package:adaptive_dialog/adaptive_dialog.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Adaptive Dialog Example')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              await showOkAlertDialog(
                context: context,
                title: 'Title',
                message: 'This is a simple alert dialog.',
              );
            },
            child: Text('Show Simple Alert'),
          ),
        ),
      ),
    );
  }
}

显示带有取消按钮的对话框 (showOkCancelAlertDialog)

ElevatedButton(
  onPressed: () async {
    final result = await showOkCancelAlertDialog(
      context: context,
      title: 'Confirmation',
      message: 'Are you sure you want to proceed?',
    );
    if (result == OkCancelResult.ok) {
      print('User confirmed.');
    } else {
      print('User cancelled.');
    }
  },
  child: Text('Confirm Action'),
),

确认对话框 (showConfirmationDialog)

ElevatedButton(
  onPressed: () async {
    final result = await showConfirmationDialog(
      context: context,
      title: 'Delete Confirmation',
      message: 'Are you sure you want to delete this item?',
      actions: <AlertDialogAction>[
        AlertDialogAction(key: 'delete', label: 'Delete'),
        AlertDialogAction(key: 'cancel', label: 'Cancel'),
      ],
    );
    if (result == 'delete') {
      print('Item will be deleted.');
    } else {
      print('Deletion cancelled.');
    }
  },
  child: Text('Delete Item'),
),

模态动作表单 (showModalActionSheet)

ElevatedButton(
  onPressed: () async {
    final result = await showModalActionSheet(
      context: context,
      title: 'Choose an option',
      actions: <ActionSheetAction>[
        ActionSheetAction(key: 'option1', label: 'Option 1'),
        ActionSheetAction(key: 'option2', label: 'Option 2'),
      ],
    );
    if (result == 'option1') {
      print('Option 1 selected.');
    } else if (result == 'option2') {
      print('Option 2 selected.');
    }
  },
  child: Text('Select Option'),
),

文本输入对话框 (showTextInputDialog)

ElevatedButton(
  onPressed: () async {
    final result = await showTextInputDialog(
      context: context,
      title: 'Enter Your Name',
      fields: [TextFieldData()],
    );
    if (result != null && result.isNotEmpty) {
      print('Name entered: ${result.first}');
    }
  },
  child: Text('Enter Name'),
),

文本回答对话框 (showTextAnswerDialog)

ElevatedButton(
  onPressed: () async {
    final result = await showTextAnswerDialog(
      context: context,
      text: 'Please type "DELETE" to confirm:',
      answer: 'DELETE',
    );
    if (result == true) {
      print('Confirmed by typing DELETE.');
    } else {
      print('Confirmation failed or cancelled.');
    }
  },
  child: Text('Confirm with Answer'),
),

注意事项

• 如果您在iOS上遇到与本地化相关的问题，请确保已经在MaterialApp中包含了GlobalCupertinoLocalizations.delegate。
• 对于深色模式下输入框颜色问题，可以通过设置cupertinoOverrideTheme中的textTheme属性来解决。

通过这些例子，您可以轻松地将adaptive_dialog集成到您的Flutter项目中，并为用户提供更加原生且一致的用户体验。如果您有更多定制需求，也可以参考官方文档进行进一步探索。