widget_backdrop 1.0.0

A Material Design backdrop widget with a draggable front layer, a controller API, content-sized front layers, and home-indicator safe area support.

example/lib/main.dart

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

void main() => runApp(const BackdropExample());

class BackdropExample extends StatefulWidget {
  const BackdropExample({super.key});

  @override
  State<BackdropExample> createState() => _BackdropExampleState();
}

class _BackdropExampleState extends State<BackdropExample> {
  // Use a controller when widgets outside the Backdrop need to open, close,
  // toggle, or listen to the front layer.
  final BackdropController _controller = BackdropController();

  @override
  void dispose() {
    // The Backdrop listens to the controller, but this State owns it.
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.teal,
          title: ListenableBuilder(
            listenable: _controller,
            // Rebuild only the title when the controller reports a state change.
            builder: (_, _) => Text('Front layer is ${_controller.isOpen ? 'OPEN' : 'CLOSED'}'),
          ),
        ),
        body: Backdrop(
          controller: _controller,
          frontLayer: Container(
            height: 160,
            color: Colors.orange,
            child: Center(child: Text('<FrontLayer Content>', style: Theme.of(context).textTheme.headlineSmall)),
          ),
          backLayer: Container(
            color: Colors.tealAccent,
            child: Center(child: Text('<BackLayer Content>', style: Theme.of(context).textTheme.headlineSmall)),
          ),
          // No frontHeader is provided, so Backdrop shows its default tap-and-drag handle.
        ),
        floatingActionButton: FloatingActionButton(
          // The same controller can be used from anywhere in this widget tree.
          onPressed: _controller.toggle,
          child: const Icon(Icons.swap_vert),
        ),
      ),
    );
  }
}