MorphingCard class

Flagship card → fullscreen morph widget inspired by Material Container Transform.

Tapping the collapsedBuilder content expands it — from its exact on-screen position — into a fullscreen detail view using a smooth morph animation. Dragging down from the expanded state collapses it back to the card.

Quick Start

MorphingCard<Product>(
  collapsedBuilder: (context, progress) => ProductCard(product),
  expandedBuilder: (context, progress) => ProductDetailPage(product),
  duration: const Duration(milliseconds: 450),
  dragToCollapse: true,
)

Key behaviors

  • Origin preservation — animation always begins from the card's current on-screen position.
  • Content crossfade — card UI fades out while detail UI fades in.
  • Shape morph — corner radius and elevation animate together.
  • Drag-to-collapse — interactive drag back from fullscreen.
  • Back button — PopScope consumes the back gesture when expanded.

Morphs render via Flutter's Overlay for correct z-order.

Inheritance

Constructors

MorphingCard({Key? key, required Widget collapsedBuilder(BuildContext context, double progress), required Widget expandedBuilder(BuildContext context, double progress), MorphController? controller, Duration duration = const Duration(milliseconds: 450), Duration? collapseDuration, Curve curve = Curves.easeInOutCubic, bool dragToCollapse = true, double borderRadius = 16.0, double maxElevation = 16.0, Color? surfaceColor, double scrimOpacity = 0.5, double backgroundScale = 0.96, VoidCallback? onExpand, VoidCallback? onCollapse})
const

Properties

backgroundScale → double
Minimum background scale when overlay is fully open.
final
borderRadius → double
Corner radius in the collapsed (card) state.
final
collapsedBuilder → Widget Function(BuildContext context, double progress)
Builds the collapsed / card-state content.
final
collapseDuration → Duration?
Animation duration for collapse. Defaults to duration.
final
controller → MorphController?
Optional external controller. If null, an internal one is created.
final
curve → Curve
Easing curve for both expand and collapse.
final
dragToCollapse → bool
Whether to allow dragging down to collapse from the fullscreen view.
final
duration → Duration
Animation duration for expand.
final
expandedBuilder → Widget Function(BuildContext context, double progress)
Builds the expanded / fullscreen content.
final
hashCode → int
The hash code for this object.
no setterinherited
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
maxElevation → double
Peak shadow elevation (reached at ~50% of the transition).
final
onCollapse → VoidCallback?
Called when the card finishes collapsing.
final
onExpand → VoidCallback?
Called when the card finishes expanding.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
scrimOpacity → double
Maximum scrim opacity behind the overlay (0.0–1.0).
final
surfaceColor → Color?
Surface color. Defaults to ColorScheme.surface.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<MorphingCard>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited