Complex Responsive Drawer Designed In Flutter With Animation For Beginners #FlutterShip 17

Responsive Side Navigation Bar in Flutter Dart | Dashboard Sidebar Menu
In this video, I've created a Responsive Side Navigation Bar in Flutter Dart. I hope you will like this Dashboard Sidebar Menu Design.
Source code of the design in available on github.

Chapters:
0:00 Result Preview
0:28 Explanation for beginners
2:20 Speed Code Basic Scaffold
3:06 Creating the Drawer
3:38 Creating class for ease of understanding
7:39 Shrined Drawer section Completed
11:06 Working on Expanded Drawer Menu
15:39 Wrapping the list to column
15:57 Rechecking the output

Design Credits: CodingLab

#flutter #flutterShip #android #ios

Queries related to this video:
responsive side navbar,
responsive side navigation bar in flutter,
responsive side navigation bar,
responsive sidebar navigation menu using flutter dart,
dashboard sidebar menu in flutter,
dashboard side bar menu in flutter,
responsive sidebar menu in flutter,
side bar flutter sidebar
flutter drawer navigation
flutter drawer tutorial
flutter drawer widget
flutter drawer animation
flutter drawer ui
flutter drawer design
flutter drawer without appbar
flutter drawer menu
flutter drawer always open
flutter drawer appbar
flutter drawer and back button
flutter drawer all pages
flutter drawer alignment
flutter drawer avatar
flutter drawer auto close
flutter drawer background color
flutter drawer background image
flutter drawer bottom
flutter drawer border radius
flutter drawer button
flutter drawer below appbar
flutter drawer back button
flutter drawer bloc
flutter drawer custom
flutter drawer color
flutter drawer custom icon
flutter drawer class
flutter drawer close
flutter drawer close event
flutter drawer controller
flutter drawer change page
flutter drawer disable swipe
flutter drawer divider
flutter drawer dropdown
flutter drawer decoration
flutter drawer direction
dynamic drawer flutter
flutter drawer example
flutter drawer elevation
flutter drawer expandablelistview
flutter app drawer example
drawer en flutter
flutter drawer from bottom
flutter drawer footer
flutter drawer from right
flutter drawer full width
flutter drawer full screen
flutter drawer from top
flutter drawer fixed
flutter navigation drawer with fragments
flutter drawer github
flutter drawer gradient
flutter getx drawer
flutter drawer header
flutter drawer header example
flutter drawer header profile
flutter drawer header color
flutter drawer header width
flutter drawer highlight
flutter drawer hide
flutter drawer header decoration
flutter drawer icon change
flutter drawer icon color change
flutter drawer icon not showing
flutter drawer in appbar
flutter drawer icon animation
flutter drawer icon padding
flutter drawer key
flutter drawer listview
flutter drawer layout
flutter drawer logout
flutter drawer listview builder
flutter drawer listtile
flutter drawer listener
flutter drawer menu animation
flutter drawer menu example
flutter drawer menu icon
flutter drawer menu color
flutter drawer menu right
multilevel drawer flutter
flutter drawer navigation example
flutter drawer not showing
flutter drawer navigation push
flutter drawer not opening
flutter drawer not working
flutter drawer navigation 2.0
flutter drawer no overlay widget found
flutter drawer on right side
flutter drawer open
flutter drawer open by default
flutter drawer open event
flutter drawer ontap
flutter drawer opacity
flutter drawer on every page
flutter drawer overlay color
flutter drawer pop
flutter drawer package
flutter drawer push content
flutter drawer position
flutter drawer pub
flutter drawer profile
flutter drawer padding
flutter drawer plugin
flutter drawer right side
flutter drawer routes
flutter drawer refresh
flutter drawer responsive
flutter drawer rounded corners
flutter drawer submenu
flutter drawer style
flutter drawer scrollable
flutter drawer status bar color
flutter drawer selected item
flutter drawer shadow
flutter drawer slide
flutter drawer stack overflow
flutter drawer theme
flutter drawer transition
flutter drawer transparent
flutter drawer useraccountsdrawerheader
flutter drawer under appbar
flutter drawer ui github
drawer using flutter
flutter drawer width
flutter drawer without scaffold
flutter drawer web
flutter drawer with icon
flutter drawer with submenu
flutter drawer with routes
flutter zoom drawer
3d drawer flutter

[rehanmir]

WROST CODE STRUCTURE I HAVE SEEN IN MY ENTIRE CAREER. YOU WROTE 300 LINES CODE TO CREATE THIS NAV BAR.
I just wanted to create a side nav bar, and I saw the first few minutes. I saw output was good, and then tried to copy his stuff, but he has made each and every widget separately. Even for a simple TEXT().
Good Luck to all those who came here to copy

[victorsenna]

Please, how Could I put routes with this layout? I tried to do this, it was a little confusing for me because I'm a beginner and brazilian, So understand some concepts are changelling. if you could, do a video please about this layout with navigation

[vishnumk]

can you pls tell me how to implement navigation to each page when clicked on menu item
, coz I didn't understand how to add routing plus

[FlutterShipp]

First let me respect Swastik Jain S and others who were asking for a voice over,
I'm unable to give voice for longer times due to the vehicle noise around me.

Any how, I'm going to explain you the core blocks of this video.

The drawer is basically a Row with 2 children:
Left one is the black Icon menu
Right one is the invisible submenu,
this indivisible submenu will look like a popup menu.

Okay the left side black icons bar has three sections:

1) Control button
2) List of icons
3) Account button
Control button helps you to expand or shrink the drawer.
List of icons, are clickable.
Account button is just indicating your current avatar picture.

Initially the drawer will be on shanked state, at that time when you press any icon,
that will open a submenu.
if no submenus are available, then you will not see any popups

When you press the Control button, i.e. the flutter logo, this will expand the drawer to
the maximum width.
All the icons will become Expansion Tiles().
If there are any submenus given, then it will expand the children.

Now the control button is replaced with control Tile,
as like that, account button is replaced with account Tile,

let us see the basics of Invisible submenu.
This will only show, when the drawer is shrined, otherwise it will not be used.
We are actually specifying the height of each icons in the black icon bar to 45 pixels.
So by that we are returning an empty container in the right side to just make it equally
placed.
When you click on an icon, the selected index will be stored here.
This helps us to adjust the height of submenu.
When the index are same, the submenu's height will be set to 125 otherwise it will
become 0.

I hate animated builders, complex animation controllers...etc.
So just managing everything with Animated Container().
But If you are a big fan of Animations, you can implement your magical skills.

Hope you understand the basics, Now you can start watching the full code with an 8x speed.
Have a great day

[SullyS]

Thank you for the amazing video, but how can I keep the side menu while showing the main page of each menu? For example, the home page and the menu are still showing with all the categories? Thank in advance

[shashanksm]

Great video brother..keep it up..and make similar videos on UI helps a lot

[SullyS]

How can I keep the drawer visible as soon as I open the app, I just want the expanded animation without making the drawer invisible? In a Web page

[Techwithace]

i just joined the flutter community... pls how can i add button to the the items in the side navigariion bar

[SullyS]

Hi
I really need help regarding the navigation using routing, I finally did it but I have problem that I get error as soon as I run the app saying index is set to -1 not 0 and if I set the index to 0 the app run but the drawer doesn't work, how can I solve this issue!! PLEASE if anyone ca help me with it I really need it to work urgently

[mirohidali]

HomePage.dart file there is returning Searchbar, and it is showing unused function, what should I do ??

[EduardoGomezCataplash]

CDM() and another class you use where they are? there is'nt context of that objects

[MrEvanrich]

tried with latest flutter, throws tons of errors. Tried to strip it down to just the complex drawerpage, got it working except when you click the row "complex row page" instead of the menu bar on the left, you just thet the icon sliding up from the bottom of the screen (debugging in chrome).

[lokkeshss]

If you explain the code it will be useful for beginners like me