Anchored

Shows overlay floating next to child while visible is true, such as a flyout below a button.

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

Align(
  alignment: Alignment.center,
  child: Anchored(
    visible: true,
    alignment: Alignment.bottomLeft,
    overlay: Container.framed(
      padding: const EdgeInsets.symmetric(horizontal: 1),
      child: const Text('float'),
    ),
    child: const Text('[ trigger ]'),
  ),
)

Details

The overlay appears in the nearest Overlay (the app root has one), above the rest of the app, and stays attached to child: it moves in the same frame child moves, flips to the other side of child when it would run off an edge (opening upward near the bottom of the screen, say), stays within the screen, and hides while child is scrolled out of view. It is removed when visible turns false or this widget leaves the tree, and it uses the Theme in effect where this widget sits.

Clicks outside the overlay still reach the widgets beneath it. To absorb them, or to dismiss the overlay on an outside click, manage the overlay entry yourself and build it with AnchoredFloat.

alignment names the point on child; anchorAlignment names the point on overlay that meets it, defaulting to defaultAnchorAlignment.

Reach past this to BoundsObserver + BoundsAnchor when the two ends have no common parent — a chip in a toolbar with a flyout opened by a global command, or one anchor driving several overlays.

Constructors

`Anchored()`

Parameter	Type	Default	Description
`child:`	`Widget`	required	The widget the overlay is anchored to.
`overlay:`	`Widget`	required	The floating content. Built only while `visible`.
`visible:`	`bool`	`false`	Whether the overlay is currently shown.
`alignment:`	`Alignment`	`Alignment.bottomLeft`	The point on `child` the overlay attaches to.
`anchorAlignment:`	`Alignment?`	—	The point on `overlay` that meets `alignment`. Defaults to `defaultAnchorAlignment` of `alignment`.
`gap:`	`int`	`0`	Cells of separation along the placement axis.

Source

Anchored is defined in packages/fleury/lib/src/widgets/anchored.dart.

Category: Navigation & overlays · All widgets