No video
Flutter Tutorial - Navigation Drawer Animation | Sidebar Animation & Hidden Drawer Animation
Рет қаралды 39,486
Күн бұрынCreate a Flutter Navigation Drawer Animation that is displayed as a Sidebar Menu with animation within your Flutter app.
Click here to Subscribe to Johannes Milke: kzfaq.info...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/navi...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/#/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
Navigation Drawer WITH Routing Tutorial: • Flutter Tutorial - Sid...
Hidden Drawer WITHOUT Package Tutorial: • Flutter Tutorial - Hid...
Collapsible Navigation Drawer Tutorial: • Flutter Tutorial - Col...
Selectable Sidebar Menu Tutorial: • Flutter Tutorial - Sel...
TabBar Tutorial: • Flutter Tutorial - Cre...
Handle Back Button Pressed Tutorial: • Flutter Tutorial - Han...
Settings Menu Tutorial: • Flutter Tutorial - Dyn...
Snapping Bottom Sheet Tutorial: • Flutter Tutorial - Sna...
Local Push Notifications Tutorial: • Flutter Tutorial - Loc...
In App Purchases Tutorial: • Flutter Tutorial - In ...
Send Email In Background Tutorial: • Flutter Tutorial - How...
Page Transition Animation Tutorial: • Flutter Tutorial - Pag...
Settings Page UI Tutorial: • Flutter Tutorial - App...
Publish Flutter App On PlayStore Tutorial: • Flutter Tutorial - How...
TIMELINE
0:00 Introduction Navigation Drawer Animation
0:15 Create Navigation Drawer Animation
1:53 Create Items In Navigation Drawer
3:59 Navigate Between Menu Items In Navigation Drawer
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
LEARN MORE
SOURCE CODE | github.com/JohannesMilke
ARTICLES | / johannesmilke
PLAYLISTS
All Flutter Videos | • Flutter Tutorial - Flu...
Widgets - Flutter | • Flutter Tutorial - Flu...
Plugins - Flutter | • Flutter Tutorial - Flu...
Animations - Flutter | • Flutter Tutorial - Tra...
Designs - Flutter | • Flutter Tutorial - Flu...
Firebase - Flutter | • Flutter Tutorial - Pag...
State Management - Flutter | • Flutter Tutorial - Riv...
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)
bit.ly/JohannesMilke
@HeyFlutter 2 жыл бұрын
This might help you :) 👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com Source Code: github.com/JohannesMilke/navigation_drawer_animation Navigation Drawer WITH Routing Tutorial: kzfaq.info/get/bejne/qtlpoZViltSciok.html Hidden Drawer WITHOUT Package Tutorial: kzfaq.info/get/bejne/rMBnqcd-1NGdaJs.html Collapsible Navigation Drawer Tutorial: kzfaq.info/get/bejne/m7ppqreXm66qg2w.html Selectable Sidebar Menu Tutorial: kzfaq.info/get/bejne/frqZbNqnrq2VnH0.html TabBar Tutorial: kzfaq.info/get/bejne/bt5ihtaXmrXcgWg.html Handle Back Button Pressed Tutorial: kzfaq.info/get/bejne/rKudfa-nsZfUqoU.html Settings Menu Tutorial: kzfaq.info/get/bejne/gM2Xh6Wj27zWm2w.html Snapping Bottom Sheet Tutorial: kzfaq.info/get/bejne/aJikftl0z9SXnYk.html Local Push Notifications Tutorial: kzfaq.info/get/bejne/mLipaMee2dmXiGw.html In App Purchases Tutorial: kzfaq.info/get/bejne/npOagrCZl7G8hHU.html Send Email In Background Tutorial: kzfaq.info/get/bejne/b66HZrCLxNrXlKM.html Page Transition Animation Tutorial: kzfaq.info/get/bejne/lbhjeMKS1MyaaZc.html Settings Page UI Tutorial: kzfaq.info/get/bejne/pr-BdMujvsW3gXU.html Publish Flutter App On PlayStore Tutorial: kzfaq.info/get/bejne/nZZ3gdigqLXYkYU.html
@user-rq3nk7xm1s 2 жыл бұрын
Thank you very much, how nice you are, like your beautiful explanation. Greetings to you from the Arab world
@santiagocuervomartin7925 2 жыл бұрын
Best flutter content channel!
@nested9301 2 жыл бұрын
wow nice package and nice tutorial as always =)
@rasharun5683 2 жыл бұрын
great tutorial. Thank you
@hashankannangara8723 2 жыл бұрын
Wow, nice package thanks for the video ❤️
@marcelocruzrpa Жыл бұрын
Great tutorial Milke, thank you so much! :))
@HeyFlutter Жыл бұрын
You are welcome, Marcelo Cruz 😊
@ismail1868 2 жыл бұрын
Legendary 🔥
@sportKO12 2 жыл бұрын
Respect !
@eNONO-ot4zh 2 жыл бұрын
Nice vidéo 👍
@atuljitiwari4189 2 жыл бұрын
Great content
@vinothkumarm9066 2 жыл бұрын
Nice package thank you
@masum_pori 2 жыл бұрын
Danke :)
@pragnabhatt9531 Жыл бұрын
Thank you!!
@HeyFlutter Жыл бұрын
You are welcome, Pragna Bhatt!
@dicksonguinajnr1449 2 жыл бұрын
Thank you so much my brother..
@dicksonguinajnr1449 2 жыл бұрын
@@HeyFlutter your welcome my brother.
@somebodyoulove 2 жыл бұрын
Nice tutorial. Once again. Please I await your tutorial on persistent bottom navigation bar: making bottom navigation appear in every screen.
@somebodyoulove 2 жыл бұрын
@@HeyFlutter thank you
@ahsankhan1724 2 жыл бұрын
How can I add SVG icons instead of flutter icons when I add SVG with const it does not allow me when i remove const keyword i gives error on switch statement (Case expressions must be constant.)this. kindly help me what i can do.
@afaqmazhar5703 Жыл бұрын
nice work
@HeyFlutter Жыл бұрын
Thank you, @afaqmazhar5703! 🙂
@hamiltondarryl3129 2 жыл бұрын
I have a problem with the drawer, when I am on an internal page that is not accessible from the drawer and I return to the main menu. the drawer no longer works, what can I do?
@elgardaelmehdi9053 2 жыл бұрын
great video (y) can i control the height of mainmenu when the drawer is open ?
@elgardaelmehdi9053 2 жыл бұрын
@@HeyFlutter how ? can you send me the code 😃
@bladycivilian 2 жыл бұрын
what if its a WebView based app and switch is required between different URLs. what should in "return" then
@HeyFlutter 2 жыл бұрын
Thank You Hassan Sultan! Follow this link: pub.dev/packages/webview_flutter I hope you will get your answer 🙂
@infobhai6207 Жыл бұрын
its giving error on setState setState(() => currentItem = item); saying The method 'setState' isn't defined for the type 'MyApp'. Try correcting the name to the name of an existing method, or defining a method named 'setState'.
@HeyFlutter Жыл бұрын
Thank You @infobhai6207! Follow this link: stackoverflow.com/questions/49597189/the-method-setstate-isnt-defined-for-the-class-myapp-error-in-flutter I hope you will get your answer 🙂
@richardappow6770 10 ай бұрын
what video recorder did you use?
@officialismailshah 2 жыл бұрын
background music is thrilling....
@jounisjoun5942 Жыл бұрын
Hi thanks for the great video but i got some issues ...the mainScreen appears behind the menuScreen...can you help
@HeyFlutter Жыл бұрын
Thank You Jounis Joun! Follow this link: stackoverflow.com/questions/51659805/persisting-appbar-drawer-across-all-pages-flutter I hope you will get your answer 🙂
@GreenGhana Жыл бұрын
Thanks so much for this tutorial. Although I have a slight challenge. The background color of my menu page does not show the full scaffold color. The page is halfway black after the menu button has been tapped on. Pls help me out
@HeyFlutter Жыл бұрын
Thank you @user-rt4rs6py4o, make sure to follow the tutorial step by step 🙂
@aurelienmas5103 8 ай бұрын
@@HeyFlutterutiliser menuBackgroundColor
@lme4339 2 жыл бұрын
Dieses Menü finde ich großartig! 👏 tolles Video! Ich frage mich, wie man dieses Menü responsive auch für Tablet und Web machen könnte… hast du da eine Idee? Was ich mich auch frage: wie könnte man denn WordPress als backend in Verbindung mit flutter nutzen? Wäre doch cool als responsive Blog App. 🤔 aber ist nur so eine Idee.
@lme4339 2 жыл бұрын
@@HeyFlutter Dankeschön! Aber klappt das auch mit diesen Karten? 🤔 denn diese Animation finde ich echt toll.
@HeyFlutter 2 жыл бұрын
Thanks, L Me! 🙂 Learn more about creating a responsive navigation drawer here: kzfaq.info/get/bejne/m7ppqreXm66qg2w.html
@wizardingstudios 2 жыл бұрын
Hi Mike, wonderful work. Please, how can I insert separators?
@wizardingstudios 2 жыл бұрын
@@HeyFlutter Many thanks!
@HeyFlutter 2 жыл бұрын
Thank You Wizarding Studios! Follow this link: medium.com/flutter-community/flutter-adding-separator-in-listview-c501fe568c76 I hope you will get your answer 🙂
@rashidkhan1845 2 жыл бұрын
Null check operator used on a null value!!!!!! Sir please solve this doubt I dont want solution from stackoverflow ...pleaee tell me the exact change to do
@HeyFlutter 2 жыл бұрын
Thank you, Rashid khan! 🙂. Some of the values that you are getting are null, so in null safety they gave that exception, you have to find out those null values variables
@syedmuhammadali784 2 жыл бұрын
sir, I need your help. I am following your video and I am facing a Toggle Exception error on the 1st screen please help me. Then I complete the code for my project. I am waiting for your answer.......??????? "Thank you"
@syedmuhammadali784 2 жыл бұрын
@@HeyFlutter Error: Exception has occurred. NoSuchMethodError (NoSuchMethodError: The method 'toggle' was called on null. Receiver: null Tried calling: toggle()) First screen code: code: import 'package:flutter/material.dart'; import 'package:flutter_zoom_drawer/flutter_zoom_drawer.dart'; class MenuWidget extends StatefulWidget { const MenuWidget({Key key}) : super(key: key); @override _MenuWidgetState createState() => _MenuWidgetState(); } class _MenuWidgetState extends State { @override Widget build(BuildContext context) => IconButton( onPressed: () => ZoomDrawer.of(context).toggle(), icon: Icon(Icons.menu), ); }
@doulainc.498 2 жыл бұрын
hey MR. Johannes MIKE. why did u have to create a class for the items. when u can just return them in the list, i am learning, tell me please
@HeyFlutter 2 жыл бұрын
Thank you, Doula Inc.! 🙂. It is a good practice to create for items.
@sherazkhan_1044 Жыл бұрын
sir i got an issue "case expression must be constant in switch statment in flutter" in switch code portion please sir help me
@HeyFlutter Жыл бұрын
Thank You Sherazkhan _104! Follow this link: stackoverflow.com/questions/57087666/dart-switch-statement-case-expressions-must-be-constant I hope you will get your answer 🙂
@buracadorin 2 жыл бұрын
Great tutorial Milke, can you make part 2 of this tutorial using MaterialRoute Navigation? It Will be much appreciated by us, it's amazing but not support routing :( Thanks in advance! P.S: Also how can we make the menu list items to be scrollable? Thanks!
@soylucario19 Жыл бұрын
is easy to implement
@buracadorin Жыл бұрын
@@soylucario19 yes I know, 1 year ago I was n00b..thanks!
@RadioLearningEnglish 2 жыл бұрын
how can I get your source code? the source code you provide was remove. and the video was too fast, I can't follow it and can't understand how it works.
@HeyFlutter 2 жыл бұрын
Thank you, Radio Learning English The best way to reach me is via Twitter: twitter.com/JohannesMilke
@kamalCode 2 жыл бұрын
Flutter MVVM DESIGN PATTERNS EXPLAIN
@alybauomy735 2 жыл бұрын
good job bro , but when i go anther page and pack home page prees menu it didn't work (if i mack hot restart it work !!)
@alybauomy735 2 жыл бұрын
@@HeyFlutter i have 6 page in my app how can i insert the zoom drawer in all pages ?
@alybauomy735 2 жыл бұрын
@Johannes Milke i have 6 page in my app how can i insert the zoom drawer in all pages ?
@abc867 2 жыл бұрын
Hello Sir, I have a issue in flutter than when navigating from one page to another i get an error message telling that Null check operator used on a null value. How to solve it?
@abc867 2 жыл бұрын
@@HeyFlutter thanks😀
@bohidorshon 2 жыл бұрын
@@HeyFlutter Still the same error! Please let us know how to navigate from one page to another in this app.
@HeyFlutter 2 жыл бұрын
Hello, Abc! Follow this link: stackoverflow.com/questions/64278595/null-check-operator-used-on-a-null-value, I hope it will solve your problem. Thank You 🙂
@dayqinyanjui613 2 жыл бұрын
Nice tutorials, but why don't you open source your KZfaq codes
@HeyFlutter 2 жыл бұрын
Thank You Day Qinyanjui!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware
@Osama-Dev- 2 жыл бұрын
can't access to the source code , I sent request but when I click access it give me error 404
@HeyFlutter 2 жыл бұрын
Thanks, Standard - Indie Dev! 🙂 Learn more about it here: github.com/JohannesMilke/sponsorware#2-why-didnt-i-get-an-email-even-if-i-have-sent-already-a-request-on-your-website
@ahmadsalem5418 2 жыл бұрын
how can make this drawer i right side ?? because i need to make it in right when i make app with Arabic language
@Josmiii 2 жыл бұрын
ZoomDrawer has a property called isRtl :')
@ahmadsalem5418 2 жыл бұрын
@@Josmiii AND HAS ANGLE=-10
@e-same6094 Жыл бұрын
The method 'toggle' was called on null. Receiver: null Tried calling: toggle()
@e-same6094 Жыл бұрын
it's because i used it in same widget not ancestor's widget🙃
@HeyFlutter Жыл бұрын
Hello, e-SAME! Follow this link: stackoverflow.com/questions/58126783/the-method-call-was-called-on-null-receiver-null I hope it will solve your problem. Thank You 🙂
@sagarmoriya9773 2 жыл бұрын
why selectedTilecolor isn't working in my case
@HeyFlutter 2 жыл бұрын
Hello, Sagar Moriya! Follow this link: stackoverflow.com/questions/49331612/change-background-color-of-listtile-upon-selection-in-flutter, I hope it will solve your problem. Thank You 🙂
@dev.faizan 2 жыл бұрын
😉💞
@iqaiserhussain Жыл бұрын
Dear Johannes, I am not receiving emails to get access to your code. Though you have done a great job as always.
@HeyFlutter Жыл бұрын
Thanks, Qaiser Hussain! 🙂 Learn more about it here: github.com/JohannesMilke/sponsorware#2-why-didnt-i-get-an-email-even-if-i-have-sent-already-a-request-on-your-website
@iqaiserhussain Жыл бұрын
@@HeyFlutter Dear, I tried multiple attempts for days and waited for email and searched it everywhere in my inbox but found nothing. It's frustrating.
@iqaiserhussain Жыл бұрын
@@HeyFlutter Hey, This issue of email is still not resolved. Kindly have a look at it.
@harneetsinghchanna 10 ай бұрын
My menu page is showing half screen black after toggle
@HeyFlutter 10 ай бұрын
Thank you @harneetsinghchanna, make sure to follow the tutorial step by step 🙂
@harneetsinghchanna 10 ай бұрын
@@HeyFlutterwhen you click on the menu button your screen slides and the menu page appears... And the indigo color can be seen as the background even behind the half main screen that is slided.. but in my case the indigo colour is seen only on half screen and the screen that is behind the slided screen is black ... I guess it's the style of the updated zoom drawer .. but I want to show it like you are showing it
@harneetsinghchanna 10 ай бұрын
@@HeyFlutter also how can I add drop down in one of the menu items..for eg. If I click on payment it gives 3 more option.. in drop down form
@e-same6094 Жыл бұрын
hi sometime i have this error
@HeyFlutter Жыл бұрын
Hello, e-SAME! Follow this link: stackoverflow.com/questions/58126783/the-method-call-was-called-on-null-receiver-null I hope it will solve your problem. Thank You 🙂
@henrymettle3655 2 жыл бұрын
Source code please
@faizalmansor3427 2 жыл бұрын
It's in the description
@HeyFlutter 2 жыл бұрын
Thanks, Henry Mettle! 🙂 Learn more about it here: github.com/JohannesMilke/sponsorware#1-why-is-the-source-code-not-available-on-github
@Sebastian-hv7jz Жыл бұрын
Code needs to be updated. There have been changes and not everything works like it used to 1 year ago. Another example is a WebView 4.0.0. Nothing works with WebView like your videos show any more.
@anjankumarka9433 2 жыл бұрын
wow nic bro its help my flutter project but there is no ful code here what we do bro? this code is most important to me 😊 but when I get in github it ask ammount 😭😭 im poor person so bro public this video.🙏🙏🙏🙏this code is most important to me so please bro...
@anjankumarka9433 2 жыл бұрын
@@HeyFlutter s bro i see there but it ask ammount ...😔🥲
@jesa5333 2 жыл бұрын
u r done this code right?
HeyFlutter․com
Рет қаралды 67 М.
QAZSPORT TV / ҚАЗСПОРТ TV
Рет қаралды 571 М.
HeyFlutter․com
Рет қаралды 74 М.