πŸ“¬ AppMessage

app_message is a lightweight, customizable Flutter library that allows you to display animated, dismissible banner messages at the top of your app. It’s ideal for showing alerts, toasts, and app-wide notifications with a clean and consistent design.


✨ Features

  • βœ… Animated top-banner messages
  • βœ… Built-in types: information, success, caution, error, custom
  • βœ… Fully customizable styles, widgets, colors, icons, and actions
  • βœ… Global API: showAppMessage and clearAppMessage
  • βœ… Swipe to dismiss
  • βœ… Easy to integrate with MaterialApp

πŸš€ Installation

Add this to your pubspec.yaml:

dependencies:
  app_message: <latest_version>

Then run:

flutter pub get

or

flutter pub add app_message

🧱 Getting Started

1. Wrap Your App

To use AppMessage, wrap your entire app with it:

import 'package:app_message/app_message.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return AppMessage(
      child: MaterialApp(
        title: 'App Message Demo',
        home: const MyHomePage(),
      ),
    );
  }
}

2. Show a Message

Use the showAppMessage function:

showAppMessage(
  context: context,
  title: "Hello!",
  message: "This is an informational message.",
  type: AppMessageType.information,
);

You can also clear a message manually:

clearAppMessage(context);

πŸ§ͺ Example Usage

OutlinedButton(
  onPressed: () {
    showAppMessage(
      context: context,
      title: "Success",
      message: "Operation completed successfully!",
      type: AppMessageType.success,
    );
  },
  child: Text("Show Success Message"),
);

Built-in types:

Type Usage Example
information For general info
success Operation completed
caution Warning or cautionary notes
error For error messages
custom Fully customizable with your own style

🎨 Customization Options

The showAppMessage() function accepts several optional parameters:

showAppMessage(
  context: context,
  title: "Custom Title",
  message: "Custom message body",
  icon: Icon(Icons.star),
  textColor: Colors.black,
  backgroundColor: Colors.yellow.shade100,
  indicatorColor: Colors.amber,
  showDuration: 4,
  animationDuration: Duration(milliseconds: 300),
  padding: EdgeInsets.all(12),
  curve: Curves.easeInOut,
  onTap: (ctx) => print("Message tapped"),
);

🧩 API Reference

showAppMessage({ ... })

Parameter Type Description
context BuildContext (required) Build context to find the AppMessage widget
title String? Optional message title
titleWidget Widget? Custom title widget
message String? Main message text
messageWidget Widget? Custom message widget
icon Widget? Optional icon
type AppMessageType (default: information) Predefined message type
onTap Function(BuildContext)? Callback when the message is tapped
textColor Color? Message text color
backgroundColor Color? Background color of the message box
indicatorColor Color? Color of the left indicator stripe
showDuration int (seconds) Duration the message stays on screen
animationDuration Duration Entry/exit animation duration
padding EdgeInsetsGeometry? Internal padding
curve Curve Animation curve

πŸ“„ License

MIT License Β© NGUYEN HAI DANG


πŸ’‘ Tip

Call AppMessage.of(context)?.controller directly if you need fine-grained control, such as persistent messages, or want to implement your own advanced display logic.


Libraries

app_message