GitLocker: The Coding Marketplace

Description:

collapsible sidebar

collapsible_sidebar #

A collapsible sidebar for Flutter apps implementing the Material Design.

🌟 Version 2.0.7 ✨ #

Features #

Material Design
Pre-built customizable tile widgets (CollapsibleItems)
Smooth Animation
Supports both LTR & RTL languages
Supports MULTI-LEVEL Menu
Alert Badges on CollapsibleItems

Supported platforms #

Flutter Android
Flutter iOS
Flutter web
Flutter desktop

Contributors #
A big thank you to all the contributors without whom this project would be impossible to maintain and enhance. 👏👏👏 #

Live preview #
https://drunkonbytes.github.io/flutter_collapsible_sidebar
Note: this page is built with flutter-web. For a better user experience, please use a mobile device to open this link.
Installation #
Add collapsible_sidebar: ^2.0.7 to your pubspec.yaml dependencies. And import it:
import 'package:collapsible_sidebar/collapsible_sidebar.dart';
copied to clipboard
How to use #

Create a list of CollapsibleItems named _items (or whatever fancy name you like)

For a collapsible item with sub-items to be the default selected item MARK ALL OF ITS SUB-ITEMS WITH THE isSelected: true property. #
List<CollapsibleItem> get _items {
return [
CollapsibleItem(
text: 'Shop',
iconImage: AssetImage("assets/shop_icon.png"), //`iconImage` has priority over `icon` property
icon: Icons.ac_unit,
onPressed: () => setState(() => _headline = 'Shop'),
onHold: () => ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: const Text("Shop"))
),
isSelected: true,
subItems: [
CollapsibleItem(
text: 'Cart',
icon: Icons.shopping_cart,
onPressed: () => setState(() => _headline = 'Cart'),
onHold: () => ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: const Text("Cart"))
),
isSelected: true,
)
]
),
CollapsibleItem(
text: 'Dashboard',
badgeCount: 7,
icon: Icons.assessment,
onPressed: () => setState(() => _headline = 'DashBoard'),
onHold: () => ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: const Text("DashBoard"))
),
),
CollapsibleItem(
text: 'Ice-Cream',
icon: Icons.icecream,
onPressed: () => setState(() => _headline = 'Ice-Cream'),
onHold: () => ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: const Text("Ice-Cream"))
),
),
CollapsibleItem(
text: 'Search',
icon: Icons.search,
onPressed: () => setState(() => _headline = 'Search'),
onHold: () => ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: const Text("Search"))
),
),
];
}
copied to clipboard

Define the body of the app (the widget where the main working of the app will be) and name it say _body.

Widget _body(Size size, BuildContext context) {
return Container(
height: double.infinity,
width: double.infinity,
color: Colors.blueGrey[50],
child: .........,
);
}
copied to clipboard

Finally completely define the CollapsibleSidebar widget by adding the list of CollapsibleItems named _items, the body of the app named _body and the customizable parameters as needed:

CollapsibleSidebar(
items: _items,
avatarImg: _avatarImg,
title: 'John Smith',
body: _body(size, context),
)
copied to clipboard
Also you can use the isCollapsed condition depending how you want the state of the sidebar to change (collapsed/expanded)
for example [size.width]
CollapsibleSidebar(
isCollapsed: MediaQuery.of(context).size.width <= 800,
items: _items,
avatarImg: _avatarImg,
title: 'John Smith',
body: _body(size, context),
)
copied to clipboard
Parameters (customizable attributes) #

Name
Data Type
Default Value
Description

isCollapsed
bool
true
can set condition to control state of sidebar (collapsed/expanded) on some property change

collapseOnBodyTap
bool
true
flag to enable/disable tapping on the body of the app (area other than the sidebar) to collapse the sidebar

items
List<CollapsibleItems>
---
List of CollapsibleItems

showTitle
bool
true
can set to false to hide title and avatar Image

title
String
---
Title of the Collapsible Sidebar

titleBack
bool
false
set to 'true' to use a back icon instead of avatar picture

titleBackIcon
Icons
Icons.arrow_back
the back icon is 'arrow_back' by default (customizable)

onTitleTap
Function
---
custom callback function called when title avatar or back icon is pressed

onHoverPointer
SystemMouseCursors
SystemMouseCursors.click
the default hover mouse pointer is set to 'click' type by default (customizable)

textStyle
TextStyle
---
custom style for sidebar title

titleStyle
TextStyle
---
custom style for collapsible items text

toggleTitleStyle
TextStyle
---
custom style for toggle button title

avatarImg
Image
---
Image to be displayed

body
Widget
---
The main body of the app (the underlying main widget other than the sidebar)

height
double
double.infinity
height of the Sidebar

minWidth
double
80
Width of Sidebar when Collapsed

maxWidth
double
270
Width of Sidebar when Expanded

borderRadius
double
15
Radius of the borders

iconSize
double
40
Size of the icons

customContentPaddingLeft
double
-1
Padding to the left of CollapsibleItems (keep value less than 0 for default padding)

toggleTitle
String
'Collapse'
title text of Toggle Button

toggleButtonIcon
Icons
Icons.chevron_right
Icon of the Toggle button

backgroundColor
Color
Color(0xff2B3138)
The background color

avatarBackgroundColor
Color
Color(0xff6A7886)
The avatar background color

selectedIconBox
Color
Color(0xff2F4047)
Color of Icon Box when selected

selectedIconColor
Color
Color(0xff4AC6EA)
Color of Icon when selected

selectedTextColor
Color
Color(0xffF3F7F7)
Color of text when selected

unselectedIconColor
Color
Color(0xff6A7886)
Color of Icon when not selected

unselectedTextColor
Color
Color(0xffC0C7D0)
Color of text when not selected

badgeBackgroundColor
Color
Color(0xffFF6767)
Background color of badges on Collapsible Items

badgeTextColor
Color
Color(0xffF3F7F7)
Badge Text color of badges on Collapsible Items

duration
Duration
Duration(milliseconds: 500)
Animation duration for collapsed->expanded & vice-versa

curve
Curves
Curves.fastLinearToSlowEaseIn
Animation curve for collapsed->expanded & vice-versa

screenPadding
double
4
Padding to the screen

topPadding
double
0
space between image avatar and icons

bottomPadding
double
0
space between icons and toggle button

itemPadding
double
10
space between collapsible items

customItemOffsetX
double
-1
X axis offset for collapsible items (keep value less than 0 for default offset)

fitItemsToBottom
bool
true
fit all icons to the end of the space between image avatar and toggle button

showToggleButton
bool
true
flag to enable/disable showing the toggle button

sidebarBoxShadow
List<BoxShadow>
[BoxShadow(color: Colors.blue, blurRadius: 10, spreadRadius: 0.01, offset: Offset(3, 3),),]
Just like the "BoxDecoration" parameter of a "Container"

License #

Apache 2.0