Flutter自定义对话框插件smart_alert_dialog的使用

简介

smart_alert_dialog 是一个用于Flutter应用程序的插件，它根据平台自动选择合适的样式来显示对话框：对于iOS设备使用Cupertino风格，对于Android设备则采用Material风格。这使得开发者可以轻松创建与原生应用一致的用户体验。

版本信息

对话框展示

Android

可取消的对话框

确认/取消对话框

iOS

可取消的对话框

确认/取消对话框

注意: 大部分新问题调试的支持依赖于开源社区。

属性介绍

AlertDialogText

• confirm: 确认按钮文本，默认为"Yes"
• cancel: 取消按钮文本，默认为"No"
• dismiss: 关闭按钮文本，默认为"Ok"

AlertDialogStyle

• confirm: 确认按钮文本样式
• cancel: 取消按钮文本样式
• dismiss: 关闭按钮文本样式
• title: 标题文本样式
• message: 内容描述文本样式

示例代码

以下是一个完整的示例demo，展示了如何使用smart_alert_dialog：

import 'package:flutter/material.dart';
import 'package:smart_alert_dialog/models/alert_dialog_text.dart';
import 'package:smart_alert_dialog/smart_alert_dialog.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _showYesNoAlert(BuildContext context) {
    showDialog(
      context: context,
      builder: (_) => SmartAlertDialog(
        title: "你喜欢这个库吗？",
        text: AlertDialogText(confirm: "是", cancel: "否"),
        message:
            "你认为我的库很棒并且想要尝试一下吗？\n\n提示：欢迎提交PR以改进它 :)",
        onConfirmPressed: () {
          print("用户选择了确认");
          Navigator.of(context).pop(); // 关闭对话框
        },
        onCancelPressed: () {
          print("用户选择了取消");
          Navigator.of(context).pop(); // 关闭对话框
        },
      ),
    );
  }

  void _showDismissableAlert(BuildContext context) {
    showDialog(
      context: context,
      builder: (_) => SmartAlertDialog(
        title: "这是一个可关闭的对话框！",
        text: AlertDialogText(dismiss: "确定"),
        message:
            "嘿，你可以直接关闭这个对话框。另外，不要再点击那个按钮了。你已经被提醒过了！",
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              MaterialButton(
                child: Text(
                  "发送一个可关闭的对话框",
                  style: TextStyle(color: Colors.white, fontSize: 16),
                ),
                onPressed: () => _showDismissableAlert(context),
                color: Colors.blue,
              ),
              MaterialButton(
                child: Text(
                  "发送一个确认/取消对话框",
                  style: TextStyle(color: Colors.white, fontSize: 16),
                ),
                onPressed: () => _showYesNoAlert(context),
                color: Colors.green,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

待办事项

• [x] 添加 cancelTextColor - 在 AlertDialogStyle 中，检查 style 属性
• [x] 添加 confirmTextColor - 在 AlertDialogStyle 中，检查 style 属性
• [x] 添加 dismissText - 在 AlertDialogText 中，检查 text 属性
• [x] 添加 dismissTextColor - 在 AlertDialogStyle 中，检查 style 属性
• [ ] 创建平板电脑和Web的设计
• [ ] 为每个组件添加测试

许可证

参见 LICENSE.md

如果有任何问题或不清楚的地方，请随时提出问题。