drunkonbytes / flutter_collapsible_sidebar

A collapsible sidebar for Flutter apps implementing Material Design.

নমস্কার (Namaste)🙏🏻, I'm Arjun Sinha!

Associate Engineer at Commvault
Graduated from Visvesvaraya Technological University

🌟 Welcome to my Dreamscape!

A little more about me...

const arjun = {
    pronouns: "He" | "Him",
    code: ["Flutter", "Python", "C++", "Java", "Golang"],
    askMeAbout: ["app dev", "tech", "personal finance", "anime"],
    technologies: {
        backEnd: {
            tech: ["Python", "Golang", "Firebase"]
        },
        mobileApp: {
            hybrid: ["Flutter Development"]
        },
        databases: ["MSSqlSever", "Firestore", "MongoDB"]
    },
    currentFocus: "Contributing to Open-Source projects in Golang",
    funFact: "The first computer “bug” was an actual real-life bug"
};

I love connecting with different people so if you want to say hi, I'll be happy to meet you more! 😊

flutter_collapsible_sidebar's Issues

SubMenu

@RyuuKenshi

Can We Add Submenu in Sidebar?

Like this :
ORDERS >
OPEN ORDERS
CLOSED ORDERS

CollapsibleItem icon attribute not accepting Image.asset

CollapsibleItem icon attribute is coded to use only Icon data which makes it less flexible when we want to use our custom images here.

Every text gets two yellow underscore lines.

How to make RTL collapsible sidebar?

How can I set the location of the collapsible sidebar to the end of the view and make it RTL?

when add value to minWidth

how i can make the list of icons on the center of width
and selectedIconBox width dynamic with icon size or only around icon not full width

h

Add isCollapse parameter

We should be able to set the collapse behaviour conditionally by setting isCollapse to true or false

The method 'toDouble' was called on null.

The method 'toDouble' was called on null.
Receiver: null
Tried calling: toDouble()

The relevant error-causing widget was:
CollapsibleSidebar file:///Users/imac/Documents/workspace/fittrack_flutter/lib/features/home/presentation/pages/home_screen.dart:48:21
When the exception was thrown, this was the stack:
#0 Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5)
#1 double.* (dart:core-patch/double.dart:36:23)
#2 _CollapsibleSidebarState.build (package:collapsible_sidebar/collapsible_sidebar.dart:177:46)
#3 StatefulElement.build (package:flutter/src/widgets/framework.dart:4681:28)
#4 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4564:15)
...

ERROR MOVE ON THIS LINE...

Stack(
alignment: Alignment.topCenter,
children: [
CollapsibleItemSelection(
height: _maxOffsetY,
======> offsetY: _maxOffsetY * _selectedItemIndex,
color: widget.selectedIconBox,
duration: widget.duration,
curve: widget.curve,
),
Column(children: _items),
],
),

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.

Migrate to dart 3.0

or extend SDK constraints

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?

List<CollapsibleItem> _items;

List _items; How to Null Safe This _items

close CollapsibleSidebar menu issue?

@RyuuKenshi how to close the CollapsibleSidebar menu on click on the title?

Sidebar should not overlap body

Thanks for your support, great job!

• Would be nice if you could not overlap the body with the sidebar and resize the body
• Should also work for responsible views
• Same like Firebase: https://user-images.githubusercontent.com/44084914/104075971-d3225c00-5214-11eb-89d6-a408efb2fdd5.mov

Would appreciate your feedback

Ability use it with scaffold drawer

is it possible to hide the sidebar completely and invoke it using the [ScaffoldState.openDrawer] function for mobile

Remove Collapse button?

Is there a way to remove the collapse button and simply make the collapsing behavior only occur with a media query?

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 !

`Index out of range` error

Hi, I am trying to create a simply three-item sidebar, but I am receiving the following error. I have three items in the sidebar, and it seems that the fourth item (index 3) is trying to be accessed. Any ideas on why this might be happening? Thanks for any help!

======== Exception caught by gesture ===============================================================
The following IndexError was thrown while handling a gesture:
RangeError (index): Index out of range: index should be less than 3: 3

