headsUpNotification function

OverlaySupportEntry headsUpNotification(String? title, String? body)

Displays a heads-up notification overlay.

This function displays a heads-up notification overlay with the provided title and body text. The overlay consists of a container containing an icon, title, and body text, displayed in a row layout. The notification overlay is designed to be displayed at the top of the screen within a safe area. The overlay will automatically disappear after a duration of 5 seconds.

@param title The title text of the notification overlay. @param body The body text of the notification overlay. @return An OverlaySupportEntry representing the displayed notification overlay.

Implementation

OverlaySupportEntry headsUpNotification(String? title, String? body) {
  return showOverlayNotification((BuildContext context) {
    return SafeArea(
      child: Container(
        width: double.infinity,
        margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
        padding: const EdgeInsets.all(10),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: Row(
          children: <Widget>[
            Container(
              width: 60,
              height: 60,
              padding: const EdgeInsets.all(10.0),
              margin: const EdgeInsets.only(right: 8),
              decoration: BoxDecoration(
                color: Theme.of(context).primaryColor.withValues(alpha: 0.2),
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: SvgPicture.asset(
                notificationIcon,
                colorFilter: ColorFilter.mode(
                  Theme.of(context).primaryColor,
                  BlendMode.srcIn,
                ),
              ),
            ),
            Expanded(
              child: DefaultTextStyle(
                style: defaultTextTheme.labelMedium!.copyWith(
                  color: greyTextColor,
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      title ?? '',
                      style: defaultTextTheme.bodyMedium!.copyWith(
                        fontWeight: fontWeightMedium,
                        color: blackColor,
                      ),
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                    ),
                    Text(
                      body ?? '',
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }, duration: const Duration(seconds: 5));
}