frezyx/sidebarx

Flutter multiplatform navigation sidebar / side navigation bar / drawer widget

SidebarX 🔥

Flutter multiplatform navigation sidebar / side navigationbar / drawer widget

Show some ❤️ and star the repo to support the project!

Mobile	Desktop	Web

Getting started

Follow these steps to use this package

Add dependency

dependencies:
  sidebarx: ^0.16.2

Add import package

import 'package:sidebarx/sidebarx.dart';

Easy to use

The package is designed with maximum adaptation to large screens.
Therefore, adding a widget to your screen will be very simple.

    Scaffold(
      body: Row(
        children: [
          SidebarX(
            controller: SidebarXController(selectedIndex: 0),
            items: const [
              SidebarXItem(icon: Icons.home, label: 'Home'),
              SidebarXItem(icon: Icons.search, label: 'Search'),
            ],
          ),
          // Your app screen body
        ],
      ),
    )

Use with small mobile screens

On small screens and mobile devices, you can use the ready-made Sidebar widget as your application's drawer for excellent UX.
Otherwise, leave the code unchanged and get the same experience

    Scaffold(
      drawer: SidebarX(
        controller: SidebarXController(selectedIndex: 0, extended: true),
        items: const [
          SidebarXItem(icon: Icons.home, label: 'Home'),
          SidebarXItem(icon: Icons.search, label: 'Search'),
        ],
      ),
      body: const Center(child: Text('Your app body')),
    )

Additional information

The project is under development and ready for your pull-requests and issues 👍
Thank you for support ❤️

Thanks to all contributors of this package

For help getting started with 😍 Flutter, view [online documentation](https://flutter.dev/docs), which offers tutorials, samples, guidance on mobile development, and a full API reference.

sidebarx's Issues

How to persist state while switching tabs?

Swipe to open

It would be great if there was an option to allow swiping from the side of the screen to open the menu.

Fix label overflow fading in the wrong direction and allow custom overflow for labels

Is your feature request related to a problem? Please describe.
If a label text overflows, TextOverflow.fade will be used which fades from top to bottom, which is incorrect and not very visually pleasing.

Describe the solution you'd like
Since the label text is limited to one line, simply setting softWrap = false in SidebarXCell will result in the text fading in the correct direction. Also just removing the overflow = TextOverflow.fade will allow the user to specify the overflow with a SidebarXTheme.textStyle

add hoverTextStyle in SideBarXTheme

Describe the solution you'd like
I would like a hoverTextStyle property to be used in conjunction with hoverColor

.

Drawer displayed 2 times

if the drawer is open in portrait mode and then rotate to landscape mode there is anther drawer displayed above the first one

How to make sidebar item list vertical align center

for now it's rendered from the top of the side bar, is there a way to make the vertical align to be center

Question: Set option of orientation

I am not sure if it is possible, yet.

Can I set the orientation if the drawer/sidebar is left or right?
I want to use it in a widget where I want to keep my original drawer on the left. And open a sidebar on the right side.

And small additional question: Is the design pure material (3)? I wouldn't like to have a mismatch between the designs.

Thank you!

How to use sub menus in sidebarx

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

How to use custom image for icons?

Is your feature request related to a problem? Please describe.
Using icon: Image.asset(...) gives the error:

The element type 'BottomNavigationBarItem' can't be assigned to the list type 'SidebarXItem'.dart[list_element_type_not_assignable](https://dart.dev/diagnostics/list_element_type_not_assignable)

Describe the solution you'd like

I would like to be able to use custom image icons.

Labels not displayed

Describe the bug
I have copy/paste the sample sidebar you provided into my application, but when I extend the side bar,
there is no label displayed. All the icons are centered, but no text.

I have try to change the colors, style etc... no way...
But if I use "extended:true" when creating the controller... the labels are displayed, but then it is extended (and I want it collapsed)

Do you have any idea of the problem?

PS: Notice it is under Windows, but I don't think that it is related.

Sidebar preforms loading animation every time you navigate to a new route

Describe the bug
I am using the go router package to manage navigation in my app, where each page has its own route. Every time I navigate to a new route, whether via a sidebar button or any other method, the sidebar animates in the icon and text from the right to the left.

To Reproduce
See the video below

Screen.Recording.2022-06-28.at.4.58.17.PM.mov

Expected behavior
I should be able to adjust the animation duration (in my case set it to 0)
duration: const Duration(milliseconds: 300),
See the code here

Desktop (please complete the following information):

• OS: Mac OSX Big Sur 11.6
• Browser: Chrome
• Version: 102.0.5005.115

Thank you for any help with this issue, and if you have any questions about what I mean or would like me to just submit a PR that's fine as well. This is a great flutter package, thank you for making it 😃

long names

if the name of the menu item (too long) does not fit in the width of the sidebar, then the name does not wrap, but goes beyond the border and ceases to be visible

Header/footer when collapse/extend

Is your feature request related to a problem? Please describe.
I'm showing the footerDivider with an icon and text. Like this " icon - text ". When collapsed it's ugly.

Describe the solution you'd like
It is good when sidebar collapsed only show icon. So please provide these options like footerDividerExtend and headerDividerExtend.

Thank you!

GetX Implmentation

Describe the solution you'd like
It seems like this component could work extremely well with GetX state management. Has there been any considerations to create a GetX flavor?

Describe alternatives you've considered
I started reverse engineering this myself, and it seemed like something more people may want than just myself.

Space between items

Is there any way to decrease the spacing between the items in the sidebar (vertically)? I tried setting the padding and margin to 0 but that didn't seem to do anything. It seems like there is quite a bit of space between the sidebar items.

Pending pull request to add footer items

Per the contribution guidelines I am submitting this issue prior to actually making a pull request.

Is your feature request related to a problem? Please describe.
It would be nice to add footer items to the sidebar that are listed just above the expand icon

Describe the solution you'd like
I have a pending pull request with this functionality:
https://github.com/DavidCatalano/sidebarx

Additional context I've updated the version number in the README.md. The examples have footerItems added.

Option to have the expand/collapse button at the top of the screen

Is your feature request related to a problem? Please describe.
There isn't a problem per se but it would be nice to have the option to have the expand/collapse button at the top of the screen

Describe the solution you'd like
It would be nice to have an attribute that can set whether the expand/collapse button shows at the bottom of the screen (current design) or to have it show at the top of the screen.

Describe alternatives you've considered
I don't know of an alternative

Additional context

Make sidebar items more customizable

Is your feature request related to a problem? Please describe.
The margin and the padding of a SidebarXCell are not customizable. Therefore, I can't customize the sidebar so that it matches my design target.

Describe the solution you'd like
The SidebarXTheme can be extended so that the margin and the padding of an item can also be customized.

Describe alternatives you've considered
Alternatively, it would be conceivable that an optional builder for the sidebar items can be specified (similar to the SidebarXBuilder). This would allow a completely custom representation of the items.

Let Sidebar Items unhighlighted

Describe the feature you'd like
I would like to have some Items in the Navbar as a kind of buttons, so you just click on them and they wont get highlighted.
Is there a solution or has someone an idea how to get the items unhighlighted.

getTitleByIndex

GetTitleByIndex is not working for me on the appbar title.

Error: The Ticker must be disposed before flutter: calling super.dispose

Describe the bug
I get the following error:

The following assertion was thrown while finalizing the widget tree:
_SidebarXState#9275a(ticker active) was disposed with an active Ticker.
_SidebarXState created a Ticker via its SingleTickerProviderStateMixin, but at the time dispose()
was called on the mixin, that Ticker was still active. The Ticker must be disposed before calling
super.dispose().
Tickers used by AnimationControllers should be disposed by calling dispose() on the
AnimationController itself. Otherwise, the ticker will leak.

Is it possible to fix it by changing the following:

class SidebarX extends StatefulWidget {

   /// Omit some code.... 

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
}

The title of the AppBar is not updated when the drawer menu is clicked,

Description
The example configuration has a variable isSmallScreen which when true should show an Appbar, the title of this is not updated when I click on the different SideBarXItem

what am I doing wrong?

Please help me...

Thank you 👍 🥇

enable back going

When I switch between the tabs from navigation menu and then click on back button how it the implementation to back track the navigations of the side menu

Sidebar menu items not occupying the whole height available

Describe the bug
I noticed when I upgraded to sidebarx 0.13.0, the menu items are not occupying the whole height available in the view.

To Reproduce
Steps to reproduce the behavior:

1. Upgrade to version 0.13.0
2. Put 8 sidebar items
3. Run in Google Chrome

Screen recording
https://user-images.githubusercontent.com/40294247/194965229-665de925-13be-4bd3-80e9-a9a1b0997ed4.mp4

Desktop (please complete the following information):

• Browser Google Chrome

Text Disappears on Hot Restart on Web

Describe the bug
You can see that after a hot restart, there is no text even though I'm using the example code. If I kill the app and do a clean start it appears as it should.

Screenshots

Desktop (please complete the following information):

• OS: Linux (Pop_os)
• Browser Chrome
• Version 110.0.5481.177 (Official Build) (64-bit)

Additional context
Using the latest version (0.15.0).

Footer Sizing Issue with Footer Items

Is your feature request related to a problem? Please describe.
I've found the library and it is awesome, but when I added footerItems, the footerSeparator was in a bad position, in the middle of the sidebar, instead of the bottom, as expected.

Describe the solution you'd like
I've created a fork and added a enum "FooterFitType" that can be "fit" or "expand". And send it as a parameter to the SidebarX class, setting the default value as "expanded" so the new update won't break existing projects.

Describe alternatives you've considered
I've considered setting as default to always fit the items, instead of expanding, but maybe someone needs the expanded approach. Later, I've considered using a boolean to tell if it fits or not, but found more readable being a enum.

Additional context
Current approach:
Code:

Sidebar:

My solution:
Code:

Sidebar:

How to navigate to deep page but sidebarx always open?

I want to go to a deeper page but the sidebarx doesn't disappear, is it necessary to make a sidebarx on a new page? Please help me...

Proposal for the functionality of footerItems and variable sidebar width

Is your feature request related to a problem? Please describe.
The width of the current sidebar is fixed, and when setting footerItems, the length ratio of footerItems to items will be 1:1

Describe the solution you'd like
I hope to achieve variable sidebar width and free height setting for footItems and items

Describe alternatives you've considered
As shown in the following figure

Obtain layout information through GestureDetector or other components to achieve variable sidebar width; Due to both items and footItems using Expanded, the height ratio will be 1:1 by default. Therefore, the above requirements can be achieved by releasing the flex parameter or fixing the height of footItems

Couldn't add proper logout functionality in sidebarx. Sidebar showing in login page after logout

Describe the bug
We have added a logout button in the sidebar switch.

We want to clear the navigation drawer and move to login page after clicking the logout button.
But we are facing the real issue here,Our sidebar is showing on the login page.
So how we can move from the sidebar to another page without sidebar?

We are developing a web app.

The selected icon theme is ignored

Describe the bug
Setting the selected icon theme is not working, it always uses the icon theme.

Mouse cursor over items

Is your feature request related to a problem? Please describe.
When hovering over items, the mouse cursor doesn't change. This gives a wrong indication to users.

Describe the solution you'd like
Upon hovering a clickable item, the mouse cursor should become a pointer.

Describe alternatives you've considered
I haven't considered any

Additional context

Error: The Ticker must be disposed before flutter: calling super.dispose

Describe the bug
I get the following error:

The following assertion was thrown while finalizing the widget tree:
_SidebarXState#9275a(ticker active) was disposed with an active Ticker.
_SidebarXState created a Ticker via its SingleTickerProviderStateMixin, but at the time dispose()
was called on the mixin, that Ticker was still active. The Ticker must be disposed before calling
super.dispose().
Tickers used by AnimationControllers should be disposed by calling dispose() on the
AnimationController itself. Otherwise, the ticker will leak.

Is it possible to fix it by changing the following:

class SidebarX extends StatefulWidget {

   /// Omit some code.... 

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
}

Default mode Extended.

Thank you for such a wonderful SideBar to begin with. For Flutter Web, this is one of the best sidebars I have found.
One of the features that would be great for web is the ability to choose the default toggle style for the Sidebar. I am building a dashboard where it would be apt to load the sidebar in extended mode. I tried but could not find the option.

Please see if a toggle option could be added to select the default load mode.

Appreciate all your help.

Screen doesn't update when using Futurebuilder

I implemented the code as in your example, but when building a screen with Futurebuilder, it doesn't update with the content that appears after the future is completed.

When I navigate to other item on the menu and back to the Futurebuilder screen, it will show though.

I assume it could work if I built the future from inside the Sidebar widget and pass the values to the main screen, but it doesn't seem right.

Using Flutter web.

Icon As widget

I need to use png icons but the SidebarXItem accepts only IconData

Please make the icon as a widget or add an item builder. or help me with a workaround

please replay soon

Change GestureDetector to InkWell

Is your feature request related to a problem? Please describe.
When developing an application for Flutter Web it is not clear to the user that the sidebar buttons are something they need to click on. I.E. their cursor does not change to the "finger pointing" icon, it remains the normal cursor.

Describe the solution you'd like
This was a request from a client and I was able to easily implement this by changing the GestureDetector in the SidebarXCell class to an InkWell. I am not sure what other effects this has, but I don't see any issues with this solution. I'll make a PR for this feature request for you to approve if it makes sense, if not I'll just fork this repo :)

SidebarXItems grouping

It is desirable the possibility to group sidebar's SidebarXItems

Sidebar not opening.

The sidebar is not opening when I try to expand it. I have it in a stack so it displays over the map. I tried it in a row like the example and it threw an error "Unsupported operation: -infinity" which is why I decided to try the stack.

Here is an animated gif with it in the stack. It loads fine, but it's not opening. Also, i confirmed it does the same if i deploy to an emulator and physical device as well:

To Reproduce

body: Stack(
        children: [Padding(
                            padding: const EdgeInsets.all(0),
                            child: Column(children: [
                              Flexible(
                                child: FlutterMap(
                                  mapController: _mapController,
                                  options: MapOptions(
                                    center: LatLng(42.58, 12.43),
                                    zoom: 6,
                                  ),
                                  children: [
                                    TileLayer(
                                      urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                                      subdomains: ['a', 'b', 'c'],
                                    ),
                                    _wmsTileLayer
                                  ],
                                ),
                              ),
                              SidebarX(
                                  controller: SidebarXController(selectedIndex: 0),
                                  items: const [
                                    SidebarXItem(icon: Icons.home, label: 'Home on the range!'),
                                    SidebarXItem(icon: Icons.search, label: 'Search'),
                                  ],
                                )
                            ]))

Expected behavior
I would like it to open so I can interact with menus that i intend to put inside. The concept looks like:

Desktop (please complete the following information):

• OS: Windows
• Browser: chrome
• Version 113.0.5672.94 (Official Build) (32-bit)

Smartphone (please complete the following information):

• Device: Pixel 6
• OS: Android API 33

The drawer to small and not expand

After click app bar drawer is perfectly work but to small and not expand on label text

Here my code :
Controller :

Home Screen :

Version :

Sir can you please guide me on this small issue.

I currently am using this UI:

and want to use your package UI, but I don't understand how should I make this 4ezone drawer header look. can you please share some tips? I don't show the user profile pic at all.

onHoverColor function doesnt work

I commented everything out besides the onhoverColor for the xsidetheme but it still doesnt work.

A RenderFlex overflowed by 1.5 pixels on the right.

hey,
i'm getting following error as i'm expending my sidebar. i have add sidebarx as drawer.

======== Exception caught by rendering library =====================================================
The following assertion was thrown during layout:
A RenderFlex overflowed by 1.5 pixels on the right.

The relevant error-causing widget was: 
  SidebarX SidebarX:file:///Users/r3zafa/projects/flutter-elearning/app12/lib/screens/mobile/mobile_home.dart:34:15
The overflowing RenderFlex has an orientation of Axis.horizontal.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

The specific RenderFlex in question is: RenderFlex#6ff4e relayoutBoundary=up11 OVERFLOWING
...  parentData: offset=Offset(16.0, 16.0) (can use size)
...  constraints: BoxConstraints(w=30.0, 0.0<=h<=Infinity)
...  size: Size(30.0, 31.5)
...  direction: horizontal
...  mainAxisAlignment: start
...  mainAxisSize: max
...  crossAxisAlignment: center
...  textDirection: ltr
...  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢
=========================================================================================

SidebarX(
        showToggleButton: true,
        theme: SidebarXTheme(
          decoration: BoxDecoration(
            color: Colors.deepPurple.shade100,
          ),
          padding:
              const EdgeInsets.only(top: 24, bottom: 24, left: 0, right: 0),
          textStyle: GoogleFonts.poppins(
              fontSize: 14.sp,
              fontWeight: FontWeight.w600,
              color: Colors.black),
          selectedTextStyle: GoogleFonts.poppins(
            fontSize: 14.sp,
            fontWeight: FontWeight.w600,
            color: Colors.white,
          ),
          iconTheme: IconThemeData(
            color: Colors.black,
            size: 22.sp,
          ),
          selectedIconTheme: IconThemeData(
            color: Colors.white,
            size: 22.sp,
          ),
          itemPadding: const EdgeInsets.only(top: 16, bottom: 16),
          selectedItemPadding: const EdgeInsets.only(top: 16, bottom: 16),
          selectedItemDecoration: BoxDecoration(
            color: Colors.deepPurple.shade400,
            borderRadius: BorderRadius.circular(10),
          ),
          itemTextPadding: const EdgeInsets.only(left: 8),
          selectedItemTextPadding: const EdgeInsets.only(left: 8),
        ),
        extendedTheme: SidebarXTheme(
          selectedItemPadding: const EdgeInsets.all(16),
          itemPadding: const EdgeInsets.all(16),
          padding: const EdgeInsets.all(16),
          width: 70.w,
        ),
        controller: SidebarXController(
          selectedIndex: 0,
          extended: true,
        ),
        items: const [
          SidebarXItem(icon: Icons.home, label: 'Home'),
          SidebarXItem(icon: Icons.search, label: 'Search'),
        ],
      ),

How to use sub menus in sidebarx

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Ability to change side menu collapse/extend icons

Feature: The navigation icons in our app are quite similar to the ones used in Sidebar X, which may confuse users. We'd like the option to customize the icons used for the drawer collapse and expand functionality.

Solution: Add optional parameters for the 2 icons in sidebarx_base.dart, with default values of the current icons.

Unable to open drawer on mobile screen

I'm unable to open drawer navigation

How to use this plugin for routing?

I've tried to use Sidebarx with web navigation
https://github.com/tas-unn/tttt
this is my project, which doesn't works correctly.

1. When I first run the application and click on the menu items there, no errors occur. But when you click on the "dashboard" or "personal" buttons, a strange animation occurs and, judging by the print command, Hompage also starts. Although visually everything works.
2. When I reload the "dashboard" or "personal" page, a warning is displayed:
   Could not navigate to initial route. The requested route name was: "/dashboard" There was no corresponding route in the app, and therefore the initial route specified will be ignored and "/" will be used instead. But if I leave the switching example from the main example of your repository (_ScreensExample), then the url of the webpage does not change.
   Tell me what I'm doing wrong!