Header

1@override
2Widget build(BuildContext _) => FHeader(
3  title: const Text('Edit Alarm'),
4  suffixes: [
5    FHeaderAction(icon: const Icon(FIcons.alarmClock), onPress: () {}),
6    FHeaderAction(icon: const Icon(FIcons.plus), onPress: () {}),
7  ],
8);
9

Nested Header

It is typically used on nested pages or sheets.

1@override
2Widget build(BuildContext _) => FHeader.nested(
3  title: const Text('Appointment'),
4  prefixes: [FHeaderAction.back(onPress: () {})],
5  suffixes: [
6    FHeaderAction(icon: const Icon(FIcons.info), onPress: () {}),
7    FHeaderAction(icon: const Icon(FIcons.plus), onPress: () {}),
8  ],
9);
10

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(...)`

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

`FHeader.nested(...)`

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

Examples

1@override
2Widget build(BuildContext _) => FHeader(
3  title: const Text('Edit Alarm'),
4  suffixes: [
5    FHeaderAction(icon: const Icon(FIcons.alarmClock), onPress: () {}),
6    FHeaderAction(icon: const Icon(FIcons.plus), onPress: () {}),
7  ],
8);
9

Nested Header with Back Icon

1@override
2Widget build(BuildContext _) => FHeader.nested(
3  title: const Text('Appointment'),
4  prefixes: [FHeaderAction.back(onPress: () {})],
5  suffixes: [
6    FHeaderAction(icon: const Icon(FIcons.info), onPress: () {}),
7    FHeaderAction(icon: const Icon(FIcons.plus), onPress: () {}),
8  ],
9);
10

Nested Header with X Icon

1@override
2Widget build(BuildContext _) => FHeader.nested(
3  title: const Text('Climate'),
4  prefixes: [
5    FHeaderAction(icon: const Icon(FIcons.thermometer), onPress: () {}),
6    const FHeaderAction(icon: Icon(FIcons.wind), onPress: null),
7  ],
8  suffixes: [FHeaderAction.x(onPress: () {})],
9);
10

On this page