Sidebar Menu & Dashboard | Flutter SDK

[@techieblossom]

Subsequent videos - kzbin.info/www/bejne/rGOQd2mkbMSakKM kzbin.info/www/bejne/hGbVloCBaZh6gtU

[@shahbazmirzamirza4989]

And a few other people

[@ugommirikwe]

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.

[@cindydasilva512]

It is impressive how much one learns both in this channel and in Made with Flutter, in both channels the content is excellent.

[@techieblossom]

Thank you so much

[@collinscollins4020]

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

[@haotianli5830]

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.😄👍

[@RaymondAtivie]

haotian li you can use gesture detector and detect a drag

[@pravinprince3221]

Thank you so much for the wonderful video bro it helped me and my team thanks again

[@martinniederl2189]

At 11:13 you should use the SafeArea widget instead. This ensures that it always remains visible for various screens (even with notches etc.).

[@phidog9791]

Martin Niederl hi Martin, was genau meinst du mit der SafeArea? Vorteil/ Nachteil? Ich kenne das nicht.. LG

[@dhlehrenlos]

@@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.

[@114huseyn]

Your tutorial is awesome. It really helped a lot. Thank you.

[@amitvijaranyia9701]

Thanks a lot for this video. 👏👏

[@bessadokmossab2177]

thank youuuu

[@narenn8056]

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.

[@vicher007]

Very impressive. But How can switch between sidebar menu items?

[@techieblossom]

For that please watch kzbin.info/www/bejne/rGOQd2mkbMSakKM

[@joshuaperalta1222]

Awesome!

[@time-to-pause]

Your videos are awesome. You really help me out a lot. Thanks so much.

[@richangvg]

You are a good man.

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

[@BabarAli-yb1eg]

Man love your content and dedication.. please upload videos everyday

[@jajasaria]

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.

[@techieblossom]

There is no secret, nothing is basic and advance is Flutter, giving time to Flutter will give anyone much knowledge about Flutter widgets..

[@techieblossom]

6 months

[@techieblossom]

Yes, I started with java. I love designs. Python is great. I want to Master that for some data related stuff.

[@Станислав-щ7ф8е]

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)

[@techieblossom]

Have you tried with that?

[@Станислав-щ7ф8е]

@@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.

[@BelajarPemrogramanPemula]

good knowledge, I'm also interested in creating content about flutter and other programming languages. thank you

[@studyonlineschool2090]

it's easy to understand.

[@harisurya1234]

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 ?

[@cuongphan394]

like me. i cant scroll in list view

[@techieblossom]

Shrinkwrap?

[@fernandoreis4170]

I have the same issue.

I'm a noob at, but i solved with scrollDirection: Axis.vertical, physics: ClampingScrollPhysics(),

[@danielaltino1096]

Great video! How would you make the configuration tab be animated just like the menu?

[@kaiassassin3571]

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 !

[@marcosradix1]

Nice tutorial, please how to click on menu items and change the page and collapse menu again?

[@techieblossom]

Please see latest videos for that, there are 2 subsequent videos after this. See description.

[@marcosradix1]

I got it using a state management called Get👍

[@cristrungcr7]

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

[@techieblossom]

Instead of Expanded, use Flexible

[@linhtrantrong8957]

Nice video, this is clear and simple to understand!

[@antonymazvabo7929]

This is awesome. Thanks for sharing. Hey, how long did it take you to master Flutter up to this level?

[@4li.]

You need 5 months of full focus!

[@RiwenX]

@@4li. 5 months? Coming from a React background, I would say two to three weeks. Flutter has an amazingly short learning curve.

[@techieblossom]

Full focus on Flutter and everyday learning will require 3-4 weeks. Also Coming from react you will find it easier.

[@Wackybackydonaldduck]

very nice tutorial.

[@YashSharma-mp9so]

Hey Bro, Is there any theme or extension for bracket connectors like yours in vscode?

[@anfaladil340]

In Windows gradlew.bat file is missing after running the app why???

[@techieblossom]

Update the gradle wrapper with 6.0.1 version

[@ratnapriya6106]

Have you added any dependencies for animation? Because I got some errors.

[@techieblossom]

No dependencies. Check pubspec

[@ratnapriya6106]

