Flutter对话框插件z_dialog的使用

z_dialog

z_dialog 是一个轻量级的对话框插件。

示例展示

以下是 z_dialog 的一些示例效果：

使用方法

示例代码

在以下示例中，我们将演示如何使用 z_dialog 插件来创建不同类型的对话框。

// 导入必要的库
import 'package:flutter/material.dart';
import 'package:z_dialog/z_dialog.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.all(10.0),
        child: ListView(
          children: [
            // 示例1：简单的AlertDialog
            const SizedBox(height: 10),
            ZButton(
              isDark: true,
              text: 'AlertDialog',
              onPressed: () async {
                ZDialog.showAlert(context,
                    title: 'Flutter',
                    content:
                        'Flutter is Google UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.',
                    actions: [
                      ZButton(
                        isDark: true,
                        text: '确定',
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                      ZButton(
                        isDark: false,
                        text: '取消',
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                    ]);
              },
            ),

            // 示例2：底部弹出选择框
            const SizedBox(height: 10),
            ZButton(
              isDark: true,
              text: 'BottomDialog',
              onPressed: () async {
                ZDialog.showBottomDialog(
                  context,
                  circular: 12,
                  options: ['Ring', 'Koa', 'Flutter'],
                  onClick: (i, value) {
                    Navigator.of(context).pop();
                  },
                );
              },
            ),

            // 示例3：自定义对话框
            ZButton(
              isDark: true,
              text: 'CustomWidget',
              onPressed: () async {
                ZDialog.showCustomDialog(context,
                    title: 'Custom',
                    customWidget: Column(
                      children: [
                        Padding(
                          padding: const EdgeInsets.all(18.0),
                          child: Image.network(
                              'https://flutter.cn/asset/flutter-hero-laptop2.png'),
                        ),
                        Text('Custom Widget')
                      ],
                    ),
                    actions: [
                      ZButton(
                        isDark: true,
                        text: 'Ok',
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                      TextButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                        child: Padding(
                          padding: const EdgeInsets.only(left: 20, right: 20),
                          child: Text(
                            'Cancel',
                            style: TextStyle(color: Colors.grey),
                          ),
                        ),
                      ),
                    ]);
              },
            ),
          ],
        ),
      ),
    );
  }
}