Sidebar Menu & Dashboard | Flutter SDK
HTML-код
- Опубликовано: 13 май 2019
- #Sidebar #Menu #ScaleTransition
A mock of dribbble shot, dribbble.com/shots/6351511-Me...
Subsequent videos -
• Navigation in Sidebar ...
• Auto close menu in Sid...
This is a concept of sidebar menu and dashboard and various states between them when the menu comes in focus and vice versa.
Github Link - github.com/TechieBlossom/flut...
If you liked the video, then please show me by hitting the like button for video and show some love by giving star 🌟 on Github.
━ ━ ━ ━ ━ ━ ━ ━ ━ ━━ ━ ━ ━ ━ ━ ━ ━ ━ ━
Other Videos
━ ━ ━ ━ ━ ━ ━ ━ ━ ━━ ━ ━ ━ ━ ━ ━ ━ ━ ━
➨ Neumorphism, Gradient Chart & Custom Shape End Drawer - • Sidebar Animation & Na...
➨ Google Stadia App Concept - • Flutter UI | Stadia Ap...
➨ Local Events App - • Flutter UI | Local Eve...
➨ Sidebar animation and navigation - • Sidebar Animation & Na...
➨ Despicable Me Characters App - • Flutter UI | Despicabl...
➨ Flight Ticket App Playlist - • Flight List UI | BLOC ...
➨ Video Game Messaging App - • Video Game Message App...
➨ Bloc Tutorials - • State Management | Fou...
━ ━ ━ ━ ━ ━ ━ ━ ━ ━━ ━ ━ ━ ━ ━ ━ ━ ━ ━
Support!!
━ ━ ━ ━ ━ ━ ━ ━ ━ ━━ ━ ━ ━ ━ ━ ━ ━ ━ ━
Helps me in carving out more time for tutorials
❤️ From India and don't want to pay commission - There are many ways you can connect with me (Website, Twitter, Comments)
❤️ Buy me a Coffee www.buymeacoffee.com/AGd0Xngci
or here is my
❤️ PayPal account paypal.me/techieblossom
━ ━ ━ ━ ━ ━ ━ ━ ━ ━━ ━ ━ ━ ━ ━ ━ ━ ━ ━
Follow me! Show your support towards the channel:
━ ━ ━ ━ ━ ━ ━ ━ ━ ━━ ━ ━ ━ ━ ━ ━ ━ ━ ━
🎯 Medium - / prateeksharma
🎯 Twitter - / sharmaprateek7
🎯 Website - www.techieblossom.com
🎯 Github - github.com/TechieBlossom
SUBSCRIBE FOR MORE VIDEOS LIKE THIS
LIKE & SHARE
THANKS FOR WATCHING!🙏🙏🙏
Subsequent videos -
ruclips.net/video/v2-F6n7_gZA/видео.html
ruclips.net/video/N5reMK43GLs/видео.html
And a few other people
Great tutorial man, though I think when you say you do know how to modularize your code but just showing us how to do it, Modularizing would be nice especially to beginners like me. This way I began learning through good practices from the beginning. Thanks
At 6:28, instead of using SizedBox to create spacing between Widgets inside the Column parent, you can replace the Column widget with a Wrap widget and then set the Wrap widget’s “runSpacing” property to the int value indicating the spacing you want between the children. The Wrap widget also has “alignment” and “crossAxisAlignment” properties to indicate direction and placement of its children.
In any case, this screencast is awesome. Well done.
Man love your content and dedication.. please upload videos everyday
Your tutorial is awesome. It really helped a lot. Thank you.
Your videos are awesome. You really help me out a lot. Thanks so much.
It is impressive how much one learns both in this channel and in Made with Flutter, in both channels the content is excellent.
Thank you so much
Nice video, this is clear and simple to understand!
At 11:13 you should use the SafeArea widget instead. This ensures that it always remains visible for various screens (even with notches etc.).
Martin Niederl hi Martin, was genau meinst du mit der SafeArea? Vorteil/ Nachteil? Ich kenne das nicht.. LG
@@phidog9791 zb wenn ein Handy einen großen Notch hat dann wird damit sichergestellt das der gesamte View nach unten rutscht um in der "Sicheren-Zone" zu sein, damit nie Teile deiner UI sich an Orten befinden wo gar kein Bildschirm ist.
Thanks for this content, I've subscribed to your channel
Thank you so much for the wonderful video bro it helped me and my team thanks again
This is awesome. Thanks for sharing.
Hey, how long did it take you to master Flutter up to this level?
You need 5 months of full focus!
@@4li. 5 months? Coming from a React background, I would say two to three weeks. Flutter has an amazingly short learning curve.
Full focus on Flutter and everyday learning will require 3-4 weeks.
Also Coming from react you will find it easier.
At 4:54 How did you get or autocomplete the import package menudashboard? It doesn't work in my Case.
I mean, doesn't sho up this import on the main.dart, nevertheless, Its working and I can see the menu on the simulator.
Thanks
The sidebar menu can be simply achieved by just using Drawer widget. It is just out of the box widget from flutter and simple to use. You can work on animating on that if you really need them.
Thanks a lot for this video. 👏👏
Great content!
very good nicely done !!
hello, can I ask you something, how to put bloc in navigation_model class if I want the sidebar change to another page after I clicked on it?
amazing!
Awesome!
How to make slide menu without Appbar.? I just want to drag from left screen and slide menu appear. Please make tutorial for this case. Thank you !
I think that using the PageView to build the SlideBar is simple and cool, especially whose controller (PageController) gives us better controls.Thank you very much.I solved my problem after watching your video.😄👍
haotian li you can use gesture detector and detect a drag
Great video!
How would you make the configuration tab be animated just like the menu?
You are a good man.
Man you r great
So awesome thanks alot
good knowledge, I'm also interested in creating content about flutter and other programming languages. thank you
Thanks for the tutorial. How do you handle navigation and back button behavior for this kind of menu ?
I think you can use WillPopScope stuff in order to handle back navigation, should be something like this :
return WillPopScope(
onWillPop: () {
context.bloc().add(GoToGetStartedPage());
return;
},
child: Scaffold(
hope it helps :)
first of all, thank you for the tutorial, Sir. I learned a lot from it,
actually, i have one question, how could your Listview be scrollable inside singleChildScrollView ? I try with the same approach it didn't work, and then I wrapped the listview with ConstrainedBox, and it worked afterward :)
is there something I missed? or something related with my dart version ?
like me. i cant scroll in list view
Shrinkwrap?
I have the same issue.
I'm a noob at, but i solved with scrollDirection: Axis.vertical,
physics: ClampingScrollPhysics(),
thank youuuu
nice ! one question, how to change from round corners at the start position to square ? If menu is closed looks different with round corners... So round corners should first come with the slide animation... Thx !!!
You can use the isCollapsed variable to change the border radius.
Like this: borderRadius: BorderRadius.all(Radius.circular(isCollapsed ? 0 : 40)),
How can we apply gesture control for menu slide?
5:47 can you explain to me how you format it to be that way? what shortcut that you use?
Having comma moves code to next line, no comma makes code in same line. No special format . Cmd shift L, ctrl shift L .. normal dart format
Hey Bro,
Is there any theme or extension for bracket connectors like yours in vscode?
how do we create another page, for example messages page, and menu will be highlighted, thanks
one help ..previously i used to get hint like for decoration = BoxDecoratoin ...now i do not get any hint
Container(
decoration: ,
);
any help ?
very nice tutorial.
cool!
it's easy to understand.
Hello sir,how can we get that phone screen in vs code as you get in right side of screen,is this an emulator or something else? How can you live edit that code output
Emulator.
which is the plugin you have used for the lines, indent lines that show the tree
It's from Flutter plugin . Got it automatically long back
Hi,
At 35:16, you can see that the actual page is still scrollable even when the menu is open. I do not want that and want if somebody touches right portion outside the menu the menu should close.
What should I do?
Right now, menu and Dashboard take full screen width in stack, u can wrap menu in a row and second child of row can be a expanded widget with child as inkwell widget. This way half of the screen can be made touchable. If it's not clear let me know
Thanks @@techieblossom for a prompt response, so let me rephrase the question because I am not bothered about the left part of the screen which has menu but I am bothered about the right part of the screen which has "My Cards" page. If you start at 35:10, you said that even when you click on Menu button, the scrolling works. In my case, scrolling should not work. Once menu is open, only menu should be touchable/clickable/selectable. If user touches the "My Cards" page which has slid to the right to open the menu, it should close the menu and bring us back to the "My Cards" page. Right now, user touches any of the widget, say red card, from the "My Cards" page during Open Menu like in 35:12 (thinking that touching on right side will take the user to back to "My Cards" page), that widget content opens and when they hit back button they have the open menu once again, which is not a good User experience at all. I hope I made the question understandable this time.
You can make a widget non clickable by passing null to ontap method. We already have state of screen whether it is collapsed or not collapsed, so using that we can do whatever we want to do in ontap, or even we can stop scrolling. It completely depends on the use case, some may like to interact with my cards when it is smaller or some may want to restrict interactions like ur case. The point is, it is possible..
@@techieblossomOk, makes sense. Thanks for the help !
@@techieblossom How to make the buttons in the menu clickable??, I made the menu , added buttons to it, but the onPressed() function is not working as the buttons are not getting clicked outside the dashboard. We can however click any of the buttons in the dashboard.
super Brooooooooo
can i add it from right side
How would you create marquee text widget?
hi Mr Tech, I add Avata and bottom Button, but when i add too many menu show error "a renderflex overflowed by 30 pixels on the bottom."
i try add SingleScroll, Expand,.. but not work, pls help me
Instead of Expanded, use Flexible
Name of text editor?
Hai there! what're the differences between AnimatedContainer & AnimatedPosition, I'm trying to find it on Google but can't find it. Thanks in advance.
Container will animate height width colors
Position will animate x and y positions.
Have you added any dependencies for animation? Because I got some errors.
No dependencies. Check pubspec
@@techieblossom it's working fine.
For menu, added scroll view but it's not working, I tired.
Great! I'm starting on developing with VSC and Flutter but can't get my Android device connected properly (USB or net) for running my apps. Can you help or reffer me to a good tutorial on the subject. Thx & greets from Tenerife.
Mostly this happens with me too. But running Flutter doctor and upgrading Flutter version or updating android tools fixes this.
Official documentation is the doc to follow.
Which soft is used sir
Good
I am able to scale the content of the page, but not able to scale the text inside the container inside the page. Could you please how to do it ?
Try fittedbox
What iPhone emulator do you use?
flutter is new , but how and what is your secret in learning all the widgets / advance classes of the framework? Learning new language takes so much time for me. May i know what is your sercret?
Btw thank you for sharing this tutorial.
There is no secret, nothing is basic and advance is Flutter, giving time to Flutter will give anyone much knowledge about Flutter widgets..
6 months
Yes, I started with java. I love designs. Python is great. I want to Master that for some data related stuff.
13:16 my setState(() {
isCollapsed = !isCollapsed;
}),
shows that it is 'undefined': setState and isCollapsed, despite defining them above like he does in the video. I also have the same issue with: duration, screenHeight, and screenWidth.
Any help would be greatly appreciated. FYI, I did go back and re-watch that part twice, comparing my code to what's on screen, and it is the same. I'm stumped.
Please share your file with me.
You can join discord and paste code there
discord.gg/Q5GfbZsvPk
NVM, I solved my own problem. There were one too many } after the class _MenuDashboardpageState for some reason.
Hi thanks a lot for the video.
i have a question about NavigationBloc class.
i am getting error on constructor of it. maybe needs to call super.
i am using flutter_bloc: ^6.0.5.
be happy
Yeah. Recent changes require the initial state to be directly passed in super.
@@techieblossom would you please share that updated lines, i am new on flutter i could not correct it. thanks in advance :)
There's a bug when I scroll, scrolling from inside the listview is not working but if I scroll and keep my finger there it scrolls fine but when i pull out the finger and touch it again the scrolling from inside the innerlist is not working.
Share the code
Hello!
I am a little bit stuck with your code. I am trying to navigate through pages with this menu but I'm unable. How should I do it?
Your videos are great. Keep on going :)
Many people have asked me this, I will try to get into the code and reply back. Need 1-2 days
@@techieblossom have you got time to create this for page navigation with this menu! instead of widgets with in one page?
@ Techie Blossom we still waiting on the navigation handling of this type of menu
@@ezeaguprincewill7005 if you have found solution please send link
@@ngonidzashemaphosa6749 ruclips.net/video/N5reMK43GLs/видео.html
the tutorial its great, but i'll let yoou know that using methos intsead of classes for custom widgets afects the performance. and if any dev copy directly the code there would be a lot of bad performance apps out there
I know that, already have told in my previous videos. My only aim to do this was to have everything in one file with one widget. I just wanted to explain the concept. If someone is following my videos, they will know how I generally modularize my code. Thanks anyway, next time I will make sure, these type of things are not left behind in anyway
@@techieblossom looking forward for the modularize code and best practice using dark / flutter.
This is menu button click based not navigation Drawer(not swipable)
The ( animatedpositioned )didn’t work. Everything stopped there. Anyhelp would be appreciated.
Send your Code. Its working here
In Windows gradlew.bat file is missing after running the app why???
Update the gradle wrapper with 6.0.1 version
Very impressive.
But How can switch between sidebar menu items?
For that please watch
ruclips.net/video/v2-F6n7_gZA/видео.html
please share bottom navigation bar
with animation
Looks like there mistake with right value in AnimatedPositioned. If left = (0.6*screenW), then its mean that visible part of dashboard is 40% of self, and unvisible part in right side is 60%... so 60% of dashboard = (0,6*screenW), so its mean that right value of AnimatedPositioned shoud be (-0,6*screenW) instead (-0,4*screenW)
Have you tried with that?
@@techieblossom yes, I tried and (-0.6 * scrW) work well while (-0.4*screenW) make dashboard part more thin than it shoud be. In your dashboard layout it's not possible to see mistake visually but in other cases it's will possible to see. And I also checked it by getting size of dashboard when menu is open. And also just by calculation.
Nice tutorial, please how to click on menu items and change the page and collapse menu again?
Please see latest videos for that, there are 2 subsequent videos after this. See description.
I got it using a state management called Get👍
13:08 에서 setState 사용할때 Error: The method 'setState' isn't defined for the class 에러가 나는데.. 이분이 처음 위에서 짤때 extends StatelessWidget 으로 해서 에러남.. extends StateFulWidget 로 바꾸고 코드는 이분 github 위치 참고해야함 ㅠ
Hi! You must use Extract Method instead of Extract Widget.
But why?
@@techieblossom You have used a method not widget.
Okay.
@ Techie Blossom we still waiting on the navigation handling of this type of menu
I hope you have seen my latest video now? For navigation
Techie Blossom yeah I did😁
hey please send link on info on how to navigate between pages
ruclips.net/video/v2-F6n7_gZA/видео.html
13:10 I Write Correct Code But When I Type SetState I Am Getting Error
Show the code and error please..
maybe S for Set using the lowercase, then it should be setState
@protected
void setState (
VoidCallback fn
)
add
Be sure that it’s a StateFull widget
What you using IDE?
IntelliJ
Hey guys, does that menu have a specific name ?
the listview dont return scroll
how am i able to call the menu on another page?
I'm trying to do that, I followed this tutorial ruclips.net/video/2SjvhAUR9aw/видео.html. And in main -> Stack -> you have to return the other view instead of the Container. So you can navigate to another view and have the following menu
✌🏼
Also make backend tutorial
Flutter beginners tutorial please
Hi, can you post the code repository. It will be a good thing to play around the code. By the way, I love you videos.
Sure. After some hours about 8 hours or so.
Excelent example, good effect of animation, thanks!
Please check the description now.
@@techieblossom thanks!
SetState() not able to get it why bro ?
Are you not using in class that extends state class
@@techieblossom yes bro I used
But not able to get it
Hey, I liked the app you made. Can I get this app for my use. Or tell me the name so that I can download the app from playstore
Not made an app.
Its not there is play store
I believe, you are talking about sidebar video
@@techieblossom yes about sidebar video. The app that manages cards. I loved the UI of that app. So beautifully designed.
I have not made the app complete, just a concept mocked in Flutter
@@manasrane4776 make your app.
Como me puedo comunicar contigo?
Via email and in English language
@@techieblossom Hi bro, what's your gamil to communicate with you? Greetings blessings
You can go to the website and contact me via contact form
You can go to the website and contact me via contact form
17:09
why you've written code for Sidebar icons in just Textual form and no proper code for their design , like the way you've showed in the start of the video??
Can you refer the 2 files in question here?
I didn't get you
Make for android java ,for the same design
Expectation: 0:15
Reality: 36:08
lol
lol
animation effect doesnot work
Can you elaborate more?
Is adobe xd dead?
Android studio
You're instagram please?
I don't use it.
19 dollars for a fucking coffee?
Where is that?