CNFloatingIsland class
A floating pill widget inspired by Apple's Dynamic Island.
The floating island can morph between a compact and expanded state with smooth spring animations. It's perfect for notifications, music controls, or any floating UI element.
Example:
CNFloatingIsland(
collapsed: Row(
children: [
Icon(Icons.music_note),
SizedBox(width: 8),
Text('Now Playing'),
],
),
expanded: Column(
children: [
Image.asset('album_art.png'),
Text('Song Title'),
MusicControls(),
],
),
onTap: () => controller.toggle(),
)
- Inheritance
-
- Object
- DiagnosticableTree
- Widget
- StatefulWidget
- CNFloatingIsland
- Available extensions
Constructors
-
CNFloatingIsland({Key? key, required Widget collapsed, Widget? expanded, bool isExpanded = false, VoidCallback? onTap, ValueChanged<
bool> ? onExpandStateChanged, CNFloatingIslandPosition position = CNFloatingIslandPosition.top, double collapsedHeight = 44.0, double? collapsedWidth, double? expandedHeight, double? expandedWidth, double? cornerRadius, Color? tint, Duration animationDuration = const Duration(milliseconds: 400), double springDamping = 0.8, double springResponse = 0.4, EdgeInsets margin = const EdgeInsets.all(16), CNFloatingIslandController? controller}) -
Creates a floating island.
const
Properties
- animationDuration → Duration
-
Duration of the expand/collapse animation.
final
- collapsed → Widget
-
Content shown when collapsed (compact mode).
final
- collapsedHeight → double
-
Height when collapsed.
final
- collapsedWidth → double?
-
Width when collapsed. If null, uses intrinsic width.
final
- controller → CNFloatingIslandController?
-
Controller for programmatic control.
final
- cornerRadius → double?
-
Corner radius. Defaults to half of collapsedHeight for pill shape.
final
- expanded → Widget?
-
Content shown when expanded. If null, only collapsed content is shown.
final
- expandedHeight → double?
-
Height when expanded. If null, uses intrinsic height.
final
- expandedWidth → double?
-
Width when expanded. If null, fills available width minus margins.
final
- hashCode → int
-
The hash code for this object.
no setterinherited
- isExpanded → bool
-
Whether the island is currently expanded.
final
- key → Key?
-
Controls how one widget replaces another widget in the tree.
finalinherited
- margin → EdgeInsets
-
Margin around the floating island.
final
-
onExpandStateChanged
→ ValueChanged<
bool> ? -
Called when the expand state changes.
final
- onTap → VoidCallback?
-
Called when the island is tapped.
final
- position → CNFloatingIslandPosition
-
Position of the floating island.
final
- runtimeType → Type
-
A representation of the runtime type of the object.
no setterinherited
- springDamping → double
-
Spring damping for the animation (0.0 - 1.0).
final
- springResponse → double
-
Spring response time for the animation.
final
- tint → Color?
-
Tint color for the glass effect.
final
Methods
-
createElement(
) → StatefulElement -
Creates a StatefulElement to manage this widget's location in the tree.
inherited
-
createState(
) → State< CNFloatingIsland> -
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
-
liquidGlass(
{CNGlassEffect effect = CNGlassEffect.regular, CNGlassEffectShape shape = CNGlassEffectShape.capsule, double? cornerRadius, Color? tint, bool interactive = false}) → Widget -
Available on Widget, provided by the LiquidGlassExtension extension
Applies a Liquid Glass effect to this widget. -
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