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

描述

Native Dialog 是一个Flutter插件，用于触发原生的警告和确认对话框。它在每个平台上使用本地UI来显示对话框，并自动使用“确定”和“取消”按钮的本地化文本。

使用方法

Alert 对话框

Alert对话框用于显示一条消息给用户，通常用于告知用户某个操作的结果或提醒一些信息。下面是如何使用NativeDialog.alert来展示一个简单的警告对话框：

import 'package:native_dialog/native_dialog.dart';

try {
  await NativeDialog.alert("Oops, something went wrong!");
} on PlatformException catch (error) {
  print(error.message);
}

Android

iOS

Web

Confirm 对话框

Confirm对话框用于获取用户的确认，通常用于需要用户做出选择的操作。下面是如何使用NativeDialog.confirm来展示一个确认对话框并根据用户的响应执行不同的逻辑：

import 'package:native_dialog/native_dialog.dart';

try {
  final confirmed = await NativeDialog.confirm("Do you really want to leave?");
  print(confirmed);
} on PlatformException catch (error) {
  print(error.message);
}

Android

iOS

Web

示例代码

以下是一个完整的示例应用程序，演示了如何在Flutter应用中使用native_dialog插件：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:native_dialog/native_dialog.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  late TextEditingController _textEditingController;
  String _message = 'Hello World!';
  bool _confirmed = false;

  @override
  void initState() {
    _textEditingController = TextEditingController(text: _message);
    super.initState();
  }

  void _handleMessage(String value) {
    setState(() {
      _message = value;
    });
  }

  Future<void> _alert() async {
    try {
      await NativeDialog.alert(_message);
    } on PlatformException {
      // Ignore error
    }
  }

  Future<void> _confirm() async {
    bool confirmed;
    try {
      confirmed = await NativeDialog.confirm(_message);
    } on PlatformException {
      confirmed = _confirmed;
    }

    if (!mounted) {
      return;
    }

    setState(() {
      _confirmed = confirmed;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Native dialog demo'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: double.infinity,
              margin: EdgeInsets.all(10),
              child: TextField(
                controller: _textEditingController,
                decoration: InputDecoration(
                    labelText: 'Message', hintText: 'Enter message here'),
                autofocus: true,
                textAlign: TextAlign.center,
                onChanged: _handleMessage,
              ),
            ),
            Container(
              width: double.infinity,
              margin: EdgeInsets.all(10),
              child: ElevatedButton(
                onPressed: _message.isNotEmpty ? _alert : null,
                style: ElevatedButton.styleFrom(
                  primary: Colors.blue,
                  onPrimary: Colors.white,
                ),
                child: Text('Alert'),
              ),
            ),
            Container(
              width: double.infinity,
              margin: EdgeInsets.all(10),
              child: ElevatedButton(
                onPressed: _message.isNotEmpty ? _confirm : null,
                style: ElevatedButton.styleFrom(
                  primary: Colors.blue,
                  onPrimary: Colors.white,
                ),
                child: Text('Confirm'),
              ),
            ),
            Text(_confirmed ? 'Confirmed' : 'Unconfirmed'),
          ],
        ),
      ),
    );
  }
}

这个示例应用程序包含了一个文本输入框，允许用户输入要显示的消息，以及两个按钮：一个用于显示警告对话框，另一个用于显示确认对话框。用户的选择结果会显示在界面上。