Header
A header contains the page’s title and navigation actions. It is typically used on pages at the root of the navigation stack.
Preview
Nested Header
It is typically used on nested pages or sheets.
Preview
Usage
A header is typically used with FScaffold
. A working example can be found here.
FHeader(...)
FHeader(
title: const Text('Title'),
suffixes: [
FHeaderAction(
icon: Icon(FIcons.alarmClock),
onPress: () {},
onHoverChange: (hovered) {},
onStateChange: (states) {},
),
FHeaderAction(
icon: Icon(FIcons.plus),
onPress: () {},
),
],
);
FHeader.nested(...)
FHeader.nested(
title: const Text('Title'),
titleAlignment: Alignment.center,
prefixes: [
FHeaderAction.back(
onPress: () {},
onHoverChange: (hovered) {},
onStateChange: (states) {},
),
],
suffixes: [
FHeaderAction(
icon: Icon(FIcons.info),
onPress: () {},
),
FHeaderAction.x(
onPress: () {},
onHoverChange: (hovered) {},
onStateChange: (states) {},
),
],
);
Examples
Header
Preview
Nested Header with Back Icon
Preview
Nested Header with X Icon
Preview
Last updated on