Sidebar Nav
Slide-out sidebar drawer with workspace switcher, conversation list, search, settings sheet, and sub-pages.
Installation
$
flai add sidebar_nav
Widgets
The sidebar nav flow includes these widgets:
| Widget | Description |
|---|---|
| FlaiSidebarDrawer | Main slide-out drawer containing the workspace switcher, conversation list, and settings entry point. |
| FlaiTopNavBar | Top navigation bar with hamburger menu button, new chat button, and current model display. |
| ChatListItem | Conversation list item with swipe-to-delete, long-press context menu, and inline rename support. |
| WorkspaceSwitcher | Dropdown to switch between workspaces or team accounts. |
| SettingsDrawer | Settings sheet with configurable rows and navigation to sub-pages. |
Settings System
SettingsConfig defines the settings rows using a sealed SettingsRow class with these types:
| Row Type | Description |
|---|---|
| NavigationRow | Tap to navigate to a sub-page. Shows a chevron indicator. |
| DropdownRow | Inline dropdown with string options (e.g., theme selection, language). |
| ToggleRow | Switch toggle for boolean settings (e.g., notifications, dark mode). |
| InfoRow | Display-only row showing a label and value (e.g., version number, account email). |
| CustomRow | Builder callback for fully custom row content. |
The flow includes 6 pre-built sub-pages: Profile, Billing, Usage, Connectors, Notifications, and Privacy.
Configuration
SidebarConfig controls the sidebar content and behavior:
| Property | Type | Default | Description |
|---|---|---|---|
| navItems | List<NavItem> | [] | Navigation items displayed in the sidebar (e.g., Explore, Library). |
| userProfile | UserProfile | required | Current user's profile information (name, email, avatar). |
| conversations | List<Conversation> | [] | Conversation history displayed in the list. |
| onNewChat | VoidCallback? | null | Called when the new chat button is tapped. |
| onConversationTap | Function(Conversation)? | null | Called when a conversation in the list is tapped. |
Usage
FlaiSidebarDrawer(
config: SidebarConfig(
userProfile: UserProfile(
name: 'Jane Doe',
email: '[email protected]',
),
conversations: conversations,
onNewChat: () => controller.createConversation(),
),
)