auto_status_bar 1.0.0

Automatically adjust the status bar appearance (light/dark) based on the underlying screen content brightness.

example/lib/main.dart

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

void main() {
  runApp(const ExampleApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'auto_status_bar Example',
      // 1. Register the navigator observer for automatic refresh.
      navigatorObservers: [AutoStatusBar.instance.observer],
      // 2. Wrap the app content with AutoStatusBarCapturer.
      builder: (context, child) {
        return AutoStatusBarCapturer(child: child!);
      },
      home: const LightPage(),
    );
  }
}

/// A page with a bright background.
///
/// The status bar icons will automatically switch to dark when this page
/// is displayed.
class LightPage extends StatelessWidget {
  const LightPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('Light Page'),
        backgroundColor: Colors.white,
        foregroundColor: Colors.black,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(builder: (_) => const DarkPage()),
            );
          },
          child: const Text('Go to Dark Page'),
        ),
      ),
    );
  }
}

/// A page with a dark background.
///
/// The status bar icons will automatically switch to light when this page
/// is displayed.
class DarkPage extends StatelessWidget {
  const DarkPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        title: const Text('Dark Page'),
        backgroundColor: Colors.black,
        foregroundColor: Colors.white,
      ),
      body: Center(
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.white24,
            foregroundColor: Colors.white,
          ),
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: const Text('Go Back'),
        ),
      ),
    );
  }
}