giffy_dialog

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

GiffyDialog 是一個 Flutter 套件，使用 GIF 提供動畫且視覺上吸引人的對話框與底層彈出層。它讓開發者能以最少的程式碼快速實現引人入勝的使用者互動。此套件支援多個平台，包括 Android、iOS、Web、macOS、Windows 與 Linux。透過可自訂主題以及簡單的指令整合方式，它能透過增添趣味性與動態視覺反饋來提升應用程式的使用者體驗。非常適合用於引導畫面、警示訊息或應用中的慶祝時刻。

適用情境

引導頁面
使用者警示
慶祝彈窗
應用引導
回饋提示

主要特色

Animated GIF 支援
可自訂對話方塊
跨平台相容性
簡單 API
底部彈出式菜單整合

適合對象

行動應用程式開發者
以使用者體驗為導向的專案
互動式UI增強
快速對話方塊實作

使用建議

大型 GIF 檔案可能會影響效能
複雜版面的自訂選項有限
需要仔細優化GIF檔案
不適合輕量級對話
取決於網路狀況，載入遠端GIF

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

Giffy Dialog

A beautiful and custom alert dialog for flutter highly inspired from FancyAlertDialog-Android.

Show some ❤️ and star the repo to support the project

Live Demo: https://xsahil03x.github.io/giffy_dialog

Migration from v1 to v2

Please refer to the migration guide to migrate from v1 to v2.

Installation

Add the following to your pubspec.yaml and replace [version] with the latest version:

dependencies:
  giffy_dialog: ^[version]

Usage

Import the package:

import 'package:giffy_dialog/giffy_dialog.dart';

Use it like a dialog:

 showDialog(
   context: context,
   builder: (BuildContext context) {
     return GiffyDialog.image(
       Image.network(
         "https://raw.githubusercontent.com/Shashank02051997/FancyGifDialog-Android/master/GIF's/gif14.gif",
         height: 200,
         fit: BoxFit.cover,
       ),
       title: Text(
         'Image Animation',
         textAlign: TextAlign.center,
       ),
       content: Text(
         'This is a image animation dialog box. This library helps you easily create fancy giffy dialog.',
         textAlign: TextAlign.center,
       ),
       actions: [
         TextButton(
           onPressed: () => Navigator.pop(context, 'CANCEL'),
           child: const Text('CANCEL'),
         ),
         TextButton(
           onPressed: () => Navigator.pop(context, 'OK'),
           child: const Text('OK'),
         ),
       ],
     );
   },
 );

Or use it like a bottom sheet:

 showModalBottomSheet(
   context: context,
   clipBehavior: Clip.antiAlias,
   isScrollControlled: true,
   shape: RoundedRectangleBorder(
     borderRadius: BorderRadius.vertical(
       top: Radius.circular(useMaterial3 ? 32 : 4),
     ),
   ),
   builder: (BuildContext context) {
     return GiffyBottomSheet.image(
       Image.network(
         "https://raw.githubusercontent.com/Shashank02051997/FancyGifDialog-Android/master/GIF's/gif14.gif",
         height: 200,
         fit: BoxFit.cover,
       ),
       title: Text(
         'Image Animation',
         textAlign: TextAlign.center,
       ),
       content: Text(
         'This is a image animation bottom sheet. This library helps you easily create fancy giffy bottom sheet.',
         textAlign: TextAlign.center,
       ),
       actions: [
         TextButton(
           onPressed: () => Navigator.pop(context, 'CANCEL'),
           child: const Text('CANCEL'),
         ),
         TextButton(
           onPressed: () => Navigator.pop(context, 'OK'),
           child: const Text('OK'),
         ),
       ],
     );
   },
 );

Demo

	Giffy Dialog		Giffy BottomSheet
	Material 2	Material 3	Material 2	Material 3
Image Giffy
Rive Giffy
Lottie Giffy

Customization

The GiffyDialog widget provides several customization options, such as the dialog title, description, buttons, animations, and more. Please refer to the documentation for a complete list of available options.

Contributors

Thanks goes to these wonderful people (emoji key):

_{ArtemKolichenkov} 📖 🤔	_{Alex Fierro} 💻	_{Kasidech C.} 💻	_{Jai Sachdeva} 💬	_{Tarekk Mohamed Abdalla} 💻	_{madhukesh_048} ⚠️	_dpedrinha 💻
_Nate 💻 💡	_Alex 💻	_jritchie 💻	_{Saad Bin Shahid} 💻