Sidebar

A sidebar is typically used with FScaffold. Usage of FScaffold can be found here.

CLI

To generate a specific style for customization:

dart run forui style create sidebar

Anatomy

This segment describes the anatomy of the various elements of a sidebar.

`FSidebar`

The widget that provides an opinionated layout on the side of the screen. The widget has the following sections:

Name	Parameter	Position	Optional
header	header	sticky	Yes
content	child/children	scrollable	No
footer	footer	sticky	Yes

`FSidebarGroup`

A widget that is used to group several FSidebarItems.

`FSidebarItem`

Represents an item on the sidebar. May be nested in FSidebarItem.children to create nested items.

Usage

`FSidebar(...)`

1FSidebar(
2  style: const .delta(headerPadding: .value(.fromLTRB(0, 16, 0, 0))),
3  header: const Text('Header'),
4  children: [
5    FSidebarGroup(
6      label: const Text('Navigation'),
7      children: [
8        FSidebarItem(
9          icon: const Icon(FLucideIcons.house),
10          label: const Text('Home'),
11          onPress: () {},
12        ),
13        FSidebarItem(
14          icon: const Icon(FLucideIcons.settings),
15          label: const Text('Settings'),
16          onPress: () {},
17        ),
18      ],
19    ),
20  ],
21  footer: const Text('Footer'),
22)

`FSidebar.builder(...)`

1FSidebar.builder(
2  style: const .delta(headerPadding: .value(.fromLTRB(0, 16, 0, 0))),
3  header: const Text('Header'),
4  itemBuilder: (context, index) =>
5      FSidebarItem(label: Text('Item $index'), onPress: () {}),
6  itemCount: 10,
7  footer: const Text('Footer'),
8)

`FSidebar.raw(...)`

1FSidebar.raw(
2  style: const .delta(headerPadding: .value(.fromLTRB(0, 16, 0, 0))),
3  header: const Text('Header'),
4  child: ListView(
5    children: [FSidebarItem(label: const Text('Custom Item'), onPress: () {})],
6  ),
7  footer: const Text('Footer'),
8)

`FSidebarGroup(...)`

1FSidebarGroup(
2  style: const .delta(padding: .value(.symmetric(horizontal: 8))),
3  label: const Text('Navigation'),
4  action: const Icon(FLucideIcons.plus),
5  children: [
6    FSidebarItem(label: const Text('Home'), onPress: () {}),
7    FSidebarItem(label: const Text('Settings'), onPress: () {}),
8  ],
9)

`FSidebarItem(...)`

1FSidebarItem(
2  style: const .delta(padding: .value(.symmetric(horizontal: 8))),
3  selected: false,
4  initiallyExpanded: false,
5  icon: const Icon(FLucideIcons.house),
6  label: const Text('Home'),
7  children: [
8    FSidebarItem(label: const Text('Nested Item 1'), onPress: () {}),
9    FSidebarItem(label: const Text('Nested Item 2'), onPress: () {}),
10  ],
11)

Examples

Suited for devices with limited screen space.

CLI