套件詳情v3.0.1

status_alert

顯示類似 Apple 系統的自動隱藏狀態警告。非常適合在不中斷使用者流程的情況下通知使用者。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文件原始碼

近 30 天下載: 698
喜歡數: 287
Pub 分數: 160

安裝套件

flutter pub add status_alert

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

一個Flutter套件，顯示系統風格、自動隱藏的狀態警示，靈感來自Apple的UI。這些非干擾式通知會短暫出現在螢幕頂部並自動消失，非常適合在不打斷使用者流程的情況下提供回饋。設計乾淨、簡約，支援Android、iOS、Web、macOS、Windows及Linux等多個平台。此套件輕量且易於整合，提供順暢的動畫與跨裝置的穩定行為。

適用情境

表單提交後顯示成功訊息
顯示暫時錯誤通知
提供對用戶操作的反饋
通知使用者後台程序更新
透過細微且非阻塞的提醒來提升使用者體驗

主要特色

自動隱藏通知
蘋果風格的視覺設計
跨平台相容性
平滑的漸入/漸出動畫
簡單的 API，設定最少
可設定的持續時間與位置

適合對象

需要輕量級反饋的應用程式
重視使用者體驗的開發人員
針對多個平台的專案
必須避免中斷的 UI
希望實現原生樣式的警告的團隊

使用建議

不適合用於持續性或關鍵的警示
超出基本樣式之外的自訂有限
需要正確的上下文以正確定位
在複雜的 widget 樹中可能無法按預期運作
最適合用於短暫存在且非緊急的訊息

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

Status Alert for Flutter

Display Apple system-like self-hiding status alerts. Well suited for notifying users without interrupting their flow.

Installing

dependencies:
  status_alert: ^2.0.0

import 'package:status_alert/status_alert.dart';

Basic Usage

StatusAlert.show(
  context,
  duration: Duration(seconds: 2),
  title: 'Subscribed',
  subtitle: 'You will be notified of new posts',
  configuration: IconConfiguration(icon: Icons.done),
  maxWidth: 260,
);

Parameters

Parameter	Type	Default	Description
`title`	`String?`	`null`	Main text
`subtitle`	`String?`	`null`	Secondary text
`configuration`	`PopupMediaConfiguration?`	`null`	Icon or custom widget
`duration`	`Duration`	`1300ms`	How long the alert stays visible
`backgroundColor`	`Color?`	Theme-based	Alert background
`blurPower`	`double`	`2.0`	Background blur sigma
`maxWidth`	`double?`	`null`	Max width on large screens
`alignment`	`Alignment`	`center`	Alert position on screen
`margin`	`EdgeInsets`	`all(40)`	Outer spacing
`padding`	`EdgeInsets`	`all(30)`	Inner spacing
`borderRadius`	`BorderRadius`	`circular(10)`	Corner radius
`dismissOnBackgroundTap`	`bool`	`false`	Dismiss when background is tapped
`onComplete`	`VoidCallback?`	`null`	Called after dismiss animation ends
`titleOptions`	`StatusAlertTextConfiguration?`	`null`	Title text styling
`subtitleOptions`	`StatusAlertTextConfiguration?`	`null`	Subtitle text styling

Media Configurations

Icon

StatusAlert.show(
  context,
  title: 'Done',
  configuration: IconConfiguration(
    icon: Icons.check_circle,
    color: Colors.green,
    size: 60,
  ),
);

Custom Widget (e.g. Rive animation)

StatusAlert.show(
  context,
  title: 'Loading',
  configuration: WidgetConfiguration(
    widget: RiveAnimation.asset('assets/animation.riv'),
  ),
);

Programmatic Control

// Show
StatusAlert.show(context, title: 'Saved');

// Hide manually
StatusAlert.hide();

// Check visibility
if (StatusAlert.isVisible) { ... }

`onComplete` Callback

Called after the alert finishes its dismiss animation:

StatusAlert.show(
  context,
  title: 'Uploaded',
  onComplete: () => Navigator.push(context, ...),
);

Migration from 1.x

1.x	2.x
`FlareConfiguration`	Use `WidgetConfiguration` with a Rive widget
`textScaleFactor` in `StatusAlertTextConfiguration`	Use `textScaler`
Dart SDK `<3.0.0`	Requires Dart `>=3.0.0`