搜索插件、代码仓与 APP 分类

flutter_dropdown_alert 封面
插件详情v1.0.7

flutter_dropdown_alert

一个用于 Flutter 的下拉提醒包,帮助用户在调用 API 成功、失败或警告时像推送通知一样收到提醒。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
4580
喜欢数
99
Pub 分数
140

安装插件

flutter pub add flutter_dropdown_alert

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包,提供下拉样式的警报系统,用于显示类似于推送通知的提醒。它允许开发者在 API 调用后展示成功、失败或警告消息,以视觉上吸引人且不干扰用户的方式增强用户体验反馈。警报从屏幕顶部滑入,可自定义不同样式和行为。专为跨平台使用设计,支持 Android、iOS、Web、macOS、Windows 和 Linux。

适合场景

  • 显示 API 调用结果
  • 显示用户警告
  • 通知成功或错误状态
  • 增强表单中的用户反馈
  • 提供实时状态更新

主要特点

  • 下滑通知动画
  • 可自定义的警告类型
  • 跨平台兼容性
  • 简单 API 集成
  • 可配置的持续时间和位置

适合对象

  • 需要视觉反馈的移动和网页应用
  • 寻求轻量级通知替代方案的开发者
  • 需要立即用户通知的应用程序
  • 频繁进行 API 交互的项目
  • 以用户体验为中心的应用程序

使用建议

  • 与完整的吐司库相比,自定义选项有限
  • 可能需要额外的样式设置以实现复杂设计
  • 不适合用于持久性通知
  • 仅适用于临时提醒
  • 依赖于正确的状态管理以实现定时

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

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, such as in app notification. 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
avoidBottomInset Add optional variable for inset overlap false

The ideal from react-native-dropdownalert

所属分类

源码仓库

使用此插件的项目