frezyx / sidebarx Goto Github PK
View Code? Open in Web Editor NEWFlutter multiplatform navigation sidebar / side navigation bar / drawer widget
Home Page: https://pub.dev/packages/sidebarx
License: MIT License
Flutter multiplatform navigation sidebar / side navigation bar / drawer widget
Home Page: https://pub.dev/packages/sidebarx
License: MIT License
GetTitleByIndex is not working for me on the appbar title.
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.
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
It is desirable the possibility to group sidebar's SidebarXItems
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:
Screen recording
https://user-images.githubusercontent.com/40294247/194965229-665de925-13be-4bd3-80e9-a9a1b0997ed4.mp4
Desktop (please complete the following information):
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();
}
}
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.
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
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.
for now it's rendered from the top of the side bar, is there a way to make the vertical align to be center
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.
Desktop (please complete the following information):
Additional context
Using the latest version (0.15.0).
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.
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'),
],
),
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.
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.
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 :)
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 👍 🥇
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.
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
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
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
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):
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 😃
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.
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
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...
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
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.
I commented everything out besides the onhoverColor for the xsidetheme but it still doesnt work.
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
if the drawer is open in portrait mode and then rotate to landscape mode there is anther drawer displayed above the first one
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.
Describe the bug
Setting the selected icon theme is not working, it always uses the icon theme.
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!
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.
I've tried to use Sidebarx with web navigation
https://github.com/tas-unn/tttt
this is my project, which doesn't works correctly.
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.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();
}
}
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!
I'm unable to open drawer navigation
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.
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.
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):
Smartphone (please complete the following information):
It would be great if there was an option to allow swiping from the side of the screen to open the menu.
Describe the solution you'd like
I would like a hoverTextStyle property to be used in conjunction with hoverColor
.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.