adaptive_sidebar 1.1.0
adaptive_sidebar: ^1.1.0 copied to clipboard
Sleak sidebar for responsive Flutter apps with automatic size change.
import 'package:adaptive_sidebar/adaptive_sidebar.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'adaptive_sidebar Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
bottomAppBarTheme: const BottomAppBarThemeData(
color: Colors.white,
),
useMaterial3: true,
),
debugShowCheckedModeBanner: false,
home: const TabsView(),
);
}
}
class TabsView extends StatefulWidget {
const TabsView({super.key});
@override
State<TabsView> createState() => _TabsViewState();
}
class _TabsViewState extends State<TabsView> {
int _bottomNavIndex = 1; // Start with Home (index 1 in bottom nav)
final AdaptiveSidebarController _sidebarController =
AdaptiveSidebarController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: AdaptiveSidebar(
controller: _sidebarController,
icon: const Icon(
Icons.home_rounded,
size: 33,
),
title: "Example",
pinnedDestination: SidebarDestination(
key: const ValueKey("featured"),
icon: Icons.star_rounded,
label: "Featured",
shownInBottomNav: true,
bottomNavOrder: 0, // Show first in bottom nav
pageContent: const FeaturedView(),
),
destinations: [
SidebarDestination(
key: const ValueKey("home"),
icon: Icons.home_rounded,
label: "Home",
shownInBottomNav: true,
bottomNavOrder: 1,
pageContent: const HomeView(),
),
SidebarDestination(
key: const ValueKey("library"),
icon: Icons.music_note_rounded,
label: "Library",
shownInBottomNav: true,
bottomNavOrder: 2,
pageContent: const LibraryView(),
trailingIconButton: DestinationTrailingIconButton(
icon: const Icon(
Icons.download,
),
onPressed: () {},
),
),
SidebarDestination(
key: const ValueKey("settings"),
icon: Icons.settings_rounded,
label: "Settings",
shownInBottomNav: false, // Won't appear in bottom nav
pageContent: const SettingsView(),
),
],
initialIndex: 1, // Start with Home (which is in bottom nav)
onDestinationChanged: (bottomNavIndex, destination) {
if (bottomNavIndex != null) {
setState(() {
_bottomNavIndex = bottomNavIndex;
});
}
// You can now use the destination.key to identify which destination changed
// Example: if (destination.key.value == "home") { /* handle home selection */ }
},
onBottomNavTap: (bottomNavIndex) {
// This is called when bottom nav item is tapped
// The AdaptiveSidebar will automatically handle navigation
},
bottomNavigationBar: BottomNavigationBar(
currentIndex: _bottomNavIndex,
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.star_rounded),
label: "Featured",
),
BottomNavigationBarItem(
icon: Icon(Icons.home_rounded),
label: "Home",
),
BottomNavigationBarItem(
icon: Icon(Icons.music_note_rounded),
label: "Library",
),
],
),
// For custom navigation, you can use:
// _sidebarController.navigateToSidebar(const ValueKey("home"));
// _sidebarController.navigateToBottomNavIndex(index);
macOSTopPadding: false,
),
);
}
}
class FeaturedView extends StatefulWidget {
const FeaturedView({super.key});
@override
State<FeaturedView> createState() => _FeaturedViewState();
}
class _FeaturedViewState extends State<FeaturedView> {
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: Text(
'Featured Tab (Pinned Destination)',
),
),
);
}
}
class HomeView extends StatefulWidget {
const HomeView({super.key});
@override
State<HomeView> createState() => _HomeViewState();
}
class _HomeViewState extends State<HomeView> {
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: Text(
'Home Tab',
),
),
);
}
}
class LibraryView extends StatefulWidget {
const LibraryView({super.key});
@override
State<LibraryView> createState() => _LibraryViewState();
}
class _LibraryViewState extends State<LibraryView> {
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: Text(
'Library Tab',
),
),
);
}
}
class SettingsView extends StatefulWidget {
const SettingsView({super.key});
@override
State<SettingsView> createState() => _SettingsViewState();
}
class _SettingsViewState extends State<SettingsView> {
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: Text(
'Settings Tab',
),
),
);
}
}