When the exception was thrown, this was the stack: 
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49      throw_
dart-sdk/lib/_internal/js_dev_runtime/private/js_array.dart 581:7                 _get]
packages/collapsible_sidebar/collapsible_sidebar.dart 392:44                      <fn>
packages/flutter/src/gestures/recognizer.dart 253:24                              invokeCallback
packages/flutter/src/gestures/tap.dart 627:11                                     handleTapUp
packages/flutter/src/gestures/tap.dart 306:5                                      [_checkUp]
packages/flutter/src/gestures/tap.dart 276:7                                      acceptGesture
packages/flutter/src/gestures/arena.dart 163:12                                   sweep
packages/flutter/src/gestures/binding.dart 464:20                                 handleEvent
packages/flutter/src/gestures/binding.dart 440:14                                 dispatchEvent
packages/flutter/src/rendering/binding.dart 336:11                                dispatchEvent
packages/flutter/src/gestures/binding.dart 395:7                                  [_handlePointerEventImmediately]
packages/flutter/src/gestures/binding.dart 357:5                                  handlePointerEvent
packages/flutter/src/gestures/binding.dart 314:7                                  [_flushPointerEventQueue]
packages/flutter/src/gestures/binding.dart 295:7                                  [_handlePointerDataPacket]
lib/_engine/engine/platform_dispatcher.dart 1183:13                               invoke1
lib/_engine/engine/platform_dispatcher.dart 243:5                                 invokeOnPointerDataPacket
lib/_engine/engine/pointer_binding.dart 156:39                                    [_onPointerData]
lib/_engine/engine/pointer_binding.dart 689:20                                    <fn>
lib/_engine/engine/pointer_binding.dart 620:14                                    <fn>
lib/_engine/engine/pointer_binding.dart 303:16                                    loggedHandler
lib/_engine/engine/pointer_binding.dart 188:80                                    <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 367:37  _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 372:39  dcall
Handler: "onTap"
Recognizer: TapGestureRecognizer#ee2a1
  debugOwner: GestureDetector
  state: ready
  won arena
  finalPosition: Offset(44.6, 94.0)
  finalLocalPosition: Offset(20.6, 10.0)
  button: 1
  sent tap down
====================================================================================================

Here is a minimum reproducible example

import 'package:flutter/material.dart';
import 'package:collapsible_sidebar/collapsible_sidebar.dart';

void main() => runApp(const WhisperApp());

class WhisperApp extends StatefulWidget {
  const WhisperApp({Key? key}) : super(key: key);

  @override
  State<WhisperApp> createState() => WhisperAppState();
}

class WhisperAppState extends State<WhisperApp> {
  @override
  void initState() {
    super.initState();
  }

  List<CollapsibleItem> get sidebarItems {
    return [
      CollapsibleItem(
        text: "Home",
        onPressed: () => print("home"),
        icon: Icons.home,
      ),
      CollapsibleItem(
        text: "Paths",
        onPressed: () => print("paths"),
        icon: Icons.folder,
      ),
      CollapsibleItem(
        text: "Settings",
        onPressed: () => print("settings"),
        icon: Icons.settings,
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: SafeArea(
        child: Scaffold(
          body: CollapsibleSidebar(
            items: sidebarItems,
            showTitle: false,
            body: const Center(child: Text("Home")),
          ),
        ),
      ),
    );
  }
}

How to disable collapse button or even to track a iscollapse bool state?

Adapting the padding of the body when collapsing ( solved on my fork)

I found a small issue on the code, which I commented below.
It fixed the padding when using the collapse button.

padding: EdgeInsets.only(left: widget.maxWidth * 1.1), // Here is it maxWidth and not minWidth

See my merge request

return _isCollapsed ? Stack( alignment: Directionality.of(context) == TextDirection.ltr ? Alignment.topLeft : Alignment.topRight, children: [ Padding( padding: EdgeInsets.only(left: widget.minWidth * 1.1), child: widget.body, ), sidebar, ], ) : Stack( alignment: Directionality.of(context) == TextDirection.ltr ? Alignment.topLeft : Alignment.topRight, children: [ Padding( padding: EdgeInsets.only(left: widget.maxWidth * 1.1), // Here is it maxWidth and not minWidth child: widget.body, ), GestureDetector( onTap: () { if (widget.collapseOnBodyTap) { _isCollapsed = true; _animateTo(widget.minWidth); } }, child: Container( color: Colors.transparent, ), ), sidebar, ], );

Add elevation parameter

We should also be able to set elevation

Add multi-level menu

Hi

Nice work 👍

Support multi level menu ? 2-3 sub menu ?

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

how to hide the avatar/title?

how to hide the avatar/title?

Max width parameter doesn't working.

I wanna remove avatar and title how i can do that ?

Enable tooltips on collapsed items

Allowing a simple mouse-over in flutter-web will enable us to see what an item means without performing a full expand/collapse. I have implemented this in my suggested PR at #57. The new example app (example_tooltip) also shows this in action.

Item padding should be a public property

iconImage with badgeCount is not working

icon with badgeCount is good

but when use iconImage+badgeCount, iconImage is not displaying

I want like

thanks

Impossible to focus the child when collapseOnBodyTap is set to false

When I set collapseOnBodyTap to false, I cannot focus the child ( main screen ). I need to collapse first the menu to be able to focus a text field for example.
Possible solution: see my merge request...

Yellow Lines came on Side menu Text

Hi Any one please help me out of this issue. The yellow line come across text . How can I remove it. @RyuuKenshi @TheLonelyNull

Not clickable in between label/icon (web)

Hey, this is a really great package! Thanks!

If I click inside the red highlighted areas nothing happens on the web (not tested on mobile).

avatar Image

I want to use Avater Image From Image.Assets()