Flutter原生对话框插件native_dialog_plus的使用

Flutter 的 native_dialog_plus 插件是一个简约的插件，用于显示原生对话框。

描述

Android

Native Dialog Plus 使用每个平台的原生UI来显示警告和确认对话框。

• 重要提示：由于框架限制，Android最多只能有3个动作，每个NativeDialogPlusActionStyle风格各一个（默认样式、取消和破坏性），列表中动作的顺序不会改变对话框中的位置。

iOS

iOS对动作数量没有限制。如果未传递回调，则按钮将被禁用。

使用方法

Alert 对话框

示例代码

import 'package:native_dialog_plus/native_dialog_plus.dart';

// 显示一个带有两个按钮的Alert对话框
NativeDialogPlus(
    actions: [
        NativeDialogPlusAction(
            text: 'Now',
            style: NativeDialogPlusActionStyle.destructive,
        ),
        NativeDialogPlusAction(
            text: "BZ'H",
            onPressed: () {
                print("Moshiach vibes");
            },
            style: NativeDialogPlusActionStyle.defaultStyle,
        ),
    ],
    title: 'This is a test dialog',
    message: 'Moshiach NOW',
).show();

完整示例Demo

下面是一个完整的Flutter应用示例，展示了如何在应用中使用native_dialog_plus插件来创建和显示对话框。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Native Dialog Plus Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Native Dialog Plus Demo'),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            MaterialButton(
              color: Colors.blue,
              onPressed: () {
                // 显示基本对话框
                NativeDialogPlus(
                  actions: [
                    NativeDialogPlusAction(
                      text: 'Now',
                      style: NativeDialogPlusActionStyle.destructive,
                    ),
                    NativeDialogPlusAction(
                      text: "BZ'H",
                      onPressed: () {
                        debugPrint("Moshiach vibes");
                      },
                      style: NativeDialogPlusActionStyle.defaultStyle,
                    ),
                  ],
                  title: 'This is a test dialog',
                  message: 'Moshiach NOW',
                ).show();
              },
              child: const Text('Show basic dialog'),
            ),
            MaterialButton(
              color: Colors.blue,
              onPressed: () {
                // 显示Action Sheet
                NativeDialogPlus(
                  title: 'Moshiach NOW',
                  style: NativeDialogPlusStyle.actionSheet,
                  actions: [
                    NativeDialogPlusAction(
                      text: 'Now',
                      style: NativeDialogPlusActionStyle.cancel,
                    ),
                    NativeDialogPlusAction(
                      text: "BZ'H",
                      onPressed: () {
                        debugPrint("Test");
                      },
                    ),
                  ],
                ).show();
              },
              child: const Text('Show Action sheet'),
            ),
          ],
        ),
      ),
    );
  }
}

通过上述代码，您可以快速上手并在您的Flutter项目中集成native_dialog_plus插件，以实现更丰富的用户交互体验。