Flutter multiplatform navigation sidebar / side navigationbar / drawer widget

Overview

SidebarX 🔥

Flutter multiplatform navigation sidebar / side navigationbar / drawer widget

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

Mobile Desktop Web
Image Image Image

Getting started

Follow these steps to use this package

Add dependency

dependencies:
  sidebarx: ^0.2.1

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 ❤️


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.
Comments
  • Sidebar menu items not occupying the whole height available

    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
    help wanted 
    opened by melchorlapinigjr 4
  • Icon As widget

    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

    enhancement help wanted 
    opened by ali-taha-albaap 3
  • Change GestureDetector to InkWell

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

    opened by hulohot 2
  • Ability to change side menu collapse/extend icons

    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.

    opened by HaveANiceDay33 2
  • Mouse cursor over items

    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

    opened by yrashk 2
  • Sidebar preforms loading animation every time you navigate to a new route

    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

    https://user-images.githubusercontent.com/38847800/176307506-61342a36-11f0-4145-9b0e-d7060a7759a8.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 😃

    opened by hulohot 2
  • Default mode Extended.

    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.

    opened by zeeboydrummer 2
  • Sir can you please guide me on this small issue.

    Sir can you please guide me on this small issue.

    I currently am using this UI:

    Screenshot 2022-12-06 at 2 08 46 PM

    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.

    opened by fisforfaheem 1
  • Footer sidebar items

    Footer sidebar items

    opened by DavidCatalano 1
  • Pending pull request to add footer 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. footerItem

    opened by DavidCatalano 1
  • Error: The Ticker must be disposed before flutter: calling super.dispose

    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();
      }
    }
    
    opened by kojima1981 0
  • Labels not displayed

    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.

    opened by vd3d 0
  • Couldn't add proper logout functionality in sidebarx. Sidebar showing in login page after logout

    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.

    opened by androidAfi 1
  • Question: Set option of orientation

    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!

    opened by ThraaxSession 2
  • Header/footer when collapse/extend

    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!

    opened by 89hnim 0
  • How to use this plugin for routing?

    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!
    opened by tas-unn 1
Releases(0.14.0)
  • 0.14.0(Oct 22, 2022)

    What's Changed

    • Footer sidebar items by @DavidCatalano in https://github.com/Frezyx/sidebarx/pull/30
    • Release v0.14.0 by @Frezyx in https://github.com/Frezyx/sidebarx/pull/32

    New Contributors

    • @DavidCatalano made their first contribution in https://github.com/Frezyx/sidebarx/pull/30

    Full Changelog: https://github.com/Frezyx/sidebarx/compare/0.12.0...0.14.0

    Source code(tar.gz)
    Source code(zip)
  • 0.12.0(Sep 16, 2022)

    What's Changed

    • #fix: Bug on items position by @MonsterOfCode in https://github.com/Frezyx/sidebarx/pull/26

    New Contributors

    • @MonsterOfCode made their first contribution in https://github.com/Frezyx/sidebarx/pull/26

    Full Changelog: https://github.com/Frezyx/sidebarx/compare/0.11.0...0.12.0

    Source code(tar.gz)
    Source code(zip)
  • 0.11.0(Aug 30, 2022)

  • 0.10.0(Aug 13, 2022)

    What's Changed

    • Error: The Ticker must be disposed before flutter: calling super.dispose by @xnxaxo in https://github.com/Frezyx/sidebarx/pull/22
    • Update version to 0.9.0 by @Frezyx in https://github.com/Frezyx/sidebarx/pull/23

    New Contributors

    • @xnxaxo made their first contribution in https://github.com/Frezyx/sidebarx/pull/22

    Full Changelog: https://github.com/Frezyx/sidebarx/compare/0.9.0...0.10.0

    Source code(tar.gz)
    Source code(zip)
  • 0.9.0(Aug 3, 2022)

  • 0.8.0(Aug 3, 2022)

    What's Changed

    • Add adaptive icons by @HaveANiceDay33 in https://github.com/Frezyx/sidebarx/pull/18

    New Contributors

    • @HaveANiceDay33 made their first contribution in https://github.com/Frezyx/sidebarx/pull/18

    Full Changelog: https://github.com/Frezyx/sidebarx/compare/0.7.0...0.8.0

    Source code(tar.gz)
    Source code(zip)
  • 0.7.0(Jul 16, 2022)

  • 0.6.0(Jul 3, 2022)

  • 0.5.0(Jul 1, 2022)

    What's Changed

    • Added animation duration property to constructor by @hulohot in https://github.com/Frezyx/sidebarx/pull/9

    New Contributors

    • @hulohot made their first contribution in https://github.com/Frezyx/sidebarx/pull/9

    Full Changelog: https://github.com/Frezyx/sidebarx/compare/0.4.0...0.5.0

    Source code(tar.gz)
    Source code(zip)
  • 0.4.0(May 29, 2022)

  • 0.3.0(May 16, 2022)

  • 0.2.2(Apr 24, 2022)

  • 0.2.0(Mar 6, 2022)

      • FEAT: Edit theme configuration
      • FEAT: Made it possible to use with mobile devices
      • INFO: Add README package information and examples
      • FEAT: Add SidebarXTheme to make widget UI in extend and common mode
      • FEAT: Add builder for footer and header
      • FEAT: Add separatorBuilder, toggleButtonBuilder, showToggleButton, toggleButtonLabel, headerDivider, footerDivider fields
      • FEAT: Add initial sidebar UI
    Source code(tar.gz)
    Source code(zip)
