A collapsible sidebar for Flutter apps implementing the Material Design.
- Material Design
- Pre-built customizable tile widgets (CollapsibleItems)
- Smooth Animation
- Supports both LTR & RTL languages
- Flutter Android
- Flutter iOS
- Flutter web
- Flutter desktop
A big thank you to all the contributors without whom this project would be impossible to maintain and enhance. 👏👏👏
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.
Add collapsible_sidebar: ^2.0.3+2
to your pubspec.yaml
dependencies. And import it:
import 'package:collapsible_sidebar/collapsible_sidebar.dart';
- Create a list of
CollapsibleItems
named_items
(or whatever fancy name you like)
List<CollapsibleItem> get _items {
return [
CollapsibleItem(
text: 'Dashboard',
icon: Icons.assessment,
onPressed: () => setState(() => _headline = 'DashBoard'),
isSelected: true,
),
CollapsibleItem(
text: 'Ice-Cream',
icon: Icons.icecream,
onPressed: () => setState(() => _headline = 'Errors'),
),
CollapsibleItem(
text: 'Search',
icon: Icons.search,
onPressed: () => setState(() => _headline = 'Search'),
),
];
}
- 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: .........,
);
}
- Finally completely define the
CollapsibleSidebar
widget by adding the list ofCollapsibleItems
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),
)
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),
)
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 |
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 |
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 |
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 |
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" |
Apache 2.0