Sidebar

A sidebar widget that provides an opinionated layout for navigation on the side of the screen.

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

Preview

Code


FScaffold(
  sidebar: FSidebar(
    header: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
            child: SvgPicture.network(
              theme.colors.brightness == Brightness.light
                  ? 'https://forui.dev/light_logo.svg'
                  : 'https://forui.dev/dark_logo.svg',
              height: 24,
              colorFilter: ColorFilter.mode(context.theme.colors.foreground, BlendMode.srcIn),
            ),
          ),
          FDivider(style: context.theme.dividerStyles.horizontalStyle.copyWith(padding: EdgeInsets.zero)),
        ],
      ),
    ),
    footer: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: FCard.raw(
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
          child: Row(
            spacing: 10,
            children: [
              FAvatar.raw(child: Icon(FIcons.userRound, size: 18, color: context.theme.colors.mutedForeground)),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  spacing: 2,
                  children: [
                    Text(
                      'Dash',
                      style: context.theme.typography.sm.copyWith(
                        fontWeight: FontWeight.bold,
                        color: context.theme.colors.foreground,
                      ),
                      overflow: TextOverflow.ellipsis,
                    ),
                    Text(
                      '[email protected]',
                      style: context.theme.typography.xs.copyWith(color: context.theme.colors.mutedForeground),
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    ),
    children: [
      FSidebarGroup(
        label: const Text('Overview'),
        children: [
          FSidebarItem(
            icon: const Icon(FIcons.school),
            label: const Text('Getting Started'),
            initiallyExpanded: true,
            onPress: () {},
            children: [
              FSidebarItem(label: const Text('Installation'), selected: true, onPress: () {}),
              FSidebarItem(label: const Text('Themes'), onPress: () {}),
              FSidebarItem(label: const Text('Typography'), onPress: () {}),
            ],
          ),
          FSidebarItem(icon: const Icon(FIcons.code), label: const Text('API Reference'), onPress: () {}),
          FSidebarItem(icon: const Icon(FIcons.box), label: const Text('Pub Dev'), onPress: () {}),
        ],
      ),
      FSidebarGroup(
        action: const Icon(FIcons.plus),
        onActionPress: () {},
        label: const Text('Widgets'),
        children: [
          FSidebarItem(icon: const Icon(FIcons.circleSlash), label: const Text('Divider'), onPress: () {}),
          FSidebarItem(icon: const Icon(FIcons.scaling), label: const Text('Resizable'), onPress: () {}),
          FSidebarItem(icon: const Icon(FIcons.layoutDashboard), label: const Text('Scaffold'), onPress: () {}),
        ],
      ),
    ],
  ),
  child: Padding(
    padding: const EdgeInsets.symmetric(vertical: 14),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      spacing: 12,
      children: [
        FBreadcrumb(
          children: [
            FBreadcrumbItem(onPress: () {}, child: const Text('Forui')),
            FBreadcrumbItem.collapsed(
              menu: [
                FTileGroup(
                  children: [
                    FTile(title: const Text('Documentation'), onPress: () {}),
                    FTile(title: const Text('Themes'), onPress: () {}),
                  ],
                ),
              ],
            ),
            FBreadcrumbItem(onPress: () {}, child: const Text('Overview')),
            const FBreadcrumbItem(current: true, child: Text('Installation')),
          ],
        ),
        Expanded(
          child: Container(
            decoration: BoxDecoration(
              color: context.theme.colors.muted,
              borderRadius: context.theme.style.borderRadius,
            ),
          ),
        ),
        Expanded(
          flex: 3,
          child: Container(
            decoration: BoxDecoration(
              color: context.theme.colors.muted,
              borderRadius: context.theme.style.borderRadius,
            ),
          ),
        ),
      ],
    ),
  ),
);

CLI

To generate and customize this style:


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	✅
content	child/children	scrollable	❌
footer	footer	sticky	✅

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


FSidebar(
  style: FSidebarStyle(...),
  width: 250,
  header: const Text('Header'),
  footer: const Text('Footer'),
  children: [FSidebarGroup(...)],
);

`FSidebar.builder(...)`


FSidebar.builder(
  style: FSidebarStyle(...),
  width: 250,
  header: const Text('Header'),
  footer: const Text('Footer'),
  itemCount: 5,
  itemBuilder: (context, index) => FSidebarGroup(...),
);

`FSidebar.raw(...)`


FSidebar.raw(
  style: FSidebarStyle(...),
  width: 250,
  header: const Text('Header'),
  footer: const Text('Footer'),
  child: SizedBox(),
);

`FSidebarGroup(...)`


FSidebarGroup(
  style: FSidebarGroupStyle(...),
  label: const Text('Group'),
  action: const Icon(FIcons.plus),
  onActionPress: () {},
  children: [FSidebarItem(...)],
);

`FSidebarItem(...)`


FSidebarItem(
  style: FSidebarItemStyle(...),
  icon: const Icon(FIcons.box),
  label: const Text('Item'),
  selected: false,
  initiallyExpanded: false,
  onPress: () {},
  onLongPress: () {},
  onHoverChange: (hovered) {},
  onStateChange: (states) {},
  children: [FSidebarItem(...)],
);

Examples

Sheet Sidebar

Suited for devices with limited screen space.

Preview

Code


Widget _sidebar(BuildContext context) => DecoratedBox(
  decoration: BoxDecoration(color: context.theme.colors.background),
  child: FSidebar(
    width: 300,
    header: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
            child: SvgPicture.network(
              theme.colors.brightness == Brightness.light
                  ? 'https://forui.dev/light_logo.svg'
                  : 'https://forui.dev/dark_logo.svg',
              height: 24,
              colorFilter: ColorFilter.mode(context.theme.colors.foreground, BlendMode.srcIn),
            ),
          ),
          FDivider(style: context.theme.dividerStyles.horizontalStyle.copyWith(padding: EdgeInsets.zero)),
        ],
      ),
    ),
    footer: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: FCard.raw(
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
          child: Row(
            spacing: 10,
            children: [
              FAvatar.raw(child: Icon(FIcons.userRound, size: 18, color: context.theme.colors.mutedForeground)),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  spacing: 2,
                  children: [
                    Text(
                      'Dash',
                      style: context.theme.typography.sm.copyWith(
                        fontWeight: FontWeight.bold,
                        color: context.theme.colors.foreground,
                      ),
                      overflow: TextOverflow.ellipsis,
                    ),
                    Text(
                      '[email protected]',
                      style: context.theme.typography.xs.copyWith(color: context.theme.colors.mutedForeground),
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    ),
    children: [
      FSidebarGroup(
        label: const Text('Overview'),
        children: [
          FSidebarItem(
            icon: const Icon(FIcons.school),
            label: const Text('Getting Started'),
            initiallyExpanded: true,
            onPress: () {},
            children: [
              FSidebarItem(label: const Text('Installation'), selected: true, onPress: () {}),
              FSidebarItem(label: const Text('Themes'), onPress: () {}),
              FSidebarItem(label: const Text('Typography'), onPress: () {}),
            ],
          ),
          FSidebarItem(icon: const Icon(FIcons.code), label: const Text('API Reference'), onPress: () {}),
          FSidebarItem(icon: const Icon(FIcons.box), label: const Text('Pub Dev'), onPress: () {}),
        ],
      ),
      FSidebarGroup(
        action: const Icon(FIcons.plus),
        onActionPress: () {},
        label: const Text('Widgets'),
        children: [
          FSidebarItem(icon: const Icon(FIcons.circleSlash), label: const Text('Divider'), onPress: () {}),
          FSidebarItem(icon: const Icon(FIcons.scaling), label: const Text('Resizable'), onPress: () {}),
          FSidebarItem(icon: const Icon(FIcons.layoutDashboard), label: const Text('Scaffold'), onPress: () {}),
        ],
      ),
    ],
  ),
);
 
@override
Widget build(BuildContext context) => Center(
  child: FButton(
    child: const Text('Open Sidebar'),
    onPress: () => showFSheet(context: context, side: FLayout.ltr, builder: _sidebar),
  ),
);

Sidebar

Preview

Code

CLI

Anatomy

`FSidebar`

`FSidebarGroup`

`FSidebarItem`

Usage

`FSidebar(...)`

`FSidebar.builder(...)`

`FSidebar.raw(...)`

`FSidebarGroup(...)`

`FSidebarItem(...)`

Examples

Sheet Sidebar

Preview

Code

Custom Width

Preview

Code

Nested `FSidebarItem`

Preview

Code

Sidebar

Preview

Code

CLI

Anatomy

FSidebar

FSidebarGroup

FSidebarItem

Usage

FSidebar(...)

FSidebar.builder(...)

FSidebar.raw(...)

FSidebarGroup(...)

FSidebarItem(...)

Examples

Sheet Sidebar

Preview

Code

Custom Width

Preview

Code

Nested FSidebarItem

Preview

Code

`FSidebar`

`FSidebarGroup`

`FSidebarItem`

`FSidebar(...)`

`FSidebar.builder(...)`

`FSidebar.raw(...)`

`FSidebarGroup(...)`

`FSidebarItem(...)`

Nested `FSidebarItem`