Components
FxTabScaffold
A high-level app shell with parallel navigation stacks.
FxTabScaffold
FxTabScaffold manages complex tab-based applications where each tab needs its own navigation history (parallel routing).
Usage
final currentTab = flux(0);
FxTabScaffold(
currentIndex: currentTab,
tabs: [
FxTabItem(
label: "Home",
icon: Icons.home,
initialRoute: "/",
routes: homeRoutes,
),
FxTabItem(
label: "Search",
icon: Icons.search,
initialRoute: "/discover",
routes: searchRoutes,
),
],
)Features
Parallel Navigation
Unlike standard tabs, FxTabScaffold maintains independent navigation stacks.
- When you navigate 3 pages deep in "Search", then switch to "Home", and back to "Search", you will be exactly where you left off.
Fluxy.to()automatically targets the current tab's navigator.
Scoped Navigation
Use the scope parameter to force navigation within a specific tab from anywhere in the app.
Fluxy.to("/some-path", scope: "Home")API Reference
| Name | Type | Default | Description |
|---|---|---|---|
currentIndex | Signal<int> | required | The active tab index. |
tabs | List<FxTabItem> | required | List of tabs with their routes. |
bottomBarBuilder | Widget Function(int, List<FxTabItem>, ValueChanged<int>)? | null | Custom bottom bar builder. |
The Master Tab Implementation
A professional industrial dashboard shell with primary navigation nodes and managed routing.
class IndustrialAppShell extends StatelessWidget {
@override
Widget build(BuildContext context) {
final activeIndex = flux(0);
return Fx.tabScaffold(
currentIndex: activeIndex,
tabs: [
// Tab 1: Operational Monitoring
FxTabItem(
label: "Dashboard",
icon: Icons.dashboard_customize_rounded,
initialRoute: "/dashboard",
routes: [
FxRoute(path: "/dashboard", builder: (ctx) => DashboardMainView()),
FxRoute(path: "/alerts", builder: (ctx) => ActiveAlertsView()),
],
),
// Tab 2: Resource Inventory
FxTabItem(
label: "Inventory",
icon: Icons.inventory_2_outlined,
initialRoute: "/resources",
routes: [
FxRoute(path: "/resources", builder: (ctx) => ResourceListView()),
FxRoute(path: "/detail/:id", builder: (ctx) => ResourceDetailView()),
],
),
// Tab 3: System Analytics
FxTabItem(
label: "Metrics",
icon: Icons.bar_chart_rounded,
initialRoute: "/observability",
routes: [
FxRoute(path: "/observability", builder: (ctx) => XRayView()),
],
),
],
// Custom styling for the primary shell
bottomBarBuilder: (idx, items, onTap) => Fx.bottomBar(
selectedIndex: flux(idx),
onTap: onTap,
items: items.map((t) => FxBottomBarItem(icon: t.icon, label: t.label)).toList(),
),
);
}
}Fluxy's tab-scaffold system uses optimized IndexedStack management with recursive state preservation, ensuring that heavy views are kept in memory without causing layout stutter during transitions.