@@techieblossom it's working fine.

[@ratnapriya6106]

For menu, added scroll view but it's not working, I tired.

[@rurickmaqueopoisot5295]

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

[@techieblossom]

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

[@jajasaria]

@@techieblossom looking forward for the modularize code and best practice using dark / flutter.

[@ragunathanarjunan5643]

This is menu button click based not navigation Drawer(not swipable)

[@MrGDjiyong]

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?

[@khatramanche3839]

Thanks for the tutorial. How do you handle navigation and back button behavior for this kind of menu ?

[@harisurya1234]

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

[@hidayatnoradzmanhisham9726]

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.

[@techieblossom]

Container will animate height width colors Position will animate x and y positions.

[@mohsenghamgosar8915]

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

[@techieblossom]

Yeah. Recent changes require the initial state to be directly passed in super.

[@mohsenghamgosar8915]

@@techieblossom would you please share that updated lines, i am new on flutter i could not correct it. thanks in advance :)

[@girishparate1980]

very good nicely done !!

[@CarlosSK]

Hey guys, does that menu have a specific name ?

[@davidhernandez1040]

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

[@techieblossom]

Many people have asked me this, I will try to get into the code and reply back. Need 1-2 days

[@laiho143]

@@techieblossom have you got time to create this for page navigation with this menu! instead of widgets with in one page?

[@ezeaguprincewill7005]

@ Techie Blossom we still waiting on the navigation handling of this type of menu

[@ngonidzashemaphosa6749]

@@ezeaguprincewill7005 if you have found solution please send link

[@ezeaguprincewill7005]

@@ngonidzashemaphosa6749 kzbin.info/www/bejne/hGbVloCBaZh6gtU

[@imransefat8770]

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.

[@techieblossom]

Share the code

[@patricioeb]

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.

[@techieblossom]

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.

[@fouad_alshamy]

Thanks for this content, I've subscribed to your channel

[@ChathurangaRathnayake]

How can we apply gesture control for menu slide?

[@jkloopd1029]

cool!

[@Cccccccccccl]

What iPhone emulator do you use?

[@shaneboltz5648]

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.

[@techieblossom]

Please share your file with me. You can join discord and paste code there discord.gg/Q5GfbZsvPk

[@shaneboltz5648]

NVM, I solved my own problem. There were one too many } after the class _MenuDashboardpageState for some reason.

[@aradhyajain9575]

How would you create marquee text widget?

[@tubaaamir7759]

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??

[@techieblossom]

Can you refer the 2 files in question here? I didn't get you

[@chinmaya50]

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 ?

[@techieblossom]

Try fittedbox

[@ino9138]

5:47 can you explain to me how you format it to be that way? what shortcut that you use?

[@techieblossom]

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

[@Abhishek_Pal]

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?

[@techieblossom]

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

[@Abhishek_Pal]

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.

[@techieblossom]

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..

[@Abhishek_Pal]

​@@techieblossom​Ok, makes sense. Thanks for the help !

[@hardiksrivastava5491]

@@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.

[@phidog9791]

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 !!!

[@ayadlaouissijones9528]

You can use the isCollapsed variable to change the border radius. Like this: borderRadius: BorderRadius.all(Radius.circular(isCollapsed ? 0 : 40)),

[@mohammadsayed5645]

So awesome thanks alot

[@VeriousSmithIII]

Great content!

[@mrpakravian]

Man you r great

[@sairabashir9582]

please share bottom navigation bar with animation

[@hh-ki9dr]

13:08 에서 setState 사용할때 Error: The method 'setState' isn't defined for the class 에러가 나는데.. 이분이 처음 위에서 짤때 extends StatelessWidget 으로 해서 에러남.. extends StateFulWidget 로 바꾸고 코드는 이분 github 위치 참고해야함 ㅠ

[@terzurumluoglu]

Hi! You must use Extract Method instead of Extract Widget.

[@techieblossom]

But why?

[@terzurumluoglu]

@@techieblossom You have used a method not widget.

[@techieblossom]

Okay.

[@mohammedkhaled8553]

The ( animatedpositioned )didn’t work. Everything stopped there. Anyhelp would be appreciated.

[@techieblossom]

Send your Code. Its working here

[@nanisamireddy]

