Description:

simple sidebar

Simple and quick to set up sidebar. Soft animations

Features #

Getting started #
Just add the package to pubspec.yaml and start using it.
Usage #
Create Theme & Controller and List of the Item you want to have in the Sidebar
final SimpleSidebarTheme theme = SimpleSidebarTheme()
..expandedShape = const BorderRadius.all(Radius.circular(8))
..collapsedShape = const BorderRadius.all(Radius.circular(8));
final List<SimpleSidebarItem> sidebarItems = [
SimpleSidebarItem(onTap: () {}, title: "Home", leading: Icons.home_outlined),
SimpleSidebarItem(onTap: () {}, title: "Gallery", leading: Icons.image_outlined),
SimpleSidebarItem(onTap: () {}, title: "Users", leading: Icons.group_outlined),
SimpleSidebarItem(onTap: () {}, title: "Extra long name for a menu item", leading: Icons.list),
];
final List<SimpleSidebarItem> footerItems = [
SimpleSidebarItem(onTap: () {}, title: "Settings", leading: Icons.settings),
SimpleSidebarItem(onTap: () {}, title: "Logout", leading: Icons.close),
];
copied to clipboard
After this create the Scaffold with the lists
Scaffold(
backgroundColor: kcBackground,
body: Row(
children: [
SimpleSidebar(
theme: widget.theme,
initialExpanded: true,
initialIndex: 1,
childrens: widget.sidebarItems,
footerItems: widget.footerItems,
onTap: (value) {
setState(() {
selected = value;
});
log("selected value $value");
},
),
Expanded(
child: AnimatedOpacity(
opacity: isVisible ? 1 : 0,
duration: const Duration(milliseconds: 300),
child: Container(
margin: const EdgeInsets.all(8),
child: const <Widget>[
Text("hallo"),
Text("hallo2"),
Text("hallo3"),
Text("hallo4"),
Text("hallo5"),
Text("hallo6"),
][selected]),
),
),
],
),
);
copied to clipboard
Additional information #
Should there be any questions, wishes mail me: Contact
create an issue on GitHub for bugs.
And now have fun with the sidebar

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter