搜尋套件、儲存庫與 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

所屬分類

原始碼儲存庫

使用此套件的專案