Adaptive Sidebar Scaffold

Image

A modern, responsive sidebar navigation component for Flutter applications that automatically adapts its size based on screen dimensions and device type. Perfect for creating consistent navigation experiences across desktop, tablet, and mobile interfaces.

Features

  • 🎯 Responsive Design: Automatically adapts between sidebar and bottom navigation
  • 📱 Internal Page Management: Built-in PageView system for seamless navigation
  • 🔗 Selective Bottom Navigation: Choose which destinations appear in bottom nav
  • 🎮 External Control: Controller API for custom navigation widgets
  • 📌 Pinned Destination: Special destination that stay at the top
  • 🦶 Footer Destinations: Destinations that appear at the bottom

Basic Usage

AdaptiveSidebar(
    icon: Icon(Icons.home_rounded),
    title: "Example",
    destinations: [
        SidebarDestination(
            key: ValueKey("home"),
            icon: Icons.home_rounded,
            label: "Home",
            pageContent: HomePage(),
            shownInBottomNav: true,  // Show in bottom navigation
            bottomNavOrder: 0,       // Order in bottom nav (0 = first)
        ),
        SidebarDestination(
            key: ValueKey("library"),
            icon: Icons.library_music,
            label: "Library",
            pageContent: LibraryPage(),
            shownInBottomNav: true,
            bottomNavOrder: 1,
        ),
        SidebarDestination(
            key: ValueKey("settings"),
            icon: Icons.settings,
            label: "Settings",
            pageContent: SettingsPage(),
            shownInBottomNav: false, // Don't show in bottom nav
        ),
    ],
);

Advanced Usage with Controller

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final AdaptiveSidebarController _controller = AdaptiveSidebarController();
  int _bottomNavIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AdaptiveSidebar(
        controller: _controller,
        pinnedDestination: SidebarDestination(
          key: ValueKey("featured"),
          icon: Icons.star,
          label: "Featured",
          pageContent: FeaturedPage(),
          shownInBottomNav: true,
          bottomNavOrder: 0,
        ),
        destinations: [
          SidebarDestination(
            key: ValueKey("home"),
            icon: Icons.home,
            label: "Home",
            pageContent: HomePage(),
            shownInBottomNav: true,
            bottomNavOrder: 1,
          ),
          SidebarDestination(
            key: ValueKey("library"),
            icon: Icons.library_music,
            label: "Library",
            pageContent: LibraryPage(),
            shownInBottomNav: true,
            bottomNavOrder: 2,
          ),
        ],
        onDestinationChanged: (bottomNavIndex, destination) {
          setState(() {
            _bottomNavIndex = bottomNavIndex ?? 0;
          });
          // Use destination.key to identify which destination was selected
          if (destination.key.value == "featured") {
            // Handle featured selection
          } else if (destination.key.value == "home") {
            // Handle home selection
          }
        },
        useInternalPageView: true,
      ),
      // Custom bottom navigation bar
      bottomNavigationBar: CupertinoTabBar(
        currentIndex: _bottomNavIndex,
        onTap: (index) {
          _controller.navigateToBottomNavIndex(index);
        },
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.star), label: "Featured"),
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
          BottomNavigationBarItem(icon: Icon(Icons.library_music), label: "Library"),
        ],
      ),
    );
  }
}

SidebarDestination Properties

SidebarDestination(
  label: "Home",                    // Required: Display label
  pageContent: HomePage(),          // Required: Page content widget
  icon: Icons.home,                 // Optional: Icon for the destination
  iconBuilder: (context, color) => Icon(...), // Optional: Custom icon builder
  trailingIconButton: DestinationTrailingIconButton(...), // Optional: Trailing button
  shownInBottomNav: true,           // Optional: Show in bottom navigation
  bottomNavOrder: 0,                // Optional: Order in bottom nav (required if shownInBottomNav is true)
  key: ValueKey("home"),            // Required: Unique key for identifying this destination
)

Controller API

final AdaptiveSidebarController controller = AdaptiveSidebarController();

// Navigate by bottom navigation index
controller.navigateToBottomNavIndex(0);

// Navigate by destination key (recommended)
controller.navigateToSidebar(const ValueKey("home"));

Using Keys for Destination Identification

The key property allows you to easily identify which destination was selected in the onDestinationChanged callback:

AdaptiveSidebar(
  destinations: [
    SidebarDestination(
      key: ValueKey("home"),
      label: "Home",
      pageContent: HomePage(),
      // ... other properties
    ),
    SidebarDestination(
      key: ValueKey("settings"),
      label: "Settings", 
      pageContent: SettingsPage(),
      // ... other properties
    ),
  ],
  onDestinationChanged: (bottomNavIndex, destination) {
    // Use destination.key to identify which destination was selected
    switch (destination.key.value) {
      case "home":
        // Handle home selection
        break;
      case "settings":
        // Handle settings selection
        break;
      default:
        // Handle other destinations
        break;
    }
  },
)

Who's using it?

Libraries

adaptive_sidebar