Skip to Content
Forui 0.12.0 is released 🎉
DocumentationNavigationHeader

Header

A header contains the page’s title and navigation actions. It is typically used on pages at the root of the navigation stack.

API Reference

Nested Header

It is typically used on nested pages or sheets.

CLI

To generate and customize this style:

dart run forui style create headers

Usage

A header is typically used with FScaffold. A working example can be found here.

FHeader(...)

FHeader(
  style: FHeaderStyle(...),
  title: const Text('Title'),
  suffixes: [
    FHeaderAction(
      style: FHeaderActionStyle(...),
      icon: Icon(FIcons.alarmClock),
      onPress: () {},
      onHoverChange: (hovered) {},
      onStateChange: (states) {},
    ),
    FHeaderAction(
      icon: Icon(FIcons.plus),
      onPress: () {},
    ),
  ],
);

FHeader.nested(...)

FHeader.nested(
  style: FHeaderStyle(...),
  title: const Text('Title'),
  titleAlignment: Alignment.center,
  prefixes: [
    FHeaderAction.back(
      onPress: () {},
      onHoverChange: (hovered) {},
      onStateChange: (states) {},
    ),
  ],
  suffixes: [
    FHeaderAction(
      style: FHeaderActionStyle(...),
      icon: Icon(FIcons.info),
      onPress: () {},
    ),
    FHeaderAction.x(
      onPress: () {},
      onHoverChange: (hovered) {},
      onStateChange: (states) {},
    ),
  ],
);

Examples

Nested Header with Back Icon

Nested Header with X Icon

Last updated on
BreadcrumbPagination