this is a great example of setting up a foundation for navigating with flutter web and persisting a layout and URLs, exactly what i was looking for! thanks for sharing!!
Nice! Hopefully these kinds of things gets built into Flutter Web. They've already built in the hover functionality so I think they're going to slowly add everything that I'm showing how to build manually into the app.
@@FilledStacks me too! initially i had been testing my app on an android emulator and i had been doing all the routing with nested navigators, so i had to go back and do some rework to allow for URL navigation with the awesome method you came up with above! And these types of issues are to be expected considering its early days for flutter web!
hahaha! yes, you are correct. This is not a channel for beginners in programming. It's a channel for beginners in flutter that knows how the flutter framework works.
@@AbhideepChakravarty that's awesome! Well done. A lot longer than me. I've been coding since high school only, standard 6. Professionally since 2013. To follow these videos on my channel you have to understand the basics of Flutter. What are widgets, How to navigate using Navigator.of(context), the build system, how to manage state "naturally" in flutter. Learn eveything without packages etc. I always use the built in functionality. Then look at state management progression. I have a video about that, from setState to architecture is the title. That should be very helpful. But until you know some flutter basics my videos will be worthless to you :D
@@FilledStacks I learnt enough basics to understand your Navigator 2.0. I hope you would qualify me , wont you ??!! I will search for Firestore integration code in your channel.
Great man, really appreciate your work... it's quite hard to find production level code or tutorials on youtube, your channel is just love, thank you so much.
These episodes are really amazing. Requesting you the next part which includes the integration with the Firebase. Will be awaiting for those tutorials. Thank you :)
Thank you :) And you're welcome. I appreciate the feedback. The next set of Flutter web tutorials will come out once it moves up another stability channel. There's a few other things I'd like to cover like forms, scrolling events and firebase integration ofcourse :)
@@sandraperez2698 Hey, i can probably only do form capture since the email send form will depend on what mail service you use and would be just a normal http call which I've already showed. But I think form input will be a good one.
@@FilledStacks thank you I am newbie with this type of programming and everything is new for me :) I need to learn more about it. I'll keep watching your videos.
Thank you for this video. I have a question. When we refresh the web page instead of refreshing the current page the complete application gets reload and the application starts again from the initial page. Please help me with this.
Hey, you need to use Navigator 2.0 to better manage that. Since it's imperative you can rebuild the entire stack to exactly where it was using your current state.
Hello and thanks for the great tutorials. I'm stuck on closing the navigation drawer after clicking a nav item. I tried using "locator().goBack" and then locator().navigateTo(navigationPath) .. but seems that it goes to the home path then to the path i clicked and the drawer stays open. Everything else works perfect. Any ideas on how to get it working? Thanks again!
Hey, you're welcome. Thanks for watching :) I haven't looked at the code for Flutter web for this project in a while. A pop usually closes the drawer. You should try doing a Navigator.of(context).pop(), maybe you're not in the right context at the point where you're trying to pop.
hey, I downloaded the starter code and ran it but my URL only has a hash attached to it. The episodes and home as shown at 00:56 don't appear like that. how to fix this
did you find out anything on this? I'm seeing as well that the appearance is different, and I'm not getting the same functionality of navigating by name when hosting locally. I haven't deployed anywhere to check, but I can't see it working all of a sudden.
@@bryanhunsberger I thing a few things might have changes since this video came out. navigator 2.0 was introduced that takes care of a lot of these issues.
Hey Dane, Thanks for the amazing tutorial. I have everything working like a charm except the browser forward button. Could you please point me in any particular direction to look into?
Thank you very much, I appreciate the comment. At the moment I have no direction to point you into. I suck at problems I haven't solved yet or have context to solve.
Awesome tutorial, works like a charm! I would love to see your take on Route Guards, to prevent visitors from accessing routes when they are not logged in. Do you plan to release a tutorial on that? If not, do you have any recommendations for it?
Thank you. I'm happy it's still useful more than a year after it's been released. I am not planning a tutorial for that currently, I also do not have any recommendations for it at this point. We're building some web apps, when we get to that point I'll ask the devs to document our approach we come up with and then I'll share it in a tutorial.
Much of the starting code has been deprecated :( I got it working though by doing the following: 1. In navigation_service.dart, bool goBack should be changed to void goBack. 2. Change provider to version to ^4.0.1 3. Replace every instance of "import 'package:provider_architecture/viewmodel_provider.dart';" with "import 'package:provider_architecture/_viewmodel_provider.dart';"
@@timondalton8731 i actually don't want anyone to use provider implementation anymore. Stacked is v2 of the provider implementation so I'd like to point them to that instead.
What a wonderful series! Do you have any plans to create a video on SEO? Alternatively, do you happen to know of any reliable sources that provide tips on enhancing SEO?
I appreciate that. In terms of SEO, Flutter is for web applications. There are no web applications that I know of that require SEO. Their landing page might, but not the application. There should be no effort made with flutter to build websites (blogs, news outlets, info gathering etc). You should build apps like: - Dropbox - gmail - google docs - mail chimp - figma - rive - crypto exchanges etc. So in short, don't use Flutter for anything that requires SEO, it's best suited for Web applications.
@@FilledStacks Thank you for your reply. From my understanding, based on research and your insights, Flutter isn't the ideal choice for document-type pages in general.
@@FilledStacks in fact overlooking horizontal scalability can be a serious misstep when dealing with ambitious projects. They made a terrible error in designing the initial architecture of the core system.
Hello. Is there a code sample that only covers this video? I would be grateful to have a sample app that only has a basic web-like navigation functionality. I am trying to follow along with your code but the already existing code is too confusing to me. Great tutorial!
Awesome, thanks mate! I ended up getting some of the advanced navigation working before you posted this video, but now I will revisit it again using the builder parameter to the MaterialApp. Having episodes?id=3 is fine (and also what I have settled for for now), but it would be great to have even nicer urls like episodes/3 for example. Should be relatively straight forward, but might lose all the niceness of the queryParams that you've so nicely wrapped up into a extension. Have a great holiday! I will be working on my Flutter web app over the break -- looking forward to hearing about Firebase, but for my app right now I will keep the backend being served by a simple mysql+php backend. One thing at a time :)
Niiice! Happy to hear you also rolled your own solution. There's multiple ways of doing this so we all have to work on figuring out what the best way is. I was actually going to add the parsing for episode/3 as well. That would parse into a path part which can then be used as the id. Both can be added into the extensions. Values separated by / after the routeName can be put in the queryParameters map using it's index? That would actually be neat. Then you can access it using routingData[1] as the first part. Have a great break, I'll starting thinking about this again when my 2 week break is over.
Thanks for all your teaching! But regarding this video, I'm experiencing a problem when creating my layout template on a flutter web project. The reason is that the navigator does not fill entirely the screen and also its overlay. Therefore, all widgets on my pages that use the overlay to present any floating widgets are appearing with an offset from the page widget (a dropdown button for example). This offset is exactly the same height and width that my layout occupies outside the navigator. How can I overcome this issue?
Hey Rosil, thanks for watching and commenting. You would have to use the root navigator and not just the navigator. Since your layout is embedded into a navigator that is itself contained in a navigator the overlay is attaching to the closest one in the widget tree. You should make sure it goes to the root navigator. There's some code for that in flutter dialog code I think, if you navigate to the showDialog definition there's a useRootNavigator boolean. I also saw it in one of the bottom_sheet packages. Checkout how they do it.
@@FilledStacks Thank you very much for your reply! I think I didn't get the point. On the MaterialApp builder, we receive the root navigator on its parameter. When we return, for example, a column with a container on the top and the navigator below it, don't we have the root navigator where all pages will be loaded occupying just a portion of the screen? Also, I couldn't find the same useRootNavigator on the Overlay.of(context). I don't know if I completely misunderstood your explanation, but I couldn't find a way to solve it.
Do I have to do something like this if I want to do oauth2 authentication in my webapp? Give the route url as redirect url? Or is there any easier way? Please advise... And need not mention that your channel is the best resource for flutter on the TH-cam. Love the way you actually show good architecture practices when writing your code. Please keep doing these...
Hey, I don't know. I haven't done oauth2 setup for a flutter web app. But from what I know from other integrations the answer is yes. You'll have to give a url to navigate back to when the auth is complete.
@@FilledStacks even with an url I don't think it will be easily doable in flutter web since a new tab will be opened. I thought of trying using a webview but currently there's no webview that works on web (sounds stupid when I'm saying it :D)
...and now I am sad that I reached the end :-) This was a truly hypnotising trip! Web development on a completely different level! A question remains: Why is the mobile "hamburger" not linked to open the drawer? Is this a shortcoming of flutter web or did you just leave it to us? I observed that, in my case at least, the drawer not-working-problem has to do with the debugger, which pauses everything once the mouse, dragging of the drawer, moves over the browser's window borders. That seems to through an exception in flutter. Setting the debugger to play again makes the drawer work again too. Thank you so much again!!!
Haha I'm glad you enjoyed it. i didn't implement the drawer because I didn't think it's worth spending time on. those parts are the same for Flutter as Flutter web. I wanted to cover things web specific. I enjoyed the series. I think ill add to it over time as some other scenarios come up that are common for most web apps.
@@FilledStacks Sounds great! A bit like Christmas, so I'm gonna count the nights I have to sleep until it's here. With the big difference, that in your case I don't know the date ;-)
@@RobertWildling hahaha I can genuinely say that I share the same excitement for Flutter Web. If it delivers on its promise and gets into a better space I will be extremely happy. It'll be the first web tech that I fully grasp and would be able to do any styling possible since i won't require css. I'm very excited about it.
@Robert Wildling , assuming you have followed the tutorial to this point if you go to widgets/navigation_bar/navigation_bar_mobile.dart and add: Scaffold.of(context).openDrawer(); to the onpressed function of the IconButton widget. :)
Hey, Daniel. Would you please shed light on restrict the back and forth of navigation2.0, When a user logs in he/she cannot go back until they log out?. How to achieve this? I hope you're really busy BoxtOut application, hope you will post the answer. Thanks!!!
Hey Pupharaj, thanks for the comment and question. First off, my name is Dane haha. Secondly, I don't know what you're asking about. I don't know anything about navigator 2.0 at this point. I've never used it so I have no experience with it.
In the flutter web app is have any way that if we get data from backend it should show with the specific url or user go directly on that url then it should show that data on the page same as wordpress do with blogs, as you know the backend data update dynamicly it can be add, update and delete, I dont want to deploy web app every time on every change.
@@FilledStacks I think the TH-cam is the best example to understand, as example in the youtube-com on web if I press "FilledStacks" from my subscriptions list then it will open FilledStacks page and the url will be youtube-com/@FilledStacks and when I press Videos of FilledStacks then it will open videos page and the url will be youtube-com/@FilledStacks/videos till now we can manage urls in our flutter web app but when I press a video of the Videos page example I clicked "Advance Url Navigation for Flutter Web" then it will open a video player page and the url will be "youtube-com/watch?v=q-n1Q98s92s&list=PLdTodMosi-Bxf___3xPh3_NS-on4dc0sJ&index=7&ab_channel=%C3%9CnalAyhan" actually I am asking about this url if in my web app have a data coming from backend I want to open that data with a specific url and as you know the backend data is dynamic it will be updating time to time, for that how I can manage url's for each data.
Dane (or anyone else) in trying to add a DropdownButtonFormField to the appdrawer, i get the following exception when trying to use it. Navigator operation requested with a context that does not include a Navigator. The LayoutTemplate sits above the navigator, so I guess I get it, but not sure why the dropdown button needs Navigator, any thoughts?
hey! Great video, thank you for this series. I have a question: how would one implement one view/page without the layout, but maintaining it for the rest? My app has an AuthenticationPage that doesn't need the Layout, but the rest does. I thought of removing the builder from the MaterialApp and adding the Layout in the onGenerateRoute function for the necessary pages, but I don't know if that's a good way of doing it. Thank you in advance :)
Hey, that way you would just keep your app navigation the same and embed a navigator into one of the other full screen views you go to. So your navigation will have views A, B C but C will have it's own navigator in it where you can navigate independently of the navigator attached to A, B and C on the top level.
Mmmm, i don't see how the conflict. You can wrap the navigator in a DialogManager and just pass it as the child. I've also moved away from the dialog manager and i now use the Dialog service in www.github.com/filledstacks/stacked_services
When i put the URL manually it shows the widget tied to that URL but when I navigate using navigateTo it doesn't update the URL , and the back button doesn't work as expected. Am I missing something? Thanks
Thank for the great video! I call Javascript to rewrite the URL in my app. Do you know how to get rid of the flashing red text that appears for a quarter of a second when running on the web? There's something like "" that appears.
It's my pleasure. Could you share that solution over on Slack or maybe here. i was going to do that too st some point but won't be back coding until next year. And i don't know how to fix that flash,I'll have to see the code.
Hey bro, not sure what I'm doing wrong but when I get to the part where '/home' should show up in the address bar it's not working. Any ideas? Navigation still works with all the new edits, I'm just not seeing any change in address bar. Nevermind, i figured it out... Because I didn't use the _FadeRoute I hadn't totally updated my router.dart file and didn't include the settings arguement! Thanks for the tutorials dude, they are amazing and this stuff is essential!
Nice one! Thanks for checking it out. You're welcome man, I learn as much from this as you probably do so it's really my pleasure making these videos for the community. I always say this, If you have other web basics that you'd like me to cover please let me know. The one thing I forgot to add was form and text input, which I'll do a video on as well.
@@FilledStacks thanks again! If you're after suggestions for web then I'm currently struggling to add videos that will play automatically. I'm using the flutter_video/flutter_video_web package 👍
@@chriscarman247 Thanks, I'm talking more about the basics of Web. Things every website WILL require so we can have a single playlist with all the basics on getting started in Flutter Web.
None on the list. I've seen no benefit of using that over the existing one, once I learn about those I might update my navigation videos with a new one.
@@FilledStacks yeah i know, i want to know how i can implement it be ause i tried but i want una le to close it. Tried different ways but didn't close it because of context error. I thought maybe you could help with it.
@@meliodastcosds I see, well I can't remember this code base 100% since it's so old and Flutter web has changed. But you should be able to get the ModalRoute.of(context).navigator and then use that to pop the navigation bar. There's better ways to do that but i'd have to get familiar with the code base again to expose those ways.
Hello, Thanks for great series. But I am not able to run starting code for this as it is giving error : Compiler message: [ +3 ms] lib/services/navigation_service.dart:11:38: Error: This expression has type 'void' and can't be used. [ +2 ms] return navigatorKey.currentState.pop(); I am using Flutter 1.19.0-4.2.pre version. Please let me know where I am wrong.
@@galihpambudi2055 I don't I just googled now and found this (www.codediesel.com/javascript/generating-clean-urls-with-javascript/) I would try that, if it doesn't work I'd try the second link etc. Till I find the solution. Haven't done it because I'm not building a production web app at the moment so I'll wait, maybe google team fixes that up.
Hello, i have questions and i hope i get answers please : i have created website with wordpress and i already created Appview using fultter. so i need to redirect mobile user if visit my website from thire mobile to install app or open app if they already installed it with out redirect user on my appview that i made with fultter? Thanks
@@FilledStacks Thanks for replying ❤️ i just need to understand more places : - is it work if user visit my website directly or only only on click? - is it work for my main domain or should i create new url? - is that will effect on webview because im using same main domain! Thanks so much 💐
@@haniali2047 1. If the user goes to the site in a browser then the browser will open it. You can add a smart banner for them to tap which will be the dynamic link that will open your app. 2. Domain doens't matter. Whatever the dynamic link is setup with 3. No it won't
Hey, thanks. I got the things I need working. However, I am stuck with a minor inconvenience. Whenever I navigate to a page from the drawer on mobile, it does navigate but doesn't automatically close. I tried to use Navigator.pop but it throws an error "Navigator operation requested with a context that does not include a Navigator". Please help me out.
Great. I'm happy that most of it works. You should use the navigation service since it's linked to the same key that would show the dialog. Use NavigationService.pop or back, whatever it's called in the video.
I'd love to know what you did for this if you figured it out. NavigationService().goBack(); does not work for me as referenced by Dane below. I get "invalid member on null: 'pop' when I call it before or after my locator navigation.
Hi, I've been recording for a long time and I really admire your channel. Want to know if you can use the sample code to get started on real projects by giving you the credits for the mit license?
You can use any code that I put out there. I'm don't have much knowledge of things outside of building products so I don't quite understand the licensing. But you're free to use any of my code that's on my github.
I have started seeing this error which was not coming before. *return navigatorKey.currentState.pop();* Target dart2js failed: Exception: lib/services/navigation_service.dart:11:38: *Error:* This expression has type *'void'* and can't be used.. ..... Looks like pop method now returns void. Can you kindly check your navigation_service.dart. It must be throwing error.
After adding the builder on MaterialApp, I am unable to figure out how to close the drawer onTap, any suggestions? I used to do it via Navigator.pop(context)
Easiest solution for me was Scaffold.of(context).openEndDrawer(); That probably will show itself to be a poor decision, but as a beginner, I was coming up empty on what "pop it off the key for the correct navigator" meant.
You should hide the navigation bar. The app is built so that all views show the navigation bar without having to add one to every view. If you don't want that functionality you can simply remove the part in the main file where we wrap every view with the navigator and show the navigation bar. If you want that same functionality then you can add a viewmodel to the view that manages the navigation bar and in that viewmodel set a bool that will show / hide the navigation bar. Then you can modify that from your other viewmodel.
@@nikhilkukreja8498 It's my pleasure and Thank you very much :) The example we're building uses a package called stacked, which is based on Mvvm (model view viewmodel) so it might be confusing if you're not using that pattern.
This video is over 2 years old, I think there's been 10 new versions of Flutter web. You should do some research on using navigator 2.0 with Flutter web and see if that works.
haha, i always make my video from source on the desktop and I always clear the desktop after a day or two. I just forgot to move the code into the tutorials repo this time haha.
Haha, that makes sense in 1 of 3 scenarios. 1. You're not watching this SERIES from episode 1. 2. You don't have the basics down of Flutter itself (in the mobile context) 3. You're a beginner in programming In case 2 i'd say you should do flutter, not on web, first since it's mobile first. Understand it there, then apply that to web. In the case of 3 You should be learning fundamentals and not a framework.
so this works fine on the emulator, but once uploaded the link to the page say aboutpage returns a 404 not found, also refreshing when not home page will return the same 404 not found. please help
it's my pleasure! We have a new one for the latest way to manage urls. It uses the latest version of the Stacked framework and goes into a bit more specific examples. It's part 2 in a series. th-cam.com/video/cGdNRnBdWpw/w-d-xo.html
you can use the RoutingService. I'll be writing docs for it soon. I'm wrapping up the new course that talks about it this Friday then I'll get back to writing docs.
@@FilledStacks sure, i have done it using routing service, but it took more time as the information was shattered over some of your tutorials . would be better if it was included in docs. and by the way, thanks for the framework. brilliant and unique work . now i cannot go back to old way.
@@ameerfayiz2577 I completely understand that. I'm putting in a system in place for myself to write all the docs over the next few months. I appreciate your kind words of support for the package, this year I'm going to create all the docs for it.
throw a alarm: ══╡ EXCEPTION CAUGHT BY FLUTTER FRAMEWORK ╞═════════════════════════════════════════════════════════ The following message was thrown: Could not navigate to initial route. The requested route name was: "/episodes" There was no corresponding route in the app, and therefore the initial route specified will be ignored and "/" will be used instead. ════════════════════════════════════════════════════════════════════════════════════════════════════ how to fix it?
@@mecil9 I don't know exactly if you're happy with the response or if you still have a problem. If I helped then I'm happy it worked, if I didn't then you'll have to debug :) That's the best thing about being a dev. Problem solving
@@FilledStacksThanks, I agree with you about debug problem. This problem is a bit strange. I changed the name of the route in the route file, but the error still appeared.
Sounds like your signature is expecting a bool return but you're returning a void. Remove the bool type from your signature if you want to use void. I can't remember the code right now.
Hi Cristian you can do this by adding Scaffold.of(context).openDrawer(); to the IconButton in navigation_bar_mobile just like you would in a normal flutter project if you had to open the drawer from a custom location.
haha, I've been a software developer since my first year in uni. Not just doing assignments, actually building software. I think by the time I left I had built 1 xbox game, 10 mobile games. 1 or 2 PC games, 5 apps, random pieces of software, etc. The stuff I'm doing in Flutter is not new. I'm simply applying patterns and techniques I picked up during Android, iOS, Windows Phone and Xamarin development to Flutter. The rest is basic problem solving. I focus a lot on writing better more understandable code so I'm always sharing the one I land on after days of refactors and retries. You'll get there man, end of this channel you'll probably all be coming up with better architectures than me haha. Atleast that's the hopes :)
@@Gabriel-kl6bt I do, I worked in C++ building a cross platform game engine for over a year and 6 months. It was C++ using cocos2d-x as the game framework then I joined a 3D games team and started using Unreal Engine 4 with custom C++ blueprints / classes during development. I definitely don't fine C++ nice haha. C# is my favourite language and .net core is super cool.
Thank you so much for your videos! I have an question regarding the NavigationDrawer. As soon I'm trying to put something like an "Tooltip" Widget in the NavigationDrawer() I'm getting an overlay error. ════════ Exception caught by widgets library ═══════════════════════════════════ The following assertion was thrown building Tooltip("ya eh", dirty, state: _TooltipState#dd68a(ticker inactive)): No Overlay widget found. Also made a StackOverflow on this but in a very very simplified way: stackoverflow.com/questions/61850247/flutter-web-navigation-with-persistent-drawer-and-appbar/ How can I prevent this? Is there a way to use Tooltips in the persistent drawer? Thank you! :)
That's not a very interesting topic to me so I won't be doing that. You can use aws to host content and parse it through their streaming service then you simply create a list that streams the videos. the app itself is not that difficult. given what I've shown in my videos you should be able to create a basic version of it quite fast. Snapchat has been in development by the creator and his team for over 4 years now. i don't think a few 10 minute tutorials will cover everything they've done.
Poppidy pop! Don't know man, luckily you're trying to become a good developer so this is some great practice to hone your debugging / problem solving skills
@@FilledStacks I actually realised the problem but I don't know flutter and dart enough to solve it, the problem is occuring due to the migration of code in Navigator in layout template to the main.dart, although it allows to use URL bar navigation, when I try to pop the drawer, it gives "Navigator operation requested with a context that does not include a Navigator" error. So from transition of that code to main, we are missing to place that Navigator widget at some point. I read the documentation but couldn't find an exact solution to that. I'm probably going to rewrite the navigation from scratch following the flutter documentation. Oh and also I'm using arch linux and cli tools most of the time, so I'm very used to RTFM for problem solving :) I just asked because your tutorials were great and I thought I might be missing something at some point. But if you don't know too, I would just write the solution when I find it.
@@berkaycagl3161 Awesome, happy you found the problem. Re-writing the navigation won't fix that. You have to ensure you have a navigator above the place you're calling navigator.of since it uses inherited widget. A better way to do it would be to call a navigation function on your viewmodel which makes use of the navigation service instead to close the drawer.
@@FilledStacks lol I just made a stateful widget that opens and closes in vertical direction when I press on the hamburger menu instead of a drawer, drawer really spent my time and I need to work on more important things instead of a damn drawer.
Hi, excelle videos. please help me with a video of how you put on your page " Hi, excelle videos. please help me with a video of how you put on your page the botos on the left side" the botos on the left side
this is a great example of setting up a foundation for navigating with flutter web and persisting a layout and URLs, exactly what i was looking for! thanks for sharing!!
Nice! Hopefully these kinds of things gets built into Flutter Web. They've already built in the hover functionality so I think they're going to slowly add everything that I'm showing how to build manually into the app.
@@FilledStacks me too! initially i had been testing my app on an android emulator and i had been doing all the routing with nested navigators, so i had to go back and do some rework to allow for URL navigation with the awesome method you came up with above! And these types of issues are to be expected considering its early days for flutter web!
Nice channel for experts. I started Flutter two days back. Everything you talked sounded greek and latin.
hahaha! yes, you are correct. This is not a channel for beginners in programming. It's a channel for beginners in flutter that knows how the flutter framework works.
@@FilledStacks I am choosing since 1995, when I was in 5th standard and professionally coding for last 13 years. But flutter is new to me.
@@AbhideepChakravarty that's awesome! Well done. A lot longer than me. I've been coding since high school only, standard 6. Professionally since 2013. To follow these videos on my channel you have to understand the basics of Flutter. What are widgets, How to navigate using Navigator.of(context), the build system, how to manage state "naturally" in flutter. Learn eveything without packages etc. I always use the built in functionality. Then look at state management progression. I have a video about that, from setState to architecture is the title. That should be very helpful. But until you know some flutter basics my videos will be worthless to you :D
@@FilledStacks I learnt enough basics to understand your Navigator 2.0. I hope you would qualify me , wont you ??!!
I will search for Firestore integration code in your channel.
Great man, really appreciate your work... it's quite hard to find production level code or tutorials on youtube, your channel is just love, thank you so much.
Awesome man! I appreciate the kind words. thank you for watching and supporting the channel.
Thank you for this great tutorial. Made my web app much better by implementing almost the same navigation
Awesome! I'm happy to hear that.
Great video!! Helped me solve a recurring and head-breaking error I had in my app. Thanks for the amazing explanation and quality!
I'm very happy to hear that. And I'm also happy to see that it's still relevant even after all the Flutter updates.
is your website built in flutter
No it's not. my website was built long before flutter was viable for web dev.
So thankful for this tutorial, please keep doing this. You are awesome :)
It makes me happy to hear that. I'll try my best to keep it up
These episodes are really amazing. Requesting you the next part which includes the integration with the Firebase. Will be awaiting for those tutorials. Thank you :)
Thank you :) And you're welcome. I appreciate the feedback. The next set of Flutter web tutorials will come out once it moves up another stability channel. There's a few other things I'd like to cover like forms, scrolling events and firebase integration ofcourse :)
@@FilledStacks If you can include Contact Web Form with email integration, send emails. It will be great. Thanks for sharing
@@sandraperez2698 Hey, i can probably only do form capture since the email send form will depend on what mail service you use and would be just a normal http call which I've already showed. But I think form input will be a good one.
@@FilledStacks thank you I am newbie with this type of programming and everything is new for me :) I need to learn more about it. I'll keep watching your videos.
Thank you for this video. I have a question. When we refresh the web page instead of refreshing the current page the complete application gets reload and the application starts again from the initial page.
Please help me with this.
Hey, you need to use Navigator 2.0 to better manage that. Since it's imperative you can rebuild the entire stack to exactly where it was using your current state.
Hello and thanks for the great tutorials. I'm stuck on closing the navigation drawer after clicking a nav item. I tried using "locator().goBack" and then locator().navigateTo(navigationPath) .. but seems that it goes to the home path then to the path i clicked and the drawer stays open. Everything else works perfect. Any ideas on how to get it working? Thanks again!
Hey, you're welcome. Thanks for watching :) I haven't looked at the code for Flutter web for this project in a while. A pop usually closes the drawer. You should try doing a Navigator.of(context).pop(), maybe you're not in the right context at the point where you're trying to pop.
Priceless information:D So does this exact code work on mobile? Or do we need to write platform specific code?
the exact code works on mobile 😊😎
Thank you for the series, keep up the good work.
You're welcome. I'll try my best to keep putting out things.
hey, I downloaded the starter code and ran it but my URL only has a hash attached to it. The episodes and home as shown at 00:56 don't appear like that. how to fix this
Hey, I don't know. Flutter web has changed a lot since I made this video so you'll have to read in the docs what they say about the hash in the url.
did you find out anything on this? I'm seeing as well that the appearance is different, and I'm not getting the same functionality of navigating by name when hosting locally. I haven't deployed anywhere to check, but I can't see it working all of a sudden.
@@bryanhunsberger I thing a few things might have changes since this video came out. navigator 2.0 was introduced that takes care of a lot of these issues.
Hey Dane, Thanks for the amazing tutorial. I have everything working like a charm except the browser forward button. Could you please point me in any particular direction to look into?
Thank you very much, I appreciate the comment. At the moment I have no direction to point you into. I suck at problems I haven't solved yet or have context to solve.
Awesome tutorial, works like a charm! I would love to see your take on Route Guards, to prevent visitors from accessing routes when they are not logged in. Do you plan to release a tutorial on that? If not, do you have any recommendations for it?
Thank you. I'm happy it's still useful more than a year after it's been released. I am not planning a tutorial for that currently, I also do not have any recommendations for it at this point. We're building some web apps, when we get to that point I'll ask the devs to document our approach we come up with and then I'll share it in a tutorial.
Much of the starting code has been deprecated :(
I got it working though by doing the following:
1. In navigation_service.dart, bool goBack should be changed to void goBack.
2. Change provider to version to ^4.0.1
3. Replace every instance of "import 'package:provider_architecture/viewmodel_provider.dart';" with "import 'package:provider_architecture/_viewmodel_provider.dart';"
Yes, this video is almost a year old by now. I should be doing some newer Flutter web videos in this year, but not anytime soon.
@@FilledStacks Could you put the fix I have found in the video description?
@@timondalton8731 i actually don't want anyone to use provider implementation anymore. Stacked is v2 of the provider implementation so I'd like to point them to that instead.
@@FilledStacks That makes sense. Thanks for the great videos and making flutter more accessible! Really appreciate it
@@timondalton8731 It's my pleasure. Thanks for watching and leaving comments :)
What a wonderful series! Do you have any plans to create a video on SEO? Alternatively, do you happen to know of any reliable sources that provide tips on enhancing SEO?
I appreciate that.
In terms of SEO, Flutter is for web applications. There are no web applications that I know of that require SEO. Their landing page might, but not the application.
There should be no effort made with flutter to build websites (blogs, news outlets, info gathering etc).
You should build apps like:
- Dropbox
- gmail
- google docs
- mail chimp
- figma
- rive
- crypto exchanges etc.
So in short, don't use Flutter for anything that requires SEO, it's best suited for Web applications.
@@FilledStacks Thank you for your reply. From my understanding, based on research and your insights, Flutter isn't the ideal choice for document-type pages in general.
@@davitjanashia9344 No, it's probably the worst option for something like that.
@@FilledStacks in fact overlooking horizontal scalability can be a serious misstep when dealing with ambitious projects. They made a terrible error in designing the initial architecture of the core system.
Thanks for another great tutorial. What is the best way to get the current route inside a widget?
i would track that i side the navigation service. but i think you can get it from the navigator.of call.
Hello. Is there a code sample that only covers this video? I would be grateful to have a sample app that only has a basic web-like navigation functionality. I am trying to follow along with your code but the already existing code is too confusing to me.
Great tutorial!
Hey, there is none because it builds on top of each other.
Awesome, thanks mate! I ended up getting some of the advanced navigation working before you posted this video, but now I will revisit it again using the builder parameter to the MaterialApp. Having episodes?id=3 is fine (and also what I have settled for for now), but it would be great to have even nicer urls like episodes/3 for example. Should be relatively straight forward, but might lose all the niceness of the queryParams that you've so nicely wrapped up into a extension.
Have a great holiday! I will be working on my Flutter web app over the break -- looking forward to hearing about Firebase, but for my app right now I will keep the backend being served by a simple mysql+php backend. One thing at a time :)
Niiice! Happy to hear you also rolled your own solution. There's multiple ways of doing this so we all have to work on figuring out what the best way is.
I was actually going to add the parsing for episode/3 as well. That would parse into a path part which can then be used as the id. Both can be added into the extensions. Values separated by / after the routeName can be put in the queryParameters map using it's index? That would actually be neat. Then you can access it using routingData[1] as the first part.
Have a great break, I'll starting thinking about this again when my 2 week break is over.
Awesome tutorial series. Thank you !
I'm happy to see you enjoyed it :)
Thanks for all your teaching! But regarding this video, I'm experiencing a problem when creating my layout template on a flutter web project. The reason is that the navigator does not fill entirely the screen and also its overlay. Therefore, all widgets on my pages that use the overlay to present any floating widgets are appearing with an offset from the page widget (a dropdown button for example). This offset is exactly the same height and width that my layout occupies outside the navigator. How can I overcome this issue?
Hey Rosil, thanks for watching and commenting. You would have to use the root navigator and not just the navigator. Since your layout is embedded into a navigator that is itself contained in a navigator the overlay is attaching to the closest one in the widget tree. You should make sure it goes to the root navigator. There's some code for that in flutter dialog code I think, if you navigate to the showDialog definition there's a useRootNavigator boolean. I also saw it in one of the bottom_sheet packages. Checkout how they do it.
@@FilledStacks Thank you very much for your reply! I think I didn't get the point. On the MaterialApp builder, we receive the root navigator on its parameter. When we return, for example, a column with a container on the top and the navigator below it, don't we have the root navigator where all pages will be loaded occupying just a portion of the screen? Also, I couldn't find the same useRootNavigator on the Overlay.of(context). I don't know if I completely misunderstood your explanation, but I couldn't find a way to solve it.
Do I have to do something like this if I want to do oauth2 authentication in my webapp? Give the route url as redirect url? Or is there any easier way? Please advise...
And need not mention that your channel is the best resource for flutter on the TH-cam. Love the way you actually show good architecture practices when writing your code. Please keep doing these...
Hey, I don't know. I haven't done oauth2 setup for a flutter web app. But from what I know from other integrations the answer is yes. You'll have to give a url to navigate back to when the auth is complete.
And thank you or the kind words. I'll try my best to keep making videos.
@@FilledStacks even with an url I don't think it will be easily doable in flutter web since a new tab will be opened. I thought of trying using a webview but currently there's no webview that works on web (sounds stupid when I'm saying it :D)
@@bonmec101 try using iFrame, works like a WebView ;) in web
...and now I am sad that I reached the end :-) This was a truly hypnotising trip! Web development on a completely different level!
A question remains:
Why is the mobile "hamburger" not linked to open the drawer? Is this a shortcoming of flutter web or did you just leave it to us?
I observed that, in my case at least, the drawer not-working-problem has to do with the debugger, which pauses everything once the mouse, dragging of the drawer, moves over the browser's window borders. That seems to through an exception in flutter. Setting the debugger to play again makes the drawer work again too.
Thank you so much again!!!
Haha I'm glad you enjoyed it. i didn't implement the drawer because I didn't think it's worth spending time on. those parts are the same for Flutter as Flutter web. I wanted to cover things web specific. I enjoyed the series. I think ill add to it over time as some other scenarios come up that are common for most web apps.
@@FilledStacks Sounds great! A bit like Christmas, so I'm gonna count the nights I have to sleep until it's here. With the big difference, that in your case I don't know the date ;-)
@@RobertWildling hahaha I can genuinely say that I share the same excitement for Flutter Web. If it delivers on its promise and gets into a better space I will be extremely happy. It'll be the first web tech that I fully grasp and would be able to do any styling possible since i won't require css. I'm very excited about it.
@Robert Wildling , assuming you have followed the tutorial to this point if you go to widgets/navigation_bar/navigation_bar_mobile.dart and add: Scaffold.of(context).openDrawer(); to the onpressed function of the IconButton widget. :)
@@n00bstude Thank you! (I did that already. :-) )
I jumped from episode 3 to 6. After I had added the url navigation, my navigation bar caused error… How can I fix it?
The best way to fix an error is usually to read the error, understand what caused it and then implement a fix for it.
@@FilledStacks ah, thanks for your reply, I have solved the problem.
Hey, Daniel. Would you please shed light on restrict the back and forth of navigation2.0, When a user logs in he/she cannot go back until they log out?. How to achieve this? I hope you're really busy BoxtOut application, hope you will post the answer. Thanks!!!
Hey Pupharaj, thanks for the comment and question. First off, my name is Dane haha. Secondly, I don't know what you're asking about. I don't know anything about navigator 2.0 at this point. I've never used it so I have no experience with it.
Thank you for your videos, pretty interesting!
Do you know if problems you mentioned before in regards to flutter performance have been solved?
Thanks 😊 Some of them I think have been solved. I haven’t been keeping out with Flutter development.
In the flutter web app is have any way that if we get data from backend it should show with the specific url or user go directly on that url then it should show that data on the page same as wordpress do with blogs, as you know the backend data update dynamicly it can be add, update and delete, I dont want to deploy web app every time on every change.
Are you asking how to make an http request in Flutter?
@@FilledStacks I think the TH-cam is the best example to understand, as example in the youtube-com on web if I press "FilledStacks" from my subscriptions list then it will open FilledStacks page and the url will be youtube-com/@FilledStacks and when I press Videos of FilledStacks then it will open videos page and the url will be youtube-com/@FilledStacks/videos till now we can manage urls in our flutter web app but when I press a video of the Videos page example I clicked "Advance Url Navigation for Flutter Web" then it will open a video player page and the url will be "youtube-com/watch?v=q-n1Q98s92s&list=PLdTodMosi-Bxf___3xPh3_NS-on4dc0sJ&index=7&ab_channel=%C3%9CnalAyhan" actually I am asking about this url if in my web app have a data coming from backend I want to open that data with a specific url and as you know the backend data is dynamic it will be updating time to time, for that how I can manage url's for each data.
even @FilledStacks is dynamic endpoint in youtube-com/@FilledStacks
Dane (or anyone else) in trying to add a DropdownButtonFormField to the appdrawer, i get the following exception when trying to use it. Navigator operation requested with a context that does not include a Navigator.
The LayoutTemplate sits above the navigator, so I guess I get it, but not sure why the dropdown button needs Navigator, any thoughts?
Solved this. Had to wrap with MaterialApp
@@bryanhunsberger It needs a navigator because it has to be inserted at the top of the stack above all the widgets that it has to be displayed over.
hey! Great video, thank you for this series. I have a question: how would one implement one view/page without the layout, but maintaining it for the rest? My app has an AuthenticationPage that doesn't need the Layout, but the rest does. I thought of removing the builder from the MaterialApp and adding the Layout in the onGenerateRoute function for the necessary pages, but I don't know if that's a good way of doing it. Thank you in advance :)
Hey, that way you would just keep your app navigation the same and embed a navigator into one of the other full screen views you go to. So your navigation will have views A, B C but C will have it's own navigator in it where you can navigate independently of the navigator attached to A, B and C on the top level.
Can you demonstrate how to also have Dialogs with this method as well? It conflicts with another architecture (the Firestore CRUD tutorial).
Mmmm, i don't see how the conflict. You can wrap the navigator in a DialogManager and just pass it as the child. I've also moved away from the dialog manager and i now use the Dialog service in www.github.com/filledstacks/stacked_services
Can Flutter web be integrated with my previous react or Vue projects? Is there a demo? My web project requires both Flutter and Vue
YEs, it's possible. You can embed Flutter, if you google Flutter embed in web you'll find the demo's
When i put the URL manually it shows the widget tied to that URL but when I navigate using navigateTo it doesn't update the URL , and the back button doesn't work as expected. Am I missing something? Thanks
I don't think so. As far as I know it working, but that's over half a year ago, so things might have changed.
I'm a mern stack web developer and im beginner at Flutter. I wonder how that happen routing system in Flutter. Very good tutorial.
Thanks man, much appreciated. Happy you found value in it. And thanks for watching
Thank for the great video! I call Javascript to rewrite the URL in my app.
Do you know how to get rid of the flashing red text that appears for a quarter of a second when running on the web?
There's something like "" that appears.
It's my pleasure. Could you share that solution over on Slack or maybe here. i was going to do that too st some point but won't be back coding until next year. And i don't know how to fix that flash,I'll have to see the code.
Hey bro, not sure what I'm doing wrong but when I get to the part where '/home' should show up in the address bar it's not working. Any ideas? Navigation still works with all the new edits, I'm just not seeing any change in address bar.
Nevermind, i figured it out...
Because I didn't use the _FadeRoute I hadn't totally updated my router.dart file and didn't include the settings arguement!
Thanks for the tutorials dude, they are amazing and this stuff is essential!
Nice one! Thanks for checking it out. You're welcome man, I learn as much from this as you probably do so it's really my pleasure making these videos for the community. I always say this, If you have other web basics that you'd like me to cover please let me know. The one thing I forgot to add was form and text input, which I'll do a video on as well.
@@FilledStacks thanks again! If you're after suggestions for web then I'm currently struggling to add videos that will play automatically. I'm using the flutter_video/flutter_video_web package 👍
@@chriscarman247 Thanks, I'm talking more about the basics of Web. Things every website WILL require so we can have a single playlist with all the basics on getting started in Flutter Web.
Hey Chris thanks a lot man! saved my ass! Idk how i missed it.
Any incoming videos in regard to Navigator 2.0?
None on the list. I've seen no benefit of using that over the existing one, once I learn about those I might update my navigation videos with a new one.
@FilledStacks can you make a tutorial on showing dropdown when hovering on a button in flutter web? Thanks
I can definitely add that to the list!
Hi, Why drawer isn't closing upon selecting screen from drawer item?
Hi, it wasn't implemented in these videos.
@@FilledStacks yeah i know, i want to know how i can implement it be ause i tried but i want una le to close it. Tried different ways but didn't close it because of context error. I thought maybe you could help with it.
@@meliodastcosds I see, well I can't remember this code base 100% since it's so old and Flutter web has changed. But you should be able to get the ModalRoute.of(context).navigator and then use that to pop the navigation bar.
There's better ways to do that but i'd have to get familiar with the code base again to expose those ways.
i want to use dropdown button in appbar but i cant able to use because our widget inside the builder of material app.
Dropdown needs a navigator to work because it has to be inserted at the top of the stack above all the other widgets.
Do you think flutter web is ok for my production app
If you're willing to have a fixed 1-2 second time until first render then you can use it.
Hello, Thanks for great series. But I am not able to run starting code for this as it is giving error :
Compiler message:
[ +3 ms] lib/services/navigation_service.dart:11:38: Error: This expression has type 'void' and can't be used.
[ +2 ms] return navigatorKey.currentState.pop();
I am using Flutter 1.19.0-4.2.pre version.
Please let me know where I am wrong.
You're welcome. Change the function in the navigation service to a void and remove the return keyword.
Thanks. Now Its working
Thanks man. I love work
You're welcome. Thanks for positive feedback. I appreciate it.
Thanks man for such great tutorial. is there anyway to remove # from url?
Maybe. I haven't looked at doing that. I'm sure some basic JS redirect or pretty url library would work to do that.
for hashtags, is there a way to delete it already?
@@galihpambudi2055 I would use a JS pretty url type library to do that. Haven't looked into it recently but that's my first thought
@@FilledStacks any reference for JS pretty url mean? i tried slugify2
@@galihpambudi2055 I don't I just googled now and found this (www.codediesel.com/javascript/generating-clean-urls-with-javascript/) I would try that, if it doesn't work I'd try the second link etc. Till I find the solution. Haven't done it because I'm not building a production web app at the moment so I'll wait, maybe google team fixes that up.
Hello,
i have questions and i hope i get answers please :
i have created website with wordpress and i already created Appview using fultter.
so i need to redirect mobile user if visit my website from thire mobile to install app or open app if they already installed it with out redirect user on my appview that i made with fultter?
Thanks
Hey, watch my dynamic link video I show how to do the exact thing you're asking for.
@@FilledStacks Thanks for replying ❤️
i just need to understand more places :
- is it work if user visit my website directly or only only on click?
- is it work for my main domain or should i create new url?
- is that will effect on webview because im using same main domain!
Thanks so much 💐
@@haniali2047
1. If the user goes to the site in a browser then the browser will open it. You can add a smart banner for them to tap which will be the dynamic link that will open your app.
2. Domain doens't matter. Whatever the dynamic link is setup with
3. No it won't
Thanks alot for help ❤️
Hey, thanks. I got the things I need working. However, I am stuck with a minor inconvenience. Whenever I navigate to a page from the drawer on mobile, it does navigate but doesn't automatically close. I tried to use Navigator.pop but it throws an error "Navigator operation requested with a context that does not include a Navigator".
Please help me out.
Great. I'm happy that most of it works. You should use the navigation service since it's linked to the same key that would show the dialog. Use NavigationService.pop or back, whatever it's called in the video.
Did you happen to get this to work? I'm stuck on that also.
I'd love to know what you did for this if you figured it out. NavigationService().goBack(); does not work for me as referenced by Dane below. I get "invalid member on null: 'pop' when I call it before or after my locator navigation.
Do you know why the /episode isnt displayed in my app? I downloaded the code from Part 5 but still doesnt work
I don't know. Could be packages not working the same anymore. This is quite old. Gonna have to debug around there to find out.
Are there any updates to this tutorial to bring it up to speed with the changes in StackedServices + nested navigation keys?
Good question. At the moment there's no plan to update this video but I am planning on making a flutter web series again in the near future.
Hi, I've been recording for a long time and I really admire your channel.
Want to know if you can use the sample code to get started on real projects by giving you the credits for the mit license?
You can use any code that I put out there. I'm don't have much knowledge of things outside of building products so I don't quite understand the licensing. But you're free to use any of my code that's on my github.
I have started seeing this error which was not coming before. *return navigatorKey.currentState.pop();* Target dart2js failed: Exception: lib/services/navigation_service.dart:11:38:
*Error:* This expression has type *'void'* and can't be used.. ..... Looks like pop method now returns void. Can you kindly check your navigation_service.dart. It must be throwing error.
I'm not at the pc now. Remove the type on the function containing that call. it should be fine with dynamic.
@@FilledStacks ok thank you.
After adding the builder on MaterialApp, I am unable to figure out how to close the drawer onTap, any suggestions? I used to do it via Navigator.pop(context)
You have to pop it off the key for the correct navigator. The one above the child in the builder.
Easiest solution for me was Scaffold.of(context).openEndDrawer();
That probably will show itself to be a poor decision, but as a beginner, I was coming up empty on what "pop it off the key for the correct navigator" meant.
How can I show a page that does not have a navigation bar currently when I created a different page it is showing the the navigation bar
You should hide the navigation bar. The app is built so that all views show the navigation bar without having to add one to every view. If you don't want that functionality you can simply remove the part in the main file where we wrap every view with the navigator and show the navigation bar. If you want that same functionality then you can add a viewmodel to the view that manages the navigation bar and in that viewmodel set a bool that will show / hide the navigation bar. Then you can modify that from your other viewmodel.
@@FilledStacks thank you so much ❤️. I don't know about viewmodels. Thank you for creating this awesome series. God bless you always ☺️🙏
@@nikhilkukreja8498 It's my pleasure and Thank you very much :) The example we're building uses a package called stacked, which is based on Mvvm (model view viewmodel) so it might be confusing if you're not using that pattern.
@@FilledStacks I will watch the stacked architecture series.
@@nikhilkukreja8498 Awesome!
In dev mode everything is working but in release mode its not working
This video is over 2 years old, I think there's been 10 new versions of Flutter web. You should do some research on using navigator 2.0 with Flutter web and see if that works.
awesome series! thanks! :)
Thank you! You're welcome. Very happy you hear you enjoyed it.
sir in this only back arrow is working forward arrow not working properly
Makes sense. There's going to be some additional code required for that to work.
Hi you series are great as always. Thankyou for that. 😍😍😍
Can you please tell how to pass page arguments while calling "navigate_to" function.
Thank you. I show that in the video so I don't know what exactly you're asking.
It would be awesome if you would host the webpage on github pages. I'd love to try it out and see how it feels.
I keep forgetting to deploy the latest version. I also deleted the code for this tutorial so I'd have to redo it before I can push it up.
@@FilledStacks Haha! You delete your code? Good that you make tutorials, so you can follow yourself along :-)
haha, i always make my video from source on the desktop and I always clear the desktop after a day or two. I just forgot to move the code into the tutorials repo this time haha.
Great Tutorial! Thanks!!
Thank you! Much appreciated and you're welcome.
Stuck after a few minutes. Not sure what's happening.
Haha, that makes sense in 1 of 3 scenarios.
1. You're not watching this SERIES from episode 1.
2. You don't have the basics down of Flutter itself (in the mobile context)
3. You're a beginner in programming
In case 2 i'd say you should do flutter, not on web, first since it's mobile first. Understand it there, then apply that to web.
In the case of 3 You should be learning fundamentals and not a framework.
@@FilledStacks It doesn't state in the title or description that this is part of a series. What should I watch first?
@@DavidHust Hey, sorry about that, this is part of the Flutter web series. th-cam.com/play/PLdTodMosi-Bxf___3xPh3_NS-on4dc0sJ.html
so this works fine on the emulator, but once uploaded the link to the page say aboutpage returns a 404 not found, also refreshing when not home page will return the same 404 not found. please help
No idea why that would be happening. You'd have to debug that and see what the console says in the browser.
Thank you very much!
it's my pleasure! We have a new one for the latest way to manage urls. It uses the latest version of the Stacked framework and goes into a bit more specific examples. It's part 2 in a series.
th-cam.com/video/cGdNRnBdWpw/w-d-xo.html
how to do it using the latest stacked package???
you can use the RoutingService. I'll be writing docs for it soon. I'm wrapping up the new course that talks about it this Friday then I'll get back to writing docs.
@@FilledStacks sure, i have done it using routing service, but it took more time as the information was shattered over some of your tutorials . would be better if it was included in docs. and by the way, thanks for the framework. brilliant and unique work . now i cannot go back to old way.
@@ameerfayiz2577 I completely understand that. I'm putting in a system in place for myself to write all the docs over the next few months.
I appreciate your kind words of support for the package, this year I'm going to create all the docs for it.
throw a alarm:
══╡ EXCEPTION CAUGHT BY FLUTTER FRAMEWORK ╞═════════════════════════════════════════════════════════
The following message was thrown:
Could not navigate to initial route.
The requested route name was: "/episodes"
There was no corresponding route in the app, and therefore the initial route specified will be
ignored and "/" will be used instead.
════════════════════════════════════════════════════════════════════════════════════════════════════
how to fix it?
make sure there's a route name called '/episodes' in the router.dart file
@@FilledStacks yes! I used directly download the code, run after the prompt this!
@@mecil9 I don't know exactly if you're happy with the response or if you still have a problem. If I helped then I'm happy it worked, if I didn't then you'll have to debug :) That's the best thing about being a dev. Problem solving
@@FilledStacksThanks, I agree with you about debug problem. This problem is a bit strange. I changed the name of the route in the route file, but the error still appeared.
@@mecil9 That does sound strange
value of type 'void' can't be returned from method 'goBack' because it has a return type of 'bool' i have this error on Naigator_service.dart Any idea
Sounds like your signature is expecting a bool return but you're returning a void. Remove the bool type from your signature if you want to use void. I can't remember the code right now.
@@FilledStacks Thanks I fix it by removing the bool in front of the method Thanks for the reply.
@@Josegyapor You're welcome :)
thank you for this video
You are very welcome. I'm happy to have made it.
please tell me how I make the three lines to press the side menu
I didn't make those three lines. it's one of the material icons.
Hi Cristian you can do this by adding Scaffold.of(context).openDrawer(); to the IconButton in navigation_bar_mobile just like you would in a normal flutter project if you had to open the drawer from a custom location.
@@n00bstude haha, I completely miss understood the question
Hey if you have doubts on flutter web UI then you can also refer the flutter APP tutorials. Almost all the stuffs are same except for some things.
How do you learn all of this is only ten months? I wish I were smart.
haha, I've been a software developer since my first year in uni. Not just doing assignments, actually building software. I think by the time I left I had built 1 xbox game, 10 mobile games. 1 or 2 PC games, 5 apps, random pieces of software, etc.
The stuff I'm doing in Flutter is not new. I'm simply applying patterns and techniques I picked up during Android, iOS, Windows Phone and Xamarin development to Flutter. The rest is basic problem solving. I focus a lot on writing better more understandable code so I'm always sharing the one I land on after days of refactors and retries. You'll get there man, end of this channel you'll probably all be coming up with better architectures than me haha. Atleast that's the hopes :)
@@FilledStacks Thank you for the kind words. Amazing background. Do you know C++, too? I always found it very nice.
@@Gabriel-kl6bt I do, I worked in C++ building a cross platform game engine for over a year and 6 months. It was C++ using cocos2d-x as the game framework then I joined a 3D games team and started using Unreal Engine 4 with custom C++ blueprints / classes during development. I definitely don't fine C++ nice haha. C# is my favourite language and .net core is super cool.
How to adapt this to: '/episodes/1'
This structures represents: '/episodes/:id'
uriData.pathSegments gives you all the segments in the url. You can use that to your disposal. pathSegement[1] should be your id.
Thank you so much for your videos! I have an question regarding the NavigationDrawer. As soon I'm trying to put something like an "Tooltip" Widget in the NavigationDrawer() I'm getting an overlay error.
════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building Tooltip("ya eh", dirty, state: _TooltipState#dd68a(ticker inactive)):
No Overlay widget found.
Also made a StackOverflow on this but in a very very simplified way:
stackoverflow.com/questions/61850247/flutter-web-navigation-with-persistent-drawer-and-appbar/
How can I prevent this? Is there a way to use Tooltips in the persistent drawer?
Thank you! :)
You're very welcome. I have never tried to use tooltips in Flutter web so I won't be much help there.
Invalid argument: null , The relevant error-causing widget was:
Expanded child was called on null
Seems like you have a null error. You should find it and fix it.
*wow that so good tks u sir*
You're welcome. I'm happy I could help.
Please make a tutorial on creating Snapchat app with backend...
That's not a very interesting topic to me so I won't be doing that. You can use aws to host content and parse it through their streaming service then you simply create a list that streams the videos. the app itself is not that difficult. given what I've shown in my videos you should be able to create a basic version of it quite fast. Snapchat has been in development by the creator and his team for over 4 years now. i don't think a few 10 minute tutorials will cover everything they've done.
Thanks a lot !!!!
You're very welcome!
You're awesome.
HI JACK! thank you
can't pop the drawer pls help
Poppidy pop! Don't know man, luckily you're trying to become a good developer so this is some great practice to hone your debugging / problem solving skills
@@FilledStacks I actually realised the problem but I don't know flutter and dart enough to solve it, the problem is occuring due to the migration of code in Navigator in layout template to the main.dart, although it allows to use URL bar navigation, when I try to pop the drawer, it gives "Navigator operation requested with a context that does not include a Navigator" error. So from transition of that code to main, we are missing to place that Navigator widget at some point. I read the documentation but couldn't find an exact solution to that. I'm probably going to rewrite the navigation from scratch following the flutter documentation. Oh and also I'm using arch linux and cli tools most of the time, so I'm very used to RTFM for problem solving :) I just asked because your tutorials were great and I thought I might be missing something at some point. But if you don't know too, I would just write the solution when I find it.
@@FilledStacks also forgot to tell, thanks for these awesome tutorials :) it really helped a lot
@@berkaycagl3161 Awesome, happy you found the problem. Re-writing the navigation won't fix that. You have to ensure you have a navigator above the place you're calling navigator.of since it uses inherited widget. A better way to do it would be to call a navigation function on your viewmodel which makes use of the navigation service instead to close the drawer.
@@FilledStacks lol I just made a stateful widget that opens and closes in vertical direction when I press on the hamburger menu instead of a drawer, drawer really spent my time and I need to work on more important things instead of a damn drawer.
The "material builder method" broke my dialogs :C
haha well that's not great
LOL, can you remove that hastag on URL ? LOL
haha, So much laughter. And yes, you can
Hi, excelle videos.
please help me with a video of how you put on your page "
Hi, excelle videos.
please help me with a video of how you put on your page the botos on the left side" the botos on the left side
Hi, I don't know what you're asking. Check the code from the tutorial to see.
Thanks you!!
You're welcome. Thank you for watching