Status Alert for Flutter

Pub Version CI

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

Installing

Requirements: Flutter 3.47+ (material_ui). On older Flutter, use status_alert: ^2.1.0.

Apps not yet migrated to material_ui can keep package:flutter/material.dart; the alert then uses the default (light) Material theme instead of the app's theme.

dependencies:
  status_alert: ^3.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 (and call onComplete) when the background is tapped
onComplete VoidCallback? null Called after the alert is dismissed
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)

The widget becomes the whole content of the alert, so title and subtitle are not shown. Put any text inside your widget.

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

Programmatic Control

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

// Hide manually (right away, without calling onComplete)
StatusAlert.hide();

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

Only one alert is shown at a time: calling show() while an alert is visible does nothing.

onComplete Callback

Called after the alert finishes its dismiss animation, or right after a background tap when dismissOnBackgroundTap is true. It is not called when the alert is removed with StatusAlert.hide():

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

Apple Podcasts vs Status Alert

More from Yako

Other Flutter packages from the same team:

Animated demo of the settings_ui Flutter package: an iOS-style settings screen with Appearance and General sections; turning on Dark mode switches the whole list to dark.
settings_ui
Settings screens that look native on every platform. 		Animated demo of the badges Flutter package: a count badge on a cart icon goes from 1 to 4, a notification badge pops in, and a Twitter-style verified badge, a NEW label and an Instagram-shaped badge appear.
badges
Badges for any widget: counters, dots, shapes and animations. 		Animated demo of the yako_celebrations Flutter package: an epic celebration fills a dark screen with fireworks, flames, spinning coins, confetti and popping Yako logos under a LEVEL UP! title.
yako_celebrations
Full-screen celebrations in one line: confetti, coins, fireworks, flames.
Animated demo of the full_screen_menu Flutter package: a blurred full-screen overlay opens over a weather app with five round gradient buttons and a close button.
full_screen_menu
A full-screen menu with round gradient buttons. 		Animated demo of the yako_theme_switch Flutter package: a toggle whose sun thumb rolls into a moon as the screen changes from light mode to dark mode.
yako_theme_switch
An animated switch between light and dark themes. 		Screenshot of the diagonal_decoration Flutter package: one card filled with fine diagonal lines (DiagonalDecoration) and one with a curved line mesh (MatrixDecoration).
diagonal_decoration
Diagonal-line and mesh backgrounds for boxes.

License

This project is licensed under the Apache License 2.0 — see the LICENSE file for details.

Libraries

status_alert