giffy_dialog

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

GiffyDialog ist ein Flutter-Paket, das mithilfe von GIFs animierte, visuell ansprechende Dialogfelder und Bottom-Sheets bereitstellt. Es ermöglicht Entwicklern die schnelle Implementierung ansprechender Benutzerinteraktionen mit minimalem Code. Das Paket unterstützt mehrere Plattformen wie Android, iOS, Web, macOS, Windows und Linux. Mit anpassbaren Themen und einfacher Integration über einen einfachen Befehl verbessert es die Benutzererfahrung durch unterhaltsame und dynamische visuelle Rückmeldungen. Perfekt für Onboarding-Bildschirme, Warnungen oder feierliche Momente in Apps.

Anwendungsfälle

Onboarding-Bildschirme
Benutzerbenachrichtigungen
Feier-Popup
App-Anleitung
Feedback-Aufforderungen

Hauptmerkmale

Animated-GIF-Unterstützung
Anpassbare Dialoge
Plattformübergreifende Kompatibilität
Einfache API
Bottom-Sheet-Integration

Geeignet für

Mobile-App-Entwickler
UX-orientierte Projekte
Interaktive UI-Verbesserungen
Schnelle Dialogimplementierung

Hinweise

Große GIF-Dateien können die Leistung beeinträchtigen
Begrenzte Anpassungsmöglichkeiten für komplexe Layouts
Erfordert sorgfältige Optimierung der GIF-Datei
Nicht ideal für leichte Dialoge
Abhängig von der Netzwerkverbindung beim Laden von Remote-GIFs

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

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} 💻