Header

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

Nested Header

It is typically used on nested pages or sheets.

Usage

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

FHeader(...)

FHeader(
  title: const Text('Title'),
  actions: [
    FHeaderAction(
      icon: FAssets.icons.alarmClock,
      onPress: () {},
    ),
    FHeaderAction(
      icon: FAssets.icons.plus,
      onPress: () {},
    ),
  ],
);

FHeader.nested(...)

FHeader.nested(
  title: const Text('Title'),
  leftActions: [
    FHeaderAction.back(onPress: () {}),
  ],
  rightActions: [
    FHeaderAction(
      icon: FAssets.icons.info,
      onPress: () {},
    ),
    FHeaderAction.x(onPress: () {}),
  ],
);

Examples

Nested Header with Back Icon

Nested Header with X Icon