搜尋套件、儲存庫與 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! 🚀

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。