NotifyX

NotifyX is a Flutter package designed to display error states and other notifications with a modern and visually appealing user interface. You can create informative alerts and notifications enriched with color codes and icons. It offers customizable buttons, titles, and description areas for every scenario. NotifyX is the perfect solution to elevate the user experience of your application.

Install the Package

Add the following line to your pubspec.yaml file:

dependencies:
    notifyx: ^1.0.9

Then, run the following command in the terminal to install the package:

flutter pub get

Usage

The video demonstrates the usage of the NotifyX package and showcases different alert types (success, error, info, warning, etc.) step by step. NotifyX allows you to create modern and customizable alerts to enhance the user experience in your Flutter projects.

onTap: () {
                  showAnimatedAlert(
                      context: context,
                      alertWidget: RichNotifyXWidget(
                        type: AlertEnumTypes.successSoft,
                        title: 'Example Title',
                        description:
                            'Lorem Ipsum is simply dummy text of the printing and typesetting industry',
                      ));
                },

With some parameters, you can fully customize the alert to fit the needs of your project.

onTap: () {
  showAnimatedAlert(
    context: context,
    alertWidget: RichNotifyXWidget(
      type: AlertEnumTypes.successSoft,
      title: 'Example Title',
      description:
          'Lorem Ipsum is simply dummy text of the printing and typesetting industry',
    ),
    duration: const Duration(seconds: 3), // Duration the alert remains visible
    animationDuration: const Duration(milliseconds: 700), // Animation duration
    topPadding: 50.0, // Top padding
    leftPadding: 16.0, // Left padding
    rightPadding: 16.0, // Right padding
  );
},

NotifyX not only allows you to display animated alerts but also enables you to use alerts as a static widget. This makes it easy to show an alert in a fixed position on a screen or a page. Below is an example of how to use NotifyX as a static widget:

              RichNotifyXWidget(
                type: AlertEnumTypes.infoSolid,
                title: 'Lorem Ipsum',
                description:
                    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ',
              ),
              const SizedBox(
                height: 12,
              ),
              RichNotifyXWidget(
                type: AlertEnumTypes.errorSolid,
                title: 'Lorem Ipsum',
                description:
                    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ',
              ),
              const SizedBox(
                height: 12,
              ),
              RichNotifyXWidget(
                type: AlertEnumTypes.primarySolid,
                title: 'Lorem Ipsum',
                description:
                    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ',
              ),
              const SizedBox(
                height: 12,
              ),
              RichNotifyXWidget(
                type: AlertEnumTypes.warningSolid,
                title: 'Lorem Ipsum',
                description:
                    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ',
              ),
              const SizedBox(
                height: 12,
              ),
              RichNotifyXWidget(
                type: AlertEnumTypes.successSolid,
                title: 'Lorem Ipsum',
                description:
                    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ',
              ),
              const SizedBox(
                height: 12,
              ),
              RichNotifyXWidget(
                type: AlertEnumTypes.infoSoft,
                title: 'Lorem Ipsum',
                description:
                    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ',
              ),
              const SizedBox(
                height: 12,
              ),
              RichNotifyXWidget(
                type: AlertEnumTypes.errorOutlined,
                title: 'Lorem Ipsum',
                description:
                    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ',
              )
            ],

Add custom link button

With NotifyX, you can make your alerts more interactive by adding customizable link buttons. The example below demonstrates how to include a link button inside an alert:

 <Widget>[
              RichNotifyXWidget(
                type: AlertEnumTypes.infoSoft,
                title: 'Lorem Ipsum',
                description:
                    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ',
                linkButton: LinkButtonModel(onTap: () {}, title: 'Link Button'),
              ),
              const SizedBox(
                height: 12,
              ),
              RichNotifyXWidget(
                type: AlertEnumTypes.primaryOutlined,
                title: 'Lorem Ipsum',
                description:
                    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ',
                linkButton: LinkButtonModel(onTap: () {}, title: 'Link Button'),
              ),
              const SizedBox(
                height: 12,
              ),
              RichNotifyXWidget(
                type: AlertEnumTypes.errorSolid,
                title: 'Lorem Ipsum',
                description:
                    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ',
                linkButton: LinkButtonModel(onTap: () {}, title: 'Link Button'),
              ),
            ]

Custom properties

The NotifyX widget offers a variety of properties to help you fully customize your alerts. Below are the supported properties and their descriptions:

type (AlertEnumTypes, required): Specifies the type of alert. For example: success, error, info, warning, etc.
title (String?): The title text of the alert. Optional.
description (String?): The description text of the alert. Optional.
titleTextStyle (TextStyle?): Allows you to define a custom style for the title text.
descriptionTextStyle (TextStyle?): Allows you to define a custom style for the description text.
suffixIcon (Widget?): Adds a custom icon or widget to the right side of the alert.
hasCancelIcon (bool): Controls whether the cancel (close) icon is visible. Defaults to true.
cancelOnTap (void Function()?): Defines the action to be performed when the cancel icon is tapped. Optional.
linkButton (LinkButtonModel?): Allows you to add a customizable link button to the bottom of the alert.

Alert Types

You don't need to use the type parameter like this: type: AlertEnumTypes.infoOutlined. Instead, you can customize it as shown below:

type: AlertEnumTypes(
  color: Colors.blue,
  prefixIcon: Icon(Icons.abc),
)

or in a simpler form:

type: AlertEnumTypes(
  color: Colors.blue,
)

This allows you to customize properties like color and prefixIcon according to your needs.

Some screenshots

Release History

1.0.0
- Initial release of NotifyX.
- Added dynamic and customizable alert components.
- Supports various alert types (success, error, info, warning).
- Includes options for title, description, icon, and custom link buttons.
- Provides an elegant and animated alert experience.