side_bar_custom

Description:

side bar custom

DESCRIPTION #
This package allows you to have a new simple and fast "SideBar" component, with many possibilities to customize it.
HOW TO INSTALL #
dependencies:
flutter:
sdk: flutter
side_bar_custom: ^1.0.3
copied to clipboard
HOW TO USE #
SideBar(
children: [
Center(
child: Text("Dashboard"),
),
Center(
child: Text("Add User"),
),
],
items: [
SideBarItem(
text: "Dashboard",
icon: Icons.home,
tooltipText: "Dashboard page",
),
SideBarItem(
text: "Add User",
icon: Icons.add,
),
],
),
copied to clipboard
SCREENSHOT #

UTILS #
SideBarConfig #



Props
Description
Required
Default Value




backgroundColor
This color is used to change the background color of the SideBar.
✅
Color(0xff303F9F)


bottomIconColor
This color is used to change the color of bottom icon of the SideBar.
✅
Color(0xff448AFF)


dividerColor
This color is used to change the color of divider of SideBar.
✅
Color(0xff448AFF)


selectedBoxColor
This color is used to change the background of the single selected item.
✅
Color(0xff3F51B5)


selectedIconColor
This color is used to change the color of icon of the single selected item.
✅
Color(0xffC5CAE9)


unselectedBoxColor
This color is used to change the background of the single unselected item.
✅
Color(0xff303F9F)


unselectedIconColor
This color is used to change the color of icon of the single selected item.
✅
Color(0xff448AFF)


enableDivider
This value is used to enable the SideBar divider.
✅
true


enableFloating
This value is used to enable the SideBar to become floating.
✅
false


enablePageView
This value is used to enable the animation to the children of SideBar.
✅
true


enableResizeBody
This value is used to enable the resize of the SideBar body, if set to false the children in the body will have a fixed size.
✅
true


collapseWidth
This value determines the width of the SideBar when it is collapsed.
✅
60.0


dividerIndent
This value is used to determine the spacing of the divider in the left and right edges.
✅
10.0


dividerThickness
This value is used to determine the thickness of the Divider inside the SideBar.
✅
0.6


fontSize
This optional value is used to set the size of the SideBarItem font.
❌



iconSize
This optional value is used to set the size of the SideBarItem icon.
❌



maxWidth
This value determines the width of the SideBar when it is not collapsed.
✅
260.0


tooltipDecoration
This value is used to set a style for Tooltips when they are enabled.
❌



tooltipTextStyle
This value is used to set a style for Text inside Tooltips when they are enabled.
❌



selectedTextStyle
This value is used to set a style for Text inside SideBarItem when it is selected.
✅
TextStyle(color: Color(0xffC5CAE9))


unselectedTextStyle
This value is used to set a style for Text inside SideBarItem when it is unselected.
✅
TextStyle(color: Color(0xff448AFF))


borderRadius
This value is used when [enableFloating] is set to true and is used to set a radius at the edges of the SideBar.
✅
BorderRadius.all(Radius.circular(6))


sideBarCurve
This value is used to indicate an animation curve for all SideBar animations.
✅
Curves.ease


sideBarAnimationDuration
This value is used to indicate a duration for all SideBar animations.
✅
Duration(milliseconds: 300)


floatingPadding
This value is used to determine the space surrounding the SideBar and is usable when [enableFloating] is set to true.
✅
EdgeInsets.all(8)



SideBarItem #



Props
Description
Required




text
This value used for set text of SideBarItem.
✅


tooltipText
This value used for set tooltip text of SideBarItem, if setted the tooltip show up.
❌


icon
This value used for set icon of SideBarItem.
✅



NEXT FEATURE #
Write me in the GitHub issues the new features you need and, if they are approved of course, I will implement them as soon as I can.

License

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

Share

• Share on Facebook
• Share on Twitter