giffy_dialog

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

O GiffyDialog é um pacote do Flutter que fornece diálogos e folhas inferiores animados e visualmente atraentes usando GIFs. Permite que desenvolvedores implementem interações envolventes com código mínimo. O pacote suporta múltiplas plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux. Com temas personalizáveis e integração fácil por meio de um comando simples, ele melhora a experiência do usuário ao adicionar feedback visual divertido e dinâmico. Perfeito para telas de introdução, alertas ou momentos de celebração nos aplicativos.

Casos de uso

Telas de onboarding
Alertas do usuário
Pop-ups de celebração
Orientação do aplicativo
Prompts de feedback

Principais recursos

Suporte para GIF animado
Diálogos personalizáveis
Compatibilidade multiplataforma
API simples
Integração de sheet inferior

Indicado para

desenvolvedores de aplicativos móveis
Projetos focados em UX
Melhorias de interface interativa
Implementação rápida de diálogo

Considerações

Arquivos GIF grandes podem afetar o desempenho
Personalização limitada para layouts complexos
Requer otimização cuidadosa do arquivo GIF
Não ideal para diálogos leves
Depende da rede se carregar GIFs remotos

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

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