搜索插件、代码仓与 APP 分类

插件详情v1.0.2

xdialog

一个高度可定制的Flutter动画对话框包,支持动态配置、多个按钮和流畅的动画效果。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
10
喜欢数
1
Pub 分数
145

安装插件

flutter pub add xdialog

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

xDialog 是一个高度可定制的动画对话框包,适用于 Flutter,提供动态配置和流畅的动画效果。它支持多个按钮,能够灵活设计提示、确认和自定义对话框的用户界面。该包支持所有主要平台——Android、iOS、Web、macOS、Windows 和 Linux,确保一致的用户体验。该包专为寻求优雅、可复用解决方案的开发者设计,可轻松创建现代、动画化的对话框。

适合场景

  • 显示警报和确认
  • 创建自定义交互式对话框
  • 实施引导或教程弹窗
  • 使用多个操作按钮处理用户输入
  • 通过流畅的动画过渡提升用户体验

主要特点

  • 高度可定制的外观
  • 多按钮支持
  • 平滑的动画过渡
  • 动态配置选项
  • 跨平台兼容性
  • 通过 pub.dev 轻松集成

适合对象

  • Flutter 开发人员构建丰富的用户界面
  • 需要动画和交互式对话框的应用程序
  • 需要在跨平台保持一致对话行为的项目
  • 注重开发人员生产力和设计灵活性的团队

使用建议

  • 可能需要额外的样式来适应复杂布局
  • 动画性能应在低端设备上进行测试
  • 自定义可能会略微增加包大小
  • 仅限对话框特定用例,不支持全屏模态

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

XDialog - Flutter Custom Dialog Package

A feature-rich, highly customizable dialog package for Flutter applications.

🚀 Features

  • 🎨 Fully Customizable UI – Modify colors, fonts, and layouts.
  • ⚡ Smooth Animations – Built-in transitions for a better UX.
  • 🖱️ Hover Effects – Interactive UI elements.
  • 🌈 Multiple Button Support – Add as many actions as needed.
  • 🎚️ Size Customization – Adjust width, height, and padding.
  • 🕒 Animation Control – Customize animation duration & style.
  • 🎮 Interactive Examples – Ready-to-use examples for quick setup.

📦 Installation

Add the dependency in your pubspec.yaml:

dependencies:
  xdialog: ^1.0.0

Then, run:

flutter pub get

🎯 Usage

📝 Basic Dialog

To display a simple confirmation dialog:

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

void showBasicDialog(BuildContext context) {
  XDialog.show(
    context: context,
    title: const Text('Confirmation'),
    message: const Text('Are you sure?'),
    positiveButtonText: 'Yes',
    negativeButtonText: 'No',
  );
}

🖼️ Dialog with Image
import 'package:flutter/material.dart';
import 'package:xdialog/xdialog.dart';

void showImageDialog(BuildContext context) {
  XDialog.show(
    context: context,
    title: const Text('Image Preview'),
    message: const Text('This is an example with an image.'),
    image: Image.network('https://via.placeholder.com/150'),
    positiveButtonText: 'OK',
  );
}

Basic Confirmation Dialog

🎛️ Customization

Adjust Dialog Size
XDialog.show(
  context: context,
  title: const Text('Custom Size'),
  message: const Text('You can control the size.'),
  width: 300,
  height: 200,
);
Customize Button Styles
XDialog.show(
  context: context,
  title: const Text('Styled Buttons'),
  message: const Text('Different button styles.'),
  positiveButtonText: 'Confirm',
  negativeButtonText: 'Cancel',
  positiveButtonStyle: ElevatedButton.styleFrom(backgroundColor: Colors.green),
  negativeButtonStyle: TextButton.styleFrom(foregroundColor: Colors.red),
);

🔥 Roadmap

  • [ ] Add dark mode support.
  • [ ] Support for icon-based buttons.
  • [ ] More transition effects.

📜 License

This project is licensed under the MIT License.


💡 Contributing

Feel free to submit pull requests or open issues for suggestions and improvements.

Happy coding! 🚀

所属分类

源码仓库

使用此插件的项目

暂无相关数据。