Header

FHeader(
  title: const Text('Edit Alarm'),
  suffixes: [
    FHeaderAction(icon: const Icon(FIcons.alarmClock), onPress: () {}),
    FHeaderAction(icon: const Icon(FIcons.plus), onPress: () {}),
  ],
);

Nested Header

It is typically used on nested pages or sheets.

FHeader.nested(
  title: const Text('Appointment'),
  prefixes: [FHeaderAction.back(onPress: () {})],
  suffixes: [
    FHeaderAction(icon: const Icon(FIcons.info), onPress: () {}),
    FHeaderAction(icon: const Icon(FIcons.plus), onPress: () {}),
  ],
);

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(
  title: const Text('Title'),
  style: (style) => style.copyWith(...),
  suffixes: [
    FHeaderAction(
      icon: const Icon(FIcons.alarmClock),
      style: (style) => style.copyWith(...),
      onPress: () {},
      onHoverChange: (hovered) {},
      onStateChange: (delta) {},
    ),
    FHeaderAction(icon: const Icon(FIcons.plus), onPress: () {}),
  ],
);

`FHeader.nested(...)`

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

Examples

FHeader(
  title: const Text('Edit Alarm'),
  suffixes: [
    FHeaderAction(icon: const Icon(FIcons.alarmClock), onPress: () {}),
    FHeaderAction(icon: const Icon(FIcons.plus), onPress: () {}),
  ],
);

Nested Header with Back Icon

FHeader.nested(
  title: const Text('Appointment'),
  prefixes: [FHeaderAction.back(onPress: () {})],
  suffixes: [
    FHeaderAction(icon: const Icon(FIcons.info), onPress: () {}),
    FHeaderAction(icon: const Icon(FIcons.plus), onPress: () {}),
  ],
);

Nested Header with X Icon

FHeader.nested(
  title: const Text('Climate'),
  prefixes: [
    FHeaderAction(icon: const Icon(FIcons.thermometer), onPress: () {}),
    const FHeaderAction(icon: Icon(FIcons.wind), onPress: null),
  ],
  suffixes: [FHeaderAction.x(onPress: () {})],
);

On this page