Owner
Stanislav Ilin
Your code's boyfriend
Stanislav Ilin
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 widg

Arjun Sinha 121 Nov 30, 2022
This package supports drag & drop widgets inside the GridView.builder for multiplatform

This package supports drag & drop widgets inside the GridView.builder for multiplatform. It provides all the properties which are available in Gridview. builder and easy to implement with the few lines of code.

MindInventory 68 Dec 29, 2022
A Flutter Widget that create a horizontal table with fixed column on left hand side.

horizontal_data_table A Flutter Widget that create a horizontal table with fixed column on left hand side. Installation This package is starting to su

May Lau 204 Dec 27, 2022
A customizable listview with A-Z side scrollbar to fast jump to the item of the selected character

A customizable listview with A-Z side scrollbar to fast jump to the item of the selected character

Liew Jun Tung 81 Sep 21, 2022
A customizable listview with A-Z side scrollbar to fast jump to the item of the selected character.

A customizable listview with A-Z side scrollbar to fast jump to the item of the selected character. Quick scroll through list via dragging through alphabets.

Hussain Al Lawati 1 Apr 3, 2022
Flutter base, with a navigation button

mysample A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

null 0 Dec 30, 2021
A simple Flutter widget to add in the widget tree when you want to show nothing, with minimal impact on performance.

nil A simple widget to add in the widget tree when you want to show nothing, with minimal impact on performance. Why? Sometimes, according to a condit

Romain Rastel 127 Dec 22, 2022
A flutter carousel widget, support infinite scroll, and custom child widget.

carousel_slider A carousel slider widget. Features Infinite scroll Custom child widgets Auto play Supported platforms Flutter Android Flutter iOS Flut

Bart T 1 Nov 25, 2021
A Flutter Widget to make interactive timeline widget.

Bubble Timeline Package A Flutter Widget to make interactive timeline widget. This widget can be used to make Event Timelines, or Timelines for certai

Vansh Goel 12 Sep 22, 2022
📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

?? Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

Blue Fire 1.7k Jan 7, 2023
A widget lib that the widget in this lib can react to flutter ScrollController's offset

Language: English | 中文简体 linked_scroll_widgets A lib full of widgets that can react to the scrollController's offset change,to custom your UI effect.

WenJingRui 8 Oct 16, 2022
Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget

lite_rolling_switch Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget https://github.com/pedromas

Eduardo Muñoz 48 Dec 1, 2022
Progress Dialog widget for flutter projects with ability to customize loading widget, background color and background blur.

DISCONTINUED Checkout ArsDialog ars_progress_dialog Customizable progress dialog for Flutter applications with smooth animation for background dim col

Arsam 8 Apr 15, 2022
A Flutter widget that will give a Glitch Animation Effect to it's child widget.

GlitchEffect A Flutter widget that will give a Glitch Animation Effect to it's child widget. Installation Add the latest version of package to your pu

Sameer Singh 6 Nov 25, 2022
Widget, that can make any static located widget hidable

Installing See the official installing guidline from hidable/install Usage & Overview To start using Hidable widget, we have to create a ScrollControl

Anon 18 Dec 16, 2022
A widget that allow user resize the widget with drag

Flutter-Resizable-Widget A widget that allow user resize the widget with drag Note: this widget uses Getx Example bandicam.2021-11-11.12-34-41-056.mp4

MohammadAminZamani.afshar 22 Dec 13, 2022
Flutter Carousel Pro - A Flutter Carousel widget

Carousel Extended A Flutter Carousel widget. Usage As simple as using any flutter Widget. Based on Carousel Pro but extended to be able to navigate be

omid habibi 3 Dec 7, 2020
🟥 A flutter widget that flashes when flutter fails to render a frame in a certain timeframe

?? A flutter widget that flashes when flutter fails to render a frame in a certain timeframe

Andrei Lesnitsky 32 Oct 8, 2022
React hooks for Flutter. Hooks are a new kind of object that manages a Widget life-cycles. They are used to increase code sharing between widgets and as a complete replacement for StatefulWidget.

English | Português Flutter Hooks A Flutter implementation of React hooks: https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889 Ho

Remi Rousselet 2.6k Dec 29, 2022