curved_sidebar_navigation 0.1.0

A configurable Flutter sidebar with an animated curved cutout for the selected navigation item.

curved_sidebar_navigation

A reusable Flutter sidebar with an animated curved opening around the selected destination.

Preview

The same navigation adapts from a permanent web sidebar to a mobile drawer.

Web

Android and iOS

Android drawer	iOS drawer

Android interaction	iOS interaction

Features

• Generic destination values.
• Animated selection curve.
• Hover, focus, pressed and selected states.
• Custom header and footer widgets.
• Configurable dimensions, colors, spacing and animation.
• Material 3 and light/dark theme support.
• Keyboard and screen-reader semantics.
• Drawer mode with automatic close after selection on Android and iOS.

Usage

CurvedSidebarNavigation<int>(
  selectedValue: selected,
  onSelected: (value) => setState(() => selected = value),
  header: const Text('MY APP'),
  items: const [
    CurvedSidebarItem(
      value: 0,
      label: 'Profile',
      icon: Icons.person_outline,
    ),
    CurvedSidebarItem(
      value: 1,
      label: 'Projects',
      icon: Icons.work_outline,
    ),
  ],
)

Android and iOS drawer

Place the navigation inside Scaffold.drawer and enable closeOnSelected. Selecting a destination updates the state and closes the drawer automatically.

Scaffold(
  drawerScrimColor: Colors.transparent,
  appBar: AppBar(title: const Text('My app')),
  drawer: Drawer(
    width: 252,
    elevation: 0,
    shadowColor: Colors.transparent,
    surfaceTintColor: Colors.transparent,
    backgroundColor: Theme.of(context).scaffoldBackgroundColor,
    shape: const RoundedRectangleBorder(),
    child: CurvedSidebarNavigation<int>(
      selectedValue: selected,
      closeOnSelected: true,
      panelWidth: 252,
      totalWidth: 252,
      onSelected: (value) => setState(() => selected = value),
      items: const [
        CurvedSidebarItem(
          value: 0,
          label: 'Profile',
          icon: Icons.person_outline,
        ),
        CurvedSidebarItem(
          value: 1,
          label: 'Projects',
          icon: Icons.work_outline,
        ),
      ],
    ),
  ),
  body: const SizedBox.expand(),
)

Local development

dependencies:
  curved_sidebar_navigation:
    path: packages/curved_sidebar_navigation

Created by Giancarlos Sandoval.