Short into: A collapsible sidebar for Flutter apps implementing the Material Design.

collapsible_sidebar

---

A collapsible sidebar for Flutter apps implementing the Material Design.

Features

• Material Design
• Pre-built customizable tile widgets (CollapsibleItems)
• Smooth Animation

Supported platforms

• Flutter Android
• Flutter iOS
• Flutter web
• Flutter desktop

???? Version 1.0.7+2 ✨ 

• Added ability to handle lists of icons
• Added ability to apply bottom and top padding to List of icons
• Added ability to choose direction of icon tiles (top/bottom) using fitItemsToBottom property.
• Added ability to give custom name to toggle button
• Added ability to give custom Style to sidebar title using titleStyle property.
• Added ability to give custom Style to collapsible items text using textStyle property.
• Added ability to give custom Style to toggle button title using toggleTitleStyle property.

Live preview

https://ryuukenshi.github.io/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: ^1.0.5 to your pubspec.yaml dependencies. And import it:

import 'package:collapsible_sidebar/collapsible_sidebar.dart';

How to use

Simply create a CollapsibleSidebar widget and a list of CollapsibleItems suppose _items. Finally add the required parameters to CollapsibleSidebar and a body widget suppose _body which will occupy the remaining screen:

CollapsibleSidebar(
  items: _items,
  avatarImg: _avatarImg,
  title: 'John Smith',
  body: _body,
)

Parameters

CollapsibleSidebar(
    items: _items,
    title: 'Lorem Ipsum',
    avatarImg: NetworkImage('https://www.w3schools.com/howto/img_avatar.png'),
    body: _body,
    height: double.infinity,
    minWidth: 80,
    maxWidth: 270,
    borderRadius: 15,
    iconSize: 40,
    textSize: 20,
    toggleButtonIcon: Icons.chevron_right,
    backgroundColor: Color(0xff2B3138),
    selectedIconBox: Color(0xff2F4047),
    selectedIconColor: Color(0xff4AC6EA),
    selectedTextColor: Color(0xffF3F7F7),
    unselectedIconColor: Color(0xff6A7886),
    unselectedTextColor: Color(0xffC0C7D0),
    duration: Duration(milliseconds: 500),
    curve: Curves.fastLinearToSlowEaseIn,
    screenPadding: 4,
    showCollapseButton: true,
)

Download collapsible sidebar plugin source code on GitHub

https://github.com/RyuuKenshi/flutter_collapsible_sidebar

Check out the collapsible sidebar plugin implementation details on Pub

https://pub.dev/packages/collapsible_sidebar