Custom Popup Dialog #

custom_popup_dialog is a Flutter package that provides a customizable dialog template. This package allows you to create beautiful and customizable dialog boxes with optional Lottie animations, background blur effects, and more.

Features #

• Customizable dialog with Lottie animations
• Optional background blur effect or darkened background
• Customizable button text and colors
• Easy to integrate into any Flutter application

Getting Started #

Installation #

Add custom_popup_dialog to your pubspec.yaml file:

dependencies:
  custom_popup_dialog: ^0.0.3

Install the dependencies: #

flutter pub get

Usage #

Here's an example of how to use the CustomDialog widget in your Flutter application:

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  void showDialogTemplate(BuildContext context, String? animationPath, String message, {bool blurBackground = true}) {
    showDialog(
      context: context,
      builder: (context) => CustomDialog(
        message: message,
        animationWidth: 120,
        animationHeight: 120,
        headerAnimation: animationPath,
        btnText: 'Continue',
        bgColor: Colors.white,
        textColor: Colors.black,
        btnColor: Colors.blue,
        btnTextColor: Colors.white,
        blurBackground: blurBackground,
        alternativeBgColor: Colors.black.withOpacity(0.7),
        onBtnPressed: () {
          Navigator.of(context).pop();
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Custom Alert Dialog',
          style: TextStyle(color: Colors.white),
        ),
        centerTitle: true,
        backgroundColor: Colors.blueAccent,
      ),
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            CustomButton(
              bgColor: Colors.green,
              fgColor: Colors.white,
              text: 'Show Success Dialog',
              onClick: () {
                showDialogTemplate(context, 'assets/lottie/success.json', 'Operation Successful!', blurBackground: true);
              },
            ),
            const SizedBox(height: 20),
            CustomButton(
              bgColor: Colors.red,
              fgColor: Colors.white,
              text: 'Show Error Dialog',
              onClick: () {
                showDialogTemplate(context, 'assets/lottie/error.json', 'An error occurred!', blurBackground: false);
              },
            ),
            const SizedBox(height: 20),
            CustomButton(
              bgColor: Colors.orange,
              fgColor: Colors.white,
              text: 'Show Alert Dialog',
              onClick: () {
                showDialogTemplate(context, 'assets/lottie/alert.json', 'This is an alert!', blurBackground: true);
              },
            ),
            const SizedBox(height: 20),
            CustomButton(
              bgColor: Colors.blueAccent,
              fgColor: Colors.white,
              text: 'Show Info Dialog',
              onClick: () {
                showDialogTemplate(context, 'assets/lottie/info.json', 'Here is some information.', blurBackground: false);
              },
            )
          ],
        ),
      ),
    );
  }
}

class CustomButton extends StatelessWidget {
  const CustomButton({
    super.key,
    required this.bgColor,
    required this.fgColor,
    required this.text,
    required this.onClick,
  });

  final Color bgColor;
  final Color fgColor;
  final String text;
  final VoidCallback onClick;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SizedBox(
          width: 200,
          child: ElevatedButton(
            onPressed: onClick,
            style: ElevatedButton.styleFrom(
              backgroundColor: bgColor,
              foregroundColor: fgColor,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(5),
              ),
              elevation: 5,
            ),
            child: Text(text),
          ),
        ),
      ],
    );
  }
}

Customization Options #

The CustomDialog widget provides various customization options through its constructor parameters:

• message: The message to be displayed in the dialog.
• btnText: The text for the button.
• maxLines: The maximum number of lines for the message text.
• textAlign: The alignment of the message text.
• animationWidth: The width of the Lottie animation.
• animationHeight: The height of the Lottie animation.
• bgColor: The background color of the dialog.
• textColor: The color of the message text.
• btnColor: The background color of the button.
• btnTextColor: The color of the button text.
• animationDuration: The duration of the Lottie animation.
• headerAnimation: The path to the Lottie animation file.
• onBtnPressed: The callback function when the button is pressed.
• blurBackground: Whether to apply a blur effect to the background.
• blurAmount: The amount of blur to apply if blurBackground is true.
• alternativeBgColor: The background color if blurBackground is false.

Example Usage #

To show a custom dialog with a success message and Lottie animation:

showDialogTemplate(context, 'assets/lottie/success.json', 'Operation Successful!', blurBackground: true);

To show a custom dialog with an error message and no background blur:

showDialogTemplate(context, 'assets/lottie/error.json', 'An error occurred!', blurBackground: false);

License #

This project is licensed under the MIT License. See the LICENSE file for more details.

Contributions #

Contributions are welcome! If you encounter any issues or have suggestions for improvements, please open an issue or submit a pull request on GitHub.

Author #

Kaium Al Limon