FossListTile class Layout

See the list tile documentation ↗ or try it live in the playground ↗.

A row in a list: an optional leading widget, a title over an optional subtitle, and an optional trailing widget. A settings screen or an account list is mostly this one row repeated.

Only title is required, and every gap collapses with the slot it belongs to. By default the row paints its own tinted, rounded surface, so a plain list reads as a stack of bands; pass FossListTileVariant.plain for a row inside a FossCard, where a second rectangle would double-draw.

Pass onTap to make the whole row one target, which adds hover, pressed, and keyboard activation; leaving it null keeps the row inert at full opacity. That is a different state from enabled: false, which dims the row and blocks it.

Two rules govern an interactive trailing widget, such as a FossSwitch. The trailing widget wins its own hit area, so a tap on it never reaches onTap; wire the two to different callbacks. Focus lands on the row first and the trailing control second, which is the order assistive tech announces them.

The tile draws no separator and carries no outer margin, so it stays a row rather than a card: space filled rows from the list, and put a FossSeparator between plain ones.

Customize globally by passing your own FossThemeData, or per instance through the widget's style object. There are no per-instance token props: to change color, radius, or spacing, change the theme.

See also FossCard for the surface a group of plain rows usually sits on.

FossListTile(
  leading: const Icon(LucideIcons.bell),
  title: const Text('Notifications'),
  subtitle: const Text('Push and email'),
  trailing: FossSwitch(
    value: notify,
    onChanged: (v) => setState(() => notify = v),
  ),
  onTap: openNotificationSettings,
);

Inheritance

• Object
• DiagnosticableTree
• Widget
• StatefulWidget
• FossListTile

Annotations

• @FossSince('0.1.2')

Constructors

FossListTile({required Widget title, Widget? subtitle, FossListTileVariant variant = FossListTileVariant.filled, Widget? leading, Widget? trailing, VoidCallback? onTap, bool enabled = true, String? semanticLabel, FossListTileStyle? style, Key? key})

const

Properties

enabled → bool

Whether the row is interactive. False dims it to 64% and blocks both the pointer and the keyboard.

final

hashCode → int

The hash code for this object.

no setter, inherited

key → Key?

Controls how one widget replaces another widget in the tree.

final, inherited

leading → Widget?

A widget at the start of the row (an icon, an avatar), themed as an icon and rendered at its own size.

final

onTap → VoidCallback?

Called when the row is tapped or activated with Enter or Space. Null leaves the row inert: no hover, no cursor change, and no focus stop.

final

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

semanticLabel → String?

Accessibility name announced instead of title and subtitle, for a row whose visible text does not read well on its own.

final

style → FossListTileStyle?

Per-instance overrides layered on the theme-resolved style.

final

subtitle → Widget?

The secondary line below title, typically a Text. Clamped to two lines.

final

title → Widget

The primary line, typically a Text. Color, weight, and type step are applied through DefaultTextStyle. Clamped to one line.

final

trailing → Widget?

A widget at the end of the row (a switch, a chevron, a badge). An interactive one keeps its own gestures and its own focus stop.

final

variant → FossListTileVariant

The surface the row paints at rest. Defaults to FossListTileVariant.filled; pass FossListTileVariant.plain for a row that sits inside a container which already paints its own surface.

final

Methods

createElement() → StatefulElement

Creates a StatefulElement to manage this widget's location in the tree.

inherited

createState() → State<FossListTile>

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