Flutter Dropdown Alert help to notify to user when success, warning or error like push notification

Overview

pub package

flutter_dropdown_alert

A dropdown alert package for flutter

Dropdown alert will help to notify to user when you call api success, error or something like that. It's will similar with push notification but you can custom more than that. You can show alert at anywhere without widget.

Demo

Top:

Bottom:

How to use it.

# pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  flutter_dropdown_alert: <last-version>

Just create a Stack widget and add DropdownAlert() inside MaterialApp which should be in main.dart like this:

import 'package:flutter_dropdown_alert/dropdown_alert.dart';
 MaterialApp(
       title: 'Dropdown Alert Demo',
       theme: ThemeData(
         visualDensity: VisualDensity.adaptivePlatformDensity,
       ),
       builder: (context, child) => Stack(
         children: [
            child!,
            DropdownAlert()
         ],
       ),
       home: MyHomePage(title: 'Flutter Dropdown Alert Demo'),
     );

Full example source code:

https://github.com/vantuan88291/flutter_bloc_modular

Show alert anywhere, even inside bloc without widget:

Next, import 'alert_controller.dart' into your dart code

import 'package:flutter_dropdown_alert/alert_controller.dart';
   AlertController.show("Title", "message here!", TypeAlert.success, payload);

The payload param is Map<String, dynamic>, this param is optional, should use to give data into the alert and get it when click on alert.

Hide alert:

The alert will automatically hide, but if you use delayDismiss: 0, it will freeze and not auto hide, you have to hide the alert by this code:

   AlertController.hide();

Listener when click on alert:

There are 2 ways to do that:

  • Using listener of controller, put this code inside initState() of widget:
   AlertController.onTabListener((Map<String, dynamic>? payload, TypeAlert type) {
         print("$payload - $type");
       });
  • Using param onTap:
   DropdownAlert(onTap: (Map<String, dynamic> payload?, TypeAlert type) {
                print("$payload - $type");
             },)

TypeAlert

Type description
TypeAlert.success Type when action success, the background of alert will green
TypeAlert.warning Type when action warning, the background of alert will brown
TypeAlert.error Type when action error, the background of alert will red

parameters

parameter description default
onTap Callback when tab to alert, will give: Function(Map<String, dynamic>, TypeAlert) null
successImage Image.asset() of success alert, uri of assets image Icon widget
warningImage Image.asset() of warning alert, uri of assets image Icon widget
errorImage Image.asset() of error alert, uri of assets image Icon widget
closeImage Image.asset() of close image, when showCloseButton is true Icon widget
errorBackground Color of background when error Colors.red
successBackground Colors.green
warningBackground 0xFFCE863D
titleStyle TextStyle of title
contentStyle TextStyle of content
maxLinesTitle null
maxLinesContent null
duration duration of animation 300
delayDismiss delay time when alert auto dismiss, set to 0 if you want to freeze alert 3000
position show the position of alert, include: AlertPosition.TOP, AlertPosition.BOTTOM AlertPosition.TOP
showCloseButton When close button is present, only can click on button close to hide the alert false

The ideal from react-native-dropdownalert

You might also like...

🍕 FoodHub App is a Flutter application built to demonstrate the use of modern development tools with best practices implementation like Provider, Sqlite, Testing, Flash Dialog, Notification, Alarm Schedule, Dark Mode Theme, etc.

🍕 FoodHub App is a Flutter application built to demonstrate the use of modern development tools with best practices implementation like Provider, Sqlite, Testing, Flash Dialog, Notification, Alarm Schedule, Dark Mode Theme, etc.

FoodHub App Features List Restaurant Detail Restaurant Restaurant Favorite Search Restaurant Schedule Notification Dark Mode Theme Quick start This is

Jul 27, 2023

This package will help you to manage the overlays in your projects. Show a dialog, notification, window, or a panel easily

This package will help you to manage the overlays in your projects. Show a dialog, notification, window, or a panel easily

This package will help you to manage the overlays in your projects. Show a dialog, notification, window, or a panel easily. or use one of the helping widgets like AutoComplete, Expander(Dropdown).

Dec 4, 2022

A wrapper on top of alert dialog provided by flutter.

A wrapper on top of alert dialog provided by flutter.

material_dialog A wrapper on top of alert dialog provided by flutter. Demo Use this package as a library 1. Depend on it Add this to your package's pu

Aug 8, 2022

Status Alert for Flutter

 Status Alert for Flutter

Status Alert for Flutter

Jan 8, 2023

Animated dialog box - A pure dart package for showing animated alert box.

Animated dialog box - A pure dart package for showing animated alert box.

animated_dialog_box A pure dart package for showing animated alert box. Getting Started https://github.com/Shubham-Narkhede/animated_dialog_box/blob/m

Jul 24, 2022

Adaptive dialog - Show alert dialog or modal action sheet adaptively according to platform.

Adaptive dialog - Show alert dialog or modal action sheet adaptively according to platform.

adaptive_dialog Show alert dialog or modal action sheet adaptively according to platform. showOkAlertDialog Convenient wrapper of showAlertDialog. iOS

Dec 17, 2022

This example uses a ScrollView, JSON Rest API, Navigation, Alert Pop Up, Progress Indicator, Globals, Images in a shared asset folder, and 100% Shared Code

This example uses a ScrollView, JSON Rest API, Navigation, Alert Pop Up, Progress Indicator, Globals, Images in a shared asset folder, and 100% Shared Code

This example uses a ScrollView, JSON Rest API, Navigation, Alert Pop Up, Progress Indicator, Globals, Images in a shared asset folder, and 100% Shared Code. Now with the ability to login with FaceID, TouchID, and Fingerprint Reader on Android.

Jan 6, 2023

A Flutter package with an advanced dropdown Button which let you give different design on DropdownButton

Use decorated_dropdown button to add DropdownButton with decoration properties l

Dec 17, 2021
Comments
  • Null check operator used on a null value (_tabListener)

    Null check operator used on a null value (_tabListener)

    In debug mode, when I tap the alert, debug stopping here.

    VoidCallBackListenerTab getTabListener() {
        return _tabListener!;
     }
    

    With this exception in debug console

     ════════ Exception caught by gesture ════════
    Null check operator used on a null value
    

    I initialize the DropdownAlert without any parameter btw.

    Thanks.

    opened by cyb3rsalih 3
  • Make 'message' parameter optional

    Make 'message' parameter optional

    Sometimes we need to show a short message to the user, such as showing "Item deleted successfully" or "No more items", these messages is very short that can be shown in one line, in this case we can pass this message in the 'title' only, there is no need to the 'message' parameter.

    I tried passing [null] and [empty string] to the 'message' parameter, but the title then would be shown in the upper part of the alert, if the 'message' parameter been optional, title must be centered vertically in the alert.

    opened by alihusseinalissa 1
  • test(DropDownAlert): add unit test

    test(DropDownAlert): add unit test

    Hi @vantuan88291 thank for your package.

    please review unit test here and fix some issue can't render because timer not init

    @override
      void dispose() {
        super.dispose();
        _controller?.dispose();
        _controller = null;
        _timer!.cancel();
        _timerRelay!.cancel();
      }
    
    

    Screen Shot 2021-07-02 at 9 26 50 AM

    opened by trunghieuvn 1
  • error: Undefined name 'TypeAlert'. (undefined_identifier at [test1] lib/quiz_brain.dart:406)

    error: Undefined name 'TypeAlert'. (undefined_identifier at [test1] lib/quiz_brain.dart:406)

    I just imported package. Trying to use like this:

    ..other imports import 'package:flutter_dropdown_alert/alert_controller.dart'; ... onPressed: () { if (myoption['id'] == currentquestion.answer) { AlertController.show( "Title", "message here!", TypeAlert.success); } else { AlertController.show( "Title", "message here!", TypeAlert.error, ); }

    But I see an error like TypeAlert is not defined.

    error: Undefined name 'TypeAlert'. (undefined_identifier at [test1] lib/quiz_brain.dart:406)

    opened by yukselao 1
Releases(1.0.6)
Owner
Tuan Van Le
My skills: Android, kotlin, java, Ios, React native, es6, typescript, redux, mobx state tree, Flutter, Bloc, rxdart, php, laravel 6, 7.x
Tuan Van Le
A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

Karan Soni 8 Jan 8, 2022
A Flutter package that provides a dropdown form field using a dropdown button inside a form field.

Dropdown form field A dropdown form field using a dropdown button inside a form field. Demo Features Can be used as regular form field. Simple to impl

Carlos Eugenio Torres 72 Jan 1, 2023
To Do App help me to remember my tasks , notify me .

todoapp A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Ahmed Hossny 1 Jan 10, 2022
Custom_Empty widget is flutter plugin which is designed to notify user about some event.

Empty Widget Custom_Empty widget is flutter custom widget which is designed to notify user about some event. Screenshots Screenshots Screenshots Scree

Sonu Sharma 66 Nov 17, 2022
Connection Notifier - A simple way to notify your user about the connection status.

Connection Notifier A simple way to notify your user about the connection status. Basic Usage: ConnectionNotifier class MyApp extends StatelessWidget

haptome 0 Apr 30, 2022
Push notification in Flutter using Firebase.

push_notification [1]Firebase Integration in Flutter project. [2]Parsing message in the app using on Message Stream while the app is foreground. [3]Ha

hebaabdelwhab 2 Dec 29, 2021
Push Notification service for anime episodes and news. The episode updates will be based on actual upload on the internet and NOT Japan tv schedule as other apps do.

Quantz Push Notification service for anime episodes and news. Features Sub and dub - get notified with latest anime episodes on the internet. Ongoing

null 18 Nov 21, 2022
Warning: Xournal++ Mobile is currently in early development and not yet stable

Xournal++ Mobile Warning: Xournal++ Mobile is currently in early development and not yet stable. Use with caution! A port of the main features of Xour

Jonathan Baginski 1 Jun 6, 2022
A package help you to make api call and handle error faster, also you can check for internet before call api.

http_solver ##not for production use, only for learning purpose. A package help you to make api call and handle error faster, also you can check for i

Abdelrahman Saed 1 Jun 18, 2020
A Flutter step_tracker plugin is collect information from user and display progress through a sequence of steps. this plugin also have privilege for fully customization from user side. like flipkart, amazon, myntra, meesho.

step_tracker plugin A Flutter step_tracker plugin is collect information from user and display progress through a sequence of steps. this plugin also

Roshan nahak 5 Oct 21, 2022