Thanks. See 27:42 for making it a sidebar (move from scaffold drawer: to a stack). Make sure to check accessibility (Semantics) with a screen reader when you do this.
Thanks for the tutorial men, i like the way that you explain the things. I'm a begginer in these framework and with this video i understand more things about dart and flutter
Thank you!! This is exactly what I wanted! I changed the tiles works with the animated icons, so now my collapssing button has text! Flutter is amazing I've come to like it.
I dont mean to be offtopic but does anybody know of a trick to log back into an instagram account?? I somehow forgot my login password. I would love any tricks you can offer me.
@Jamie Matthias Thanks so much for your reply. I got to the site through google and im in the hacking process atm. Looks like it's gonna take a while so I will reply here later when my account password hopefully is recovered.
Thanks amazing video. All of people asked Bloc videos. Yes if you can will be fine , You can do full app series ( like fly app but little bit complex) How we can use Bloc , How we can get data from api and use it every page with bloc pattern. Another seris must be with animations. You can create custom slider with animation.
for those who want the icons to make actions here is a snippet of code that helps you to do that: Expanded( child: ListView.separated( itemBuilder: (context, counter) { return CollapsingListTile( title: navigationItems[counter].title, icon: navigationItems[counter].icon, animationController: _animationController, isSelected: currentSelectedIndex == counter, OnTap: () { setState(() { currentSelectedIndex = counter; // new added code : // the first if condition used to make the first icon clickable and so on for every added if condition if (currentSelectedIndex == 0) { Navigator.push( context, MaterialPageRoute(builder: (context) => Page1()), ); } if (currentSelectedIndex == 1) { Navigator.push( context, MaterialPageRoute(builder: (context) => Page2()), );
@@luismiguelmantilla2147 thank you ,thank you thank you very much.... you have helped me so much . I'm doing something like this for my final year project. thank you
You can access the "collapsing_list_tile_widget" file, that class is "CollapsingListTile" and, on initState, reverse widthAnimation begin->end and sizedBoxAnimation too. It's work fine to me =)
Hi..I am facing little problem, not regarding this video, this working perfectly with me, and thanks for uploading such a informative video. The Problem I ma facing might be easy with you, but it tool my 4 days. I have images for Facebook + twitter + instagram. OnTap it should ope Facebook App installed in mobile and get the page link which I coded.... I dont want any FB login screen or web view or open in browser, just open it in App. If you or any one can help me, I indeed....Thanks
I think you can do it in "collapsing_navigation_drawer.dart" Line 56. Only write your code with "if-else" selecting different options for each row, using the "counter" . 0 : Dashboard 1: Errors, etc.
I'll go with the people screaming about BLoC. Please make a tutorial about how to use bloc pattern with API (or mockedAPI, it's up to you really), and show how to create a Navigation Drawer based on the data received from the API. I've been experimenting with it, but it seems like the Drawer would not redraw after the data is received. So, it's always empty. You should keep up with you tutorials! Thanks
I think your answer lies in this video ruclips.net/video/S2KmxzgsTwk/видео.html If you use Bloc pattern, there is no way your drawer will not update whenever there is a response from API. Let me know, if that doesn't work
@@techieblossom Hey, thank you for reply! I've just subscribed to your channel because I think your contents are really nice and different from others! I have tried fixing my problem and it's fixed now, but I'm not sure if it's the best way to do it. If you have time to read this, then I'll be more than happy to hear your opinion for my approach. If not, then just keep making awesome videos :D. So, basically I have a page with an InheritedWidget. Inside it is a Scaffold widget and a drawer inside the Scaffold. I am calling a webservice right away when the page is showing and the response will be shown as a header on the drawer. From most of the bloc tutorials that I've seen, they are triggering/calling the bloc's method (that will call the API) from a user action (clicks, taps, etc). So I was confused of where to call the bloc's method inside the widget without any user action/trigger. at first I put it inside the build method of the widget, not working. Then I moved it to the initstate, but it's giving me errors. Then I ended up with using Future.delayed inside the build method, it calls the API, it updates the variable that holds the data using setState, and then the ui will update. But I feel like, this is not the right way to do it. I feel like I actually don't even need a bloc to make something like this, because I thought, when I use bloc and inheritedWidget, I wouldn't need to call the setState anymore to rebuild the whole widget tree. What do you think? Flutter is really new to me and at times it can get so frustrating dealing with simple things like this. lol
Bloc constructor is the way to go here. Make api calls in the Bloc constructor. Use the instantiated Bloc by Blocprovider.of. yes don't use setstate of using Bloc. And it's not about how small or big the functionality is, it's about how easy it is to maintain ur code. Could u put your code on git and paste the link here. I will understand and try to emulate similar use case.. I have understood ur case Thanks for subscribing
@@techieblossom gist.github.com/tyegah/ecd58d0539526becae4bd9a9b0c67f1b that's the gist for my codes. I've tried your suggestion by moving the API call to Bloc constructor, it gives me the same blank UI. it's not updating. Please guide me to the right path. lol.
Thanks for making the plugin of collapsible navigation drawer. I have used this but i want to change the content of navigation item. How can i add my custom navigation items (i.e. title, icon and onTap) using the package (custom_navigation_drawer 0.0.1 ).
@@techieblossom As most of the people will, I want to integrate firebase to my app. But I don't want to have firebase calls made from the UI. Bloc is perfect for this. However instead of using naked stream/sinks I think we should use flutter_bloc which is maintained by google. It has much more capabilities. Maybe you can write a simple cloud function that runs periodically and show how to connect UI and bloc that listens to it:) just an idea. there is no example like that for flutter
Sir, Thanks for great example. I want to do one more thing. I've made TabBarList & this Sidebar widget (exactly same with on your video) is a part of the tabBarList. whenever I click some of the tabBarList (changing page), selectedColor that I set is blowed out. how could I save the State...?
I did it !!!! yay!!!!! the solution was : List. I built ListView's itembuilder by using the List type's list. and whenever onTap event is on, it checks bool type ! I'm so glad .....loool
Keep 3rd state variable other than open, close. You can use Enum. Can play with the width of sidebar to achieve this. I have explained in the video how you can alternatively use it as drawer which will be closed by default.
You can access the "collapsing_list_tile_widget" file, that class is "CollapsingListTile" and, on initState, reverse widthAnimation begin->end and sizedBoxAnimation too. It's work fine to me =)
I created the navigation drawer and used blocProvider for navigation, now I want to provide state to one of the pages that uses NavigationStates using pragmatic state management. How do I do it, any guidance would be much appreciated :)
hi bro i want to close my drawer from outside of the drawer widget pragmatically . I opened the drawer using _scaffoldkey.currentState.openDrawer , is there is any similar way to close the drawer ...???? if anyone knows the answer please help . Thanks in advance.
hey Techie thanks a lot for this video, I am using this for my Flutter Web Application. I am new into flutter so will you please tell me how to fixed at the vertical position and use this drawer without appbar and It should not overlay the entire page.
@@techieblossom ive tried and it did not work, when i use the if-else on the navigator_drawer.dart how do i write it becuase this is what i did and it isint working if (counter = 0) { return MyBNav(); } Thanks for your help Appricieted.
@@techieblossom I have done all the steps with you step by step in the video. I just started learning Flutter. I assume that I have to change the bool value to make the initial state of the sidebar collapsed. Please correct me if I'm wrong.
plz work on wallpaper app parts because no one had done that on flutter even i can get help to make an wallpaper app plz dude make videos on wallpaper app
Use it as a drawer as explained in the video. Or checkout the commented code here - github.com/PrateekSharma1712/custom_navigation_drawer/blob/master/example/main.dart
Thanks a lot! This is exactly what I wanted. That Stack trick was what I was looking for 😊
Thanks. See 27:42 for making it a sidebar (move from scaffold drawer: to a stack). Make sure to check accessibility (Semantics) with a screen reader when you do this.
Yes many has to learn bloc pattern start as fast as u can from scratch will be loving it
Could you please specify, what are your questions.. regarding Bloc. It will be helpful to create videos around that.
Thank you! this worked for me! You're a legend for sharing this to begginers!
Very well done. Thanks for your effort in making and sharing.
Thanks for the tutorial men, i like the way that you explain the things. I'm a begginer in these framework and with this video i understand more things about dart and flutter
Glad to hear that. Thanks
Great content. I'm just starting to learn flutter. Very helpful!
Thank you!! This is exactly what I wanted!
I changed the tiles works with the animated icons, so now my collapssing button has text!
Flutter is amazing I've come to like it.
I dont mean to be offtopic but does anybody know of a trick to log back into an instagram account??
I somehow forgot my login password. I would love any tricks you can offer me.
@Hayden Harley instablaster :)
@Jamie Matthias Thanks so much for your reply. I got to the site through google and im in the hacking process atm.
Looks like it's gonna take a while so I will reply here later when my account password hopefully is recovered.
@Jamie Matthias It did the trick and I actually got access to my account again. Im so happy!
Thank you so much you saved my ass !
@Hayden Harley Glad I could help :)
Thanks amazing video. All of people asked Bloc videos. Yes if you can will be fine , You can do full app series ( like fly app but little bit complex) How we can use Bloc , How we can get data from api and use it every page with bloc pattern.
Another seris must be with animations. You can create custom slider with animation.
Yes, I also agree with @Yasin. That will be amazing.
thanks a lot mate.. explainations are simple... and you helped me to build what I had in mind. Something similar to vscode actitivity bar..
for those who want the icons to make actions here is a snippet of code that helps you to do that:
Expanded(
child: ListView.separated(
itemBuilder: (context, counter) {
return CollapsingListTile(
title: navigationItems[counter].title,
icon: navigationItems[counter].icon,
animationController: _animationController,
isSelected: currentSelectedIndex == counter,
OnTap: () {
setState(() {
currentSelectedIndex = counter;
// new added code :
// the first if condition used to make the first icon clickable and so on for every added if condition
if (currentSelectedIndex == 0) {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Page1()),
);
}
if (currentSelectedIndex == 1) {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Page2()),
);
Another master piece
With beautiful explanation
Awasome
thanks ,plz, Can you tell me where I can make Navigation for each button in drawer ex: navigate to another page
@@luismiguelmantilla2147 thank you ,thank you thank you very much.... you have helped me so much . I'm doing something like this for my final year project. thank you
wish this covered how to make the rest of the body resize based on the width of the drawer.
Looks great. Just want to point out that this is now possible with NavigationRail out of the box with Flutter.
Probably Yes. I did this 14 months back. Thanks.
Just suscribed! keep going with this videos about flutter, they are very helpful and you too! Thank you very much!
excellent !!!, next please add sub menu or multi level menus please. thanks
Awesome
Loved it . thanks bro. Keep it up
great video man.. just want to know how we can change different screens when we tap on items in drawer?
amazing video
How do I make it collapse from the start app?
You can access the "collapsing_list_tile_widget" file, that class is "CollapsingListTile" and, on initState, reverse widthAnimation begin->end and sizedBoxAnimation too. It's work fine to me =)
Can you please show how to navigate to every screen! I’ve created all the pages but don’t know how to go to them :(
I have the same problem, did you do it? :T
Nice video. Thank you.
excellent content, great channel, I am subscribed and I will follow what you post.
Can I add photo at the top
Loved your video thanks
Nice tutorial. Loved it
Hi..I am facing little problem, not regarding this video, this working perfectly with me, and thanks for uploading such a informative video.
The Problem I ma facing might be easy with you, but it tool my 4 days. I have images for Facebook + twitter + instagram.
OnTap it should ope Facebook App installed in mobile and get the page link which I coded.... I dont want any FB login screen or web view or open in browser, just open it in App.
If you or any one can help me, I indeed....Thanks
I have a setState error when i return collapsingListTile in the collapsing_navigation_drawer page. Pls help
What’s the error?
Thanks
good
How are we suppose to navigate through these option?????
I think you can do it in "collapsing_navigation_drawer.dart"
Line 56.
Only write your code with "if-else" selecting different options for each row, using the "counter" .
0 : Dashboard
1: Errors, etc.
Yes. You can use switch as well. But the idea is same.
can you explain more about that please ? I don't understant the concept well
there is no way i try a lot but get nothing
I m doing it using bloc provider, creating another menu related UI where you can find navigation between pages as well.
can you please make a videos on the best patterns to maintain the codebase of the app in flutter ????
Cool tutorial keep it up
the drawer is open on start how to close it start?
My andriod phone is not showing the animation please help me out
Nice video i will like to get in touch
I'll go with the people screaming about BLoC. Please make a tutorial about how to use bloc pattern with API (or mockedAPI, it's up to you really), and show how to create a Navigation Drawer based on the data received from the API. I've been experimenting with it, but it seems like the Drawer would not redraw after the data is received. So, it's always empty. You should keep up with you tutorials! Thanks
I think your answer lies in this video ruclips.net/video/S2KmxzgsTwk/видео.html
If you use Bloc pattern, there is no way your drawer will not update whenever there is a response from API.
Let me know, if that doesn't work
@@techieblossom Hey, thank you for reply! I've just subscribed to your channel because I think your contents are really nice and different from others! I have tried fixing my problem and it's fixed now, but I'm not sure if it's the best way to do it. If you have time to read this, then I'll be more than happy to hear your opinion for my approach. If not, then just keep making awesome videos :D.
So, basically I have a page with an InheritedWidget. Inside it is a Scaffold widget and a drawer inside the Scaffold. I am calling a webservice right away when the page is showing and the response will be shown as a header on the drawer. From most of the bloc tutorials that I've seen, they are triggering/calling the bloc's method (that will call the API) from a user action (clicks, taps, etc). So I was confused of where to call the bloc's method inside the widget without any user action/trigger. at first I put it inside the build method of the widget, not working. Then I moved it to the initstate, but it's giving me errors. Then I ended up with using Future.delayed inside the build method, it calls the API, it updates the variable that holds the data using setState, and then the ui will update. But I feel like, this is not the right way to do it. I feel like I actually don't even need a bloc to make something like this, because I thought, when I use bloc and inheritedWidget, I wouldn't need to call the setState anymore to rebuild the whole widget tree. What do you think? Flutter is really new to me and at times it can get so frustrating dealing with simple things like this. lol
Bloc constructor is the way to go here. Make api calls in the Bloc constructor. Use the instantiated Bloc by Blocprovider.of. yes don't use setstate of using Bloc. And it's not about how small or big the functionality is, it's about how easy it is to maintain ur code. Could u put your code on git and paste the link here. I will understand and try to emulate similar use case.. I have understood ur case
Thanks for subscribing
@@techieblossom gist.github.com/tyegah/ecd58d0539526becae4bd9a9b0c67f1b that's the gist for my codes. I've tried your suggestion by moving the API call to Bloc constructor, it gives me the same blank UI. it's not updating. Please guide me to the right path. lol.
Is it possible to change the menu icon on the appbar or at least the color? Thanks.
Yes. You can.
If it's a icon, give the color.
thank you. but how can i add submenu for this?
Use ExpandedListTile
I want to conditionally display the navigationBloc items. How do I do it?
Did I use Bloc in this video?
Can you please elaborate?
What if you load the navigation items from http then build the list? Never mind, got it. setState to update state of success callback of promise
Thanks for making the plugin of collapsible navigation drawer. I have used this but i want to change the content of navigation item. How can i add my custom navigation items (i.e. title, icon and onTap) using the package (custom_navigation_drawer 0.0.1
).
hi did you manage to get the solution to navigate from page to page? I also need help
I have not made changes to plugin.
But to add Navigation you can learn from here
ruclips.net/video/oExw0U4U_UI/видео.html
please use flutter_bloc package. its created by google. maybe you can show bloc+firestore
Could you please specify, what are your questions.. regarding Bloc. It will be helpful to create videos around that.
@@techieblossom As most of the people will, I want to integrate firebase to my app. But I don't want to have firebase calls made from the UI. Bloc is perfect for this. However instead of using naked stream/sinks I think we should use flutter_bloc which is maintained by google. It has much more capabilities. Maybe you can write a simple cloud function that runs periodically and show how to connect UI and bloc that listens to it:) just an idea. there is no example like that for flutter
@@aytunch Hey mate, you are wrong flutter_bloc package is created by felix.angelov . If you mean only Bloc pattern yes it is created by Google.
Sir, Thanks for great example.
I want to do one more thing.
I've made TabBarList & this Sidebar widget (exactly same with on your video) is a part of the tabBarList.
whenever I click some of the tabBarList (changing page),
selectedColor that I set is blowed out.
how could I save the State...?
I did it !!!! yay!!!!!
the solution was : List.
I built ListView's itembuilder by using the List type's list.
and whenever onTap event is on, it checks bool type !
I'm so glad .....loool
Charlie T Hi can u send all the code please
@@martlalrts j
can you create a login to this sidebar menu ?
I don't want to open sidebar always, so how to close it and add some condition on it?
Keep 3rd state variable other than open, close. You can use Enum.
Can play with the width of sidebar to achieve this. I have explained in the video how you can alternatively use it as drawer which will be closed by default.
@@techieblossom let me check.
hi I want this to unselect on start and how to put click function
Hello, how do I start menu minimized?
You can access the "collapsing_list_tile_widget" file, that class is "CollapsingListTile" and, on initState, reverse widthAnimation begin->end and sizedBoxAnimation too. It's work fine to me =)
I created the navigation drawer and used blocProvider for navigation, now I want to provide state to one of the pages that uses NavigationStates using pragmatic state management. How do I do it, any guidance would be much appreciated :)
You can get the Navigation Bloc instance by using BlocProvider.of(context).
Also, if you don't know, you can use multiple BlocProviders.
Hi, can you see this video?
Concept is same in this
ruclips.net/video/v2-F6n7_gZA/видео.html
Let me know if this answers your question.
Is it possible to create a submenu in this model of yours?
Yes.
@@techieblossom How can I proceed? Can you help me?
Have a look at this
ruclips.net/video/2Wwc_xY7aFo/видео.html
thanks bro
hi bro i want to close my drawer from outside of the drawer widget pragmatically . I opened the drawer using _scaffoldkey.currentState.openDrawer , is there is any similar way to close the drawer ...???? if anyone knows the answer please help . Thanks in advance.
How to add a card view to a particular screen
Bro you Awesome :)
big thankies from mcspankies
hi how to give a navigation to each of them?
Never mind! Solved it..
hey Techie thanks a lot for this video, I am using this for my Flutter Web Application.
I am new into flutter so will you please tell me how to fixed at the vertical position and use this drawer without appbar and It should not overlay the entire page.
give fixed width to navBar
How do i give an ontap fuction to the options?
Wrap them with GestureDetector
@@techieblossom ive tried and it did not work, when i use the if-else on the navigator_drawer.dart how do i write it becuase this is what i did and it isint working
if (counter = 0) {
return MyBNav();
}
Thanks for your help Appricieted.
@@techieblossom i somewhat got it working with the navigation propriety but its not great thanks anyways will find my way on making it work
The app starts with the sidebar opened.
What do I change to make it originaly closed ?
Use it as a drawer, as I have explained this scenario in the video
@@techieblossom I have done all the steps with you step by step in the video. I just started learning Flutter.
I assume that I have to change the bool value to make the initial state of the sidebar collapsed.
Please correct me if I'm wrong.
Yes, you will have to change bool value
how to navigate a page with we click on the menu?
By using Navigator.of(context).push
techieblossom.com/flutter-navigation-between-widgets/
how to navigate from one page to another when we click on the icon in the sidebar
Using current index like 0 or 1 use Navigator
@@nikhilkukreja8498 how, where? ive tried i think im doing it wrong
How can add onPress to Icons? I want the Drawer doing someting
Wrap them in Inkwell or gesture deteector
can you post the source code?
Uau, how do I create information within the menu?
??
@@techieblossom My (dashboard) is empty. How do I put information, photo, etc.?
Where can I get a hold of this code?
very good work bro... can you share code ?
plz work on wallpaper app parts because no one had done that on flutter even i can get help to make an wallpaper app plz dude make videos on wallpaper app
Repo please?
source please ?
Source code?
i love you
git hub link please
Updated the description.
There is a package also for this, that I created.
Make olx clone app in flutter
how can i keep it collapsing when it tablet size ?
Use it as a drawer as explained in the video. Or checkout the commented code here - github.com/PrateekSharma1712/custom_navigation_drawer/blob/master/example/main.dart
thank sir, i want to change it animation from mini side to maximum it work but the text it overflows when i collapse it how can i fix it sir
the hide text it not work properly when i change collapsing_drawer animation from mini to maximum how can i fix it? i don’t want to use drawer sir
I will give you solution. Give me a day or two.
@@techieblossom thank you so much sir.
Thanks