Skip to content

andreamainella98/side_bar_custom

Repository files navigation

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

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,
        ),
    ],
),

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.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published