Components
FxSidebar
Industrial-grade sidebar navigation component.
FxSidebar
FxSidebar is a high-level layout component designed for professional navigation. It provides a vertical navigation shell with integrated support for headers, themed items, active states, and footer actions.
Basic Usage
FxSidebar(
currentIndex: _index.value,
onTap: (i) => _index.value = i,
header: Fx.text("Admin Panel").bold().p(24),
items: const [
FxSidebarItem(icon: Icons.dashboard, label: "Dashboard"),
FxSidebarItem(icon: Icons.analytics, label: "Analytics"),
FxSidebarItem(icon: Icons.settings, label: "Settings"),
],
footer: Fx.text("v2.0.0").muted().p(16),
)Key Features
1. Unified Structure
The sidebar is divided into three distinct sections: header, items (which are automatically scrollable), and a footer.
2. Standalone Flexibility
Unlike previous versions, FxSidebar is now a standalone widget. You can use it inside a Flutter Drawer, a Row, or any custom layout without needing a specialized parent.
3. Integrated Theming
Automatically listens to FxTheme.isDarkMode to calculate optimal contrast for icons and text.
API Reference
| Name | Type | Default | Description |
|---|---|---|---|
items | List<FxSidebarItem> | required | The main navigation links. |
currentIndex | int? | null | The active item index. |
onTap | ValueChanged<int>? | null | Tab selection callback. |
header | Widget? | null | Optional top section (logo/branding). |
footer | Widget? | null | Optional bottom section (user/version). |
width | double | 280 | The fixed horizontal width. |
activeColor | Color? | Fx.primary | Color for the active item. |
backgroundColor | Color? | dynamic | Background color (reacts to theme if null). |
The Master Sidebar Implementation
A reactive sidebar with custom headers and premium enterprise styling.
class DesktopNavigation extends StatelessWidget {
@override
Widget build(BuildContext context) {
return FxSidebar(
width: 300,
header: Fx.col(
children: [
Fx.icon(Icons.bubble_chart_rounded, size: 32, color: Fx.primary),
Fx.gap(10),
Fx.text("Enterprise Console").font.sm().bold(),
],
).p(32),
currentIndex: appCurrentIndex.value,
onTap: (i) => appCurrentIndex.value = i,
items: [
const FxSidebarItem(icon: Icons.grid_view_rounded, label: "Overview"),
FxSidebarItem(
icon: Icons.layers_outlined,
label: "Modular Packages",
trailing: Fx.badge(label: "New"),
),
const FxSidebarItem(icon: Icons.shield_outlined, label: "Security Vault"),
],
footer: Fx.row(
children: [
const FxAvatar(fallback: "JS"),
Fx.text("admin@fluxy.dev").ml(10).font.xs(),
const Spacer(),
const Icon(Icons.logout, size: 16),
],
).p(24),
);
}
}
## Haptic Feedback (Optional)
Fluxy components are modular and do not include mandatory haptic feedback. If you have the `fluxy_haptics` plugin installed, you can easily add tactile response to the `onTap` callback:
```dart
onTap: (index) {
Fx.haptic?.light(); // Optional tactile pulse
_currentIndex.value = index;
}