Easy In-App Notify 📱🔥 #

A beautiful and customizable Flutter package for displaying notifications as in-app overlays with smooth animations, progress indicators, and intuitive user interactions.

Perfect for showing notifications when your app is in the foreground!

📷 Screenshots #

Easy In-App Notify Example 1 Easy In-App Notify Example 2

✨ Features #

🎯 Overlay Notifications - Non-blocking notifications that appear over your app content
📱 Foreground Notifications - Show notifications when app is active/foreground
🎨 Fully Customizable - Colors, spacing, dimensions, and visual styling
⏱️ Auto-Dismiss - Configurable duration with visual countdown progress bar
👆 Swipe to Dismiss - Users can swipe notifications away manually
🎭 Smooth Animations - Slide-in/slide-out transitions with easing curves
🔊 Sound Support - Optional notification sounds for audio feedback (Android & iOS only)
🎯 Material Design - Follows Material Design principles and theming
📱 Safe Area Aware - Respects device safe areas and notches
🌐 RTL Support - Full right-to-left language support
🚀 Lightweight - Minimal dependencies and optimized performance

📦 Installation #

Run this command to add the package to your project:

flutter pub add easy_in_app_notify

Or manually add to your pubspec.yaml:

dependencies:
  easy_in_app_notify: # Latest version from pub.flutter-io.cn

🚀 Quick Start #

1. Initialize the Package #

Initialize the notification service in a StatefulWidget that comes AFTER MaterialApp:

import 'package:easy_in_app_notify/easy_in_app_notify.dart';
import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(), // StatefulWidget AFTER MaterialApp
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    // Initialize AFTER MaterialApp is built
    WidgetsBinding.instance.addPostFrameCallback((_) {
      EasyInAppNotify.init(context);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('My App')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            EasyInAppNotify.show(
              content: EasyInAppNotifyContent(
                title: "Hello!",
                message: "Welcome to the app.",
              ),
            );
          },
          child: Text('Show Notification'),
        ),
      ),
    );
  }
}

Important Notes:

The init method must be called in initState of a StatefulWidget that is AFTER MaterialApp
Use addPostFrameCallback to ensure the widget tree is fully built
The context must be from within the MaterialApp widget tree (like home widget)

2. Show Notifications #

Display notifications anywhere in your app:

EasyInAppNotify.show(
  content: EasyInAppNotifyContent(
    title: "Success!",
    message: "Your changes have been saved successfully.",
  ),
);

📖 Usage Examples #

Basic Notification #

EasyInAppNotify.show(
  content: EasyInAppNotifyContent(
    title: "Welcome!",
    message: "Thanks for using our app.",
  ),
);

Notification with Custom Icon #

EasyInAppNotify.show(
  content: EasyInAppNotifyContent(
    title: "Download Complete",
    message: "Your file has been downloaded successfully.",
    icon: Icons.download_done,
    trailingText: "2m ago",
  ),
);

Customized Notification #

EasyInAppNotify.show(
  content: EasyInAppNotifyContent(
    title: "Error Occurred",
    message: "Failed to save your changes. Please try again.",
    icon: Icons.error,
    trailingText: "Retry",
  ),
  option: EasyInAppNotifyOption(
    duration: 8, // Show for 8 seconds
    showProgressBar: true,
    swipeToDismiss: true,
  ),
  theme: EasyInAppNotifyTheme(
    color: Colors.red,
    elevation: 10,
    radius: 15,
    margin: 10,
  ),
);

Different Notification Types #

// Success notification
EasyInAppNotify.show(
  content: EasyInAppNotifyContent(
    title: "Success",
    message: "Operation completed successfully!",
    icon: Icons.check_circle,
  ),
  theme: EasyInAppNotifyTheme(color: Colors.green),
);

// Warning notification
EasyInAppNotify.show(
  content: EasyInAppNotifyContent(
    title: "Warning",
    message: "Please check your internet connection.",
    icon: Icons.warning,
  ),
  theme: EasyInAppNotifyTheme(color: Colors.orange),
);

// Info notification
EasyInAppNotify.show(
  content: EasyInAppNotifyContent(
    title: "Info",
    message: "New features are available in settings.",
    icon: Icons.info,
  ),
  theme: EasyInAppNotifyTheme(color: Colors.blue),
);

🎛️ Configuration #