adaptive_sidebar 1.1.0 copy "adaptive_sidebar: ^1.1.0" to clipboard
adaptive_sidebar: ^1.1.0 copied to clipboard

Sleak sidebar for responsive Flutter apps with automatic size change.

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? #

6
likes
160
points
559
downloads

Publisher

verified publisherae1.dev

Weekly Downloads

Sleak sidebar for responsive Flutter apps with automatic size change.

Repository (GitHub)
View/report issues

Topics

#ui #navigation #layout #scaffold

Documentation

API reference

License

BSD-3-Clause (license)

Dependencies

cupertino_icons, flutter, universal_io

More

Packages that depend on adaptive_sidebar