A collapsible sidebar for Flutter apps implementing the Material Design.

Arjun Sinha

Last update: Nov 30, 2022

Overview

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 2.0.1+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.
Added support for Null-Safety. (By ⭐ José Luis ⭐ )
Added Mouse Region Detection on Web and ability to change Cursor type. (By ⭐ TheLonelyNull ⭐ )
Title Avatar picture can be replaced with custom back icon. (By ⭐ TheLonelyNull ⭐ )
Title Avatar clickable with custom callback function. (By ⭐ TheLonelyNull ⭐ )
Added ability to set Sidebar Collapsed or Expanded initially by changing the isCollapsed parameter.
Added ability to set custom BoxShadows to the sidebar using the sidebarBoxShadow parameter.

Live preview

https://ryuukenshi.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.

Installation

Add collapsible_sidebar: ^2.0.1+2 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(
    isCollapsed: true, //true by default, set to 'false' to have the full sidebar open on initially loading the app
    items: _items,
    title: 'Lorem Ipsum',
    titleBack: false,  //false by default, set to 'true' to use a back icon instead of avatar picture
    titleBackIcon: Icons.arrow_back, //the back icon is 'arrow_back' by default (customizable)
    onTitleTap: () {  //custom callback function called when title avatar or back icon is pressed
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Yay! Flutter Collapsible Sidebar!')));
    },
    onHoverPointer: SystemMouseCursors.click, //the default hover mouse pointer is set to 'click' type by default (customizable)
    textStyle: TextStyle(fontSize: 20), //custom style for sidebar title
    titleStyle: TextStyle(fontSize: 20), //custom style for collapsible items text
    toggleTitleStyle: TextStyle(fontSize: 20), //custom style for toggle button title
    avatarImg: NetworkImage('https://www.w3schools.com/howto/img_avatar.png'),
    body: _body,
    height: double.infinity,
    minWidth: 80,
    maxWidth: 270,
    borderRadius: 15,
    iconSize: 40,
    toggleTitle: 'Collapse', //title text of Toggle Button
    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,
    topPadding: 0, //space between image avatar and icons
    bottomPadding: 0, //space between icons and toggle button
    fitItemsToBottom: true, //fit all icons to the end of the space between image avatar and toggle button
    showToggleButton: true,
    sidebarBoxShadow: [BoxShadow(
                            color: Colors.blue,
                            blurRadius: 10,
                            spreadRadius: 0.01,
                            offset: Offset(3, 3),
                          ),],
     //sidebarBoxShadow accepts a list
   
     just like the "BoxDecoration" parameter of a "Container". By default a black shadow is applied.
   
)

License

Apache 2.0

Comments

Change TextStyle Issue.

@RyuuKenshi How to change TextStyle in Menu?

Code :

CollapsibleSidebar( items: _items, avatarImg: NetworkImage('https://www.w3schools.com/howto/img_avatar.png'), title: 'Test', iconSize: 25.0, textSize: 15.0, minWidth: 67.0, height: double.infinity, duration: Duration(milliseconds: 500), curve: Curves.fastLinearToSlowEaseIn, toggleButtonIcon: Icons.arrow_forward_ios, screenPadding: 4, borderRadius: 15, body: _body(size, context), ),

opened by DipakSkywave 3

Scrolling menu for multiple tabs

When you add multiple items to the list you get pixels overflow error I made a little change here :

https://github.com/RyuuKenshi/flutter_collapsible_sidebar/blob/00f5e8fa929ea05e5dcc9da3362e59f7a90ca278/lib/collapsible_sidebar.dart#L172-L184

So now it looks like

                    Stack(
                      children: [
                        /**
                        CollapsibleItemSelection(
                          height: _maxOffsetY,
                          offsetY: _maxOffsetY * _selectedItemIndex,
                          color: widget.selectedIconBox,
                          duration: widget.duration,
                          curve: widget.curve,
                        ),*/

                        ConstrainedBox(
                          constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height / 3),
                          child: ListView.builder(
                          itemCount: _items.length,
                          shrinkWrap: true,
                          itemBuilder: (BuildContext context, int index) {
                          return _items[index];
                          }
                          ),
                        ),
                      ],
                    ),

I commented the selected item highlighting because it doesn't scroll with the list so if you have better answers that would be great !

opened by Hijodelalunah 3

Collapse text changeable?

Is it possible to change the "Collapse" text in the expanded sidebar (needed for localization) ?

And is it possible to have an option to specifiy expanded mode as default and/or to programmably change the current mode?

opened by PsychTechApS 3
Add mouse pointer changes and hover underline for web

On Web the mouse pointer was not changing when entering a collapsible item. I have added a mouse area to detect that and also underline text on hover.

opened by TheLonelyNull 1

LateInitializationError: Field '_selectedItemIndex@25278355' has not been initialized.

════════ Exception caught by widgets library ═══════════════════════════════════
The following LateError was thrown building CollapsibleSidebar(
dirty, dependencies: [_EffectiveTickerMode], state: 
_CollapsibleSidebarState#b9f65(ticker inactive)):

LateInitializationError: Field '_selectedItemIndex@25278355' has not been initialized.

This error is related to null safety and late initialization of _selectedItemIndex parameter.

opened by prateekmedia 1