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.

widget_backdrop

A Material Design backdrop: a back layer for context and actions, and a front layer that slides over it.

Features

• Tap or drag to open/close — the front header (a Material drag-handle pill by default) is the handle, and dragging moves the front layer in exact lockstep with your finger.
• BackdropController — open, close, or toggle the front layer from anywhere, and listen for state changes (it's a ChangeNotifier).
• Content-sized front layer — with FrontLayerFit.content the open front layer only covers as much of the back layer as its child needs.
• Safe-area aware — the closed header covers the home indicator area with its background running edge-to-edge (a SafeArea inside keeps its content clear), and the open front layer stops below the status bar so the header always stays reachable.

Usage

import 'package:widget_backdrop/widget_backdrop.dart';

Scaffold(
  body: Backdrop(
    backLayer: const BackLayerContent(),
    frontLayer: const FrontLayerContent(),
    frontHeader: const Center(child: Text('Tap or drag me')),
    initiallyOpen: false,
  ),
)

Controlling it programmatically

Pass a BackdropController to open and close the front layer from your own widgets, and rebuild on state changes with ListenableBuilder:

final controller = BackdropController(); // dispose() it with your State

Backdrop(
  controller: controller,
  backLayer: ListenableBuilder(
    listenable: controller,
    builder: (context, _) => FilledButton(
      onPressed: controller.toggle,
      child: Text(controller.isOpen ? 'Close' : 'Open'),
    ),
  ),
  frontLayer: ...,
  frontHeader: ...,
)

See example/lib/main.dart for a complete app.

Configuration

Parameter	Default	Description
backLayer	required	The layer revealed when the front layer is closed.
frontLayer	required	The content of the sliding front layer.
frontHeader	drag handle	Header row at the top of the front layer; acts as the tap/drag handle. Defaults to a Material-style drag handle pill. When closed it also covers the bottom inset — paint header background inside this widget, and wrap its content in SafeArea to keep it above the home indicator (the default handle does).
frontHeaderHeight	48.0	Height of the header row. 0 removes the header entirely; the front layer then fully hides when closed and needs a controller to reopen.
frontHeaderVisibleWhenClosed	true	Keep the header peeking above the bottom edge when closed.
frontLayerFit	FrontLayerFit.expand	expand fills the backdrop; content wraps the front layer's own height. With content, give frontLayer an intrinsic height — widgets that expand to fill their parent (like Center) cover the whole backdrop.
openTopOffset	64.0	How much of the back layer stays visible above the open front layer (a minimum when frontLayerFit is content).
useSafeArea	true	Keep the front layer clear of the top and bottom view padding: the closed header area covers the home indicator, the open front layer stays below the status bar, and the insets are handed to the header and content through MediaQuery, so SafeArea widgets and scrollables inside them avoid the insets while backgrounds stay edge-to-edge.
frontLayerElevation	12.0	Elevation of the front layer Material surface.
frontLayerBorderRadius	16.0 top corners	Border radius of the front layer Material surface.
frontLayerClipBehavior	Clip.antiAlias	Clip behavior of the front layer Material surface. Keep clipping enabled when using rounded corners and edge-to-edge child backgrounds.
initiallyOpen	true	Whether the front layer starts open.
duration	450 ms	Length of the open/close animation for taps and controller calls.
curve	Curves.easeInOut	Easing of the open/close animation for taps and controller calls. Drags released with momentum settle with a physics simulation instead.
controller	null	A BackdropController for programmatic control.

Credits

The starting point was the backdrop demo from the Flutter team's udacity-course repository (BSD-3-Clause, Copyright 2018 The Chromium Authors), described in Decomposing widgets: Backdrop. This package is a substantial rewrite with a new API.

License

MIT for the package code, with the BSD-3-Clause notice for the adapted Flutter demo code — see LICENSE.