A collapsible sidebar for Flutter apps implementing 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

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