super Brooooooooo

[@gengxinhe2184]

amazing!

[@vinit_poojary]

can i add it from right side

[@SandyGajmal]

Which soft is used sir

[@reno3502]

how do we create another page, for example messages page, and menu will be highlighted, thanks

[@dfordemo981]

which is the plugin you have used for the lines, indent lines that show the tree

[@techieblossom]

It's from Flutter plugin . Got it automatically long back

[@gauravpatil1867]

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

[@techieblossom]

Emulator.

[@rajeeshadiyodi7693]

Good

[@farkhamlove]

What you using IDE?

[@techieblossom]

IntelliJ

[@udhayakumart]

✌🏼

[@danianiazi8229]

Flutter beginners tutorial please

[@ezeaguprincewill7005]

@ Techie Blossom we still waiting on the navigation handling of this type of menu

[@techieblossom]

I hope you have seen my latest video now? For navigation

[@ezeaguprincewill7005]

Techie Blossom yeah I did😁

[@ngonidzashemaphosa6749]

hey please send link on info on how to navigate between pages

[@PrateekSharma1712]

kzbin.info/www/bejne/rGOQd2mkbMSakKM

[@anonnym1000]

Name of text editor?

[@mausamrayamajhi]

one help ..previously i used to get hint like for decoration = BoxDecoratoin ...now i do not get any hint Container( decoration: , ); any help ?

[@androidleeno7172]

Expectation: 0:15 Reality: 36:08

[@ramonpaolomaran2253]

lol

[@CrossHair001]

lol

[@AjiboyeTemitopeTayor]

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.

[@techieblossom]

Sure. After some hours about 8 hours or so.

[@jimmyfmedina]

Excelent example, good effect of animation, thanks!

[@techieblossom]

Please check the description now.

[@jimmyfmedina]

@@techieblossom thanks!

[@jaipuropalking5318]

13:10 I Write Correct Code But When I Type SetState I Am Getting Error

[@techieblossom]

Show the code and error please..

[@cyberneticscore41]

maybe S for Set using the lowercase, then it should be setState

[@sedatgulmen.developer]

@protected void setState ( VoidCallback fn ) add

[@joseangelbautistar.44]

Be sure that it’s a StateFull widget

[@dpatel2747]

Also make backend tutorial

[@dyaa_unison5580]

how am i able to call the menu on another page?

[@anthonydiana2308]

I'm trying to do that, I followed this tutorial kzbin.info/www/bejne/aITNp5t3irdsl9k. 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

[@poojithchowdary1206]

SetState() not able to get it why bro ?

[@techieblossom]

Are you not using in class that extends state class

[@poojithchowdary1206]

@@techieblossom yes bro I used

[@poojithchowdary1206]

But not able to get it

[@andrealbernaz]

the listview dont return scroll

[@VIKASSHARMA-ey4ob]

animation effect doesnot work

[@techieblossom]

Can you elaborate more?

[@manasrane4776]

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

[@techieblossom]

Not made an app. Its not there is play store I believe, you are talking about sidebar video

[@manasrane4776]

@@techieblossom yes about sidebar video. The app that manages cards. I loved the UI of that app. So beautifully designed.

[@PrateekSharma1712]

I have not made the app complete, just a concept mocked in Flutter

[@ramonpaolomaran2253]

@@manasrane4776 make your app.

[@AyushDhengre-ps2dy]

Bhai is me menu board nahi he

[@techieblossom]

Meaning? Side menu is there and dashboard page is there. Dashboard page can have anything.

[@alexrendon7091]

Como me puedo comunicar contigo?

[@techieblossom]

Via email and in English language

[@alexrendon7091]

@@techieblossom Hi bro, what's your gamil to communicate with you? Greetings blessings

[@techieblossom]

You can go to the website and contact me via contact form

[@techieblossom]

You can go to the website and contact me via contact form

[@sagarphalke4674]

Make for android java ,for the same design

[@monotone5402]

17:09

[@Shiva-sx4pr]

Is adobe xd dead?

[@monialex3874]

Android studio

[@meow-lily]

You're instagram please?

[@techieblossom]

I don't use it.

[@flocco2542]

19 dollars for a fucking coffee?

[@techieblossom]

Where is that?