maintenance_banner #

A Flutter package for displaying customizable maintenance banners at the top of your app.

Maintenance Banner

Features #

• 🎨 Fully Customizable: Use your own banner widget or customize colors, message, height, and icon
• 📱 Safe Area Aware: Automatically handles device safe areas (notches, status bars)
• 🔄 Simple Integration: Easy to integrate with MaintenanceWrapper
• 🎯 Flexible: Works with any state management solution (setState, Provider, Bloc, etc.)
• ⚡ Lightweight: No external dependencies except Flutter
• ✨ Smooth Animations: Beautiful slide and fade animations when banner appears/disappears
• 🔔 Callbacks Support: Get notified when banner is shown or hidden

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  maintenance_banner: ^0.2.1

Then run:

flutter pub get

Usage #

Basic Usage #

Wrap your app with MaintenanceWrapper and provide a custom banner widget:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MaintenanceWrapper(
        isUnderMaintenance: true, // or use a state variable
        banner: Container(
          height: 32,
          color: Colors.orange,
          child: const Center(
            child: Text('Application under maintenance'),
          ),
        ),
        child: HomePage(),
      ),
    );
  }
}

With State Management #

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isUnderMaintenance = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MaintenanceWrapper(
        isUnderMaintenance: isUnderMaintenance,
        banner: Container(
          height: 32,
          color: Colors.orange,
          child: const Center(
            child: Text(
              'Application under maintenance',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
        child: HomePage(),
      ),
    );
  }
}

Customization Options #

The MaintenanceWrapper widget accepts the following parameters:

Advanced Example with Animations and Callbacks #

MaintenanceWrapper(
  isUnderMaintenance: maintenanceController.isMaintenanceMode,
  topPadding: 0, // Override default padding
  animationDuration: const Duration(milliseconds: 500), // Custom animation speed
  onBannerShown: () {
    print('Maintenance banner is now visible');
    // Track analytics, show notification, etc.
  },
  onBannerHidden: () {
    print('Maintenance banner is now hidden');
  },
  banner: Container(
    height: 40,
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.orange.shade400, Colors.orange.shade600],
      ),
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(Icons.build, color: Colors.white, size: 20),
        SizedBox(width: 8),
        Text(
          'Maintenance in progress',
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
            fontSize: 14,
          ),
        ),
      ],
    ),
  ),
  child: YourApp(),
)

How It Works #

The MaintenanceWrapper widget:

1. Checks the isUnderMaintenance boolean
2. If true, wraps your app with MaintenanceBannerWidget which displays the banner in a Stack
3. The banner is positioned at the top, respecting safe areas
4. Your app content is automatically padded to avoid overlap

Example App #

Check out the example directory for a complete working example:

cd example
flutter pub get
flutter run

Maintenance Banner Example

Requirements #

• Flutter SDK: >=3.0.0
• Dart SDK: >=3.0.0 <4.0.0

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

License #

MIT License - see LICENSE file for details.