Navigation

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.

CLI

To generate a specific style for customization:

dart run forui style create headers

Usage

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

FHeader(...)

1FHeader(
2 style: const .delta(padding: .value(.zero)),
3 title: const Text('Title'),
4 suffixes: [
5 FHeaderAction(icon: const Icon(FLucideIcons.settings), onPress: () {}),
6 ],
7)

FHeader.nested(...)

1FHeader.nested(
2 style: const .delta(padding: .value(.zero)),
3 title: const Text('Title'),
4 titleAlignment: .center,
5 prefixes: [FHeaderAction.back(onPress: () {})],
6 suffixes: [FHeaderAction.x(onPress: () {})],
7)

Examples

Nested Header with Back Icon

Nested Header with X Icon

On this page