Flutter对话框插件dialoger的使用

Flutter对话框插件dialoger的使用

在Flutter开发中，有时我们需要向用户展示一些简单的对话框来获取确认或输入信息。dialoger 插件是一个方便的工具，可以帮助我们快速创建和管理这些对话框。

特性

• 确认对话框：用于提示用户进行确认操作。
• 输入对话框：用于获取用户的输入信息。

简单对话框（Simple Dialogs）

简单对话框通常用于向用户提供一些选项或信息，而不需要用户进行输入。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dialoger 示例'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 展示一个简单的对话框
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  return AlertDialog(
                    title: Text("简单对话框"),
                    content: Text("这是一个简单的对话框。"),
                    actions: <Widget>[
                      TextButton(
                        child: Text("关闭"),
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                    ],
                  );
                },
              );
            },
            child: Text('显示简单对话框'),
          ),
        ),
      ),
    );
  }
}

确认对话框（Confirmation Dialogs）

确认对话框通常用于提示用户进行某些重要的操作，例如删除数据或提交表单等。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dialoger 示例'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 展示一个确认对话框
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  return AlertDialog(
                    title: Text("确认对话框"),
                    content: Text("你确定要执行此操作吗？"),
                    actions: <Widget>[
                      TextButton(
                        child: Text("取消"),
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                      TextButton(
                        child: Text("确定"),
                        onPressed: () {
                          // 执行某些操作
                          print("用户确认了！");
                          Navigator.of(context).pop();
                        },
                      ),
                    ],
                  );
                },
              );
            },
            child: Text('显示确认对话框'),
          ),
        ),
      ),
    );
  }
}

输入对话框（Input Dialogs）

输入对话框用于获取用户的输入信息，例如文本输入或数字输入。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dialoger 示例'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 展示一个输入对话框
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  return AlertDialog(
                    title: Text("输入对话框"),
                    content: TextField(
                      decoration: InputDecoration(hintText: "请输入内容"),
                      onChanged: (value) {},
                    ),
                    actions: <Widget>[
                      TextButton(
                        child: Text("取消"),
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                      TextButton(
                        child: Text("确定"),
                        onPressed: () {
                          // 获取输入的内容
                          String inputContent = "";
                          Navigator.of(context).pop(inputContent);
                        },
                      ),
                    ],
                  );
                },
              ).then((value) {
                if (value != null) {
                  print("用户输入的内容是：$value");
                }
              });
            },
            child: Text('显示输入对话框'),
          ),
        ),
      ),
    );
  }
}