Flutter Sailor Navigation Tutorial – The Simplest Navigator Library?

plotter is known for its extensible built-in navigation even by using the default navigator you have a couple of options you can instantiate the so-called page widgets directly and use something like material page route then you can also use simple mapped named routes or you can also setup more elaborate named routes with the ability to pass in custom arguments and you can learn about all of these default navigation methods from the tutorial from the cart in the corner sometimes though it's just good to bring more structure into navigation instead of inventing ways of how to safely pass values between routes you can use parameters and arguments in a sailor instead of reinventing the wheel with custom route transitions you can use the ones which sailor provides and let the Sailor library do the heavy lifting for you hello welcome to resew code where you are getting prepared for real app development by building better faster more stable apps so subscribe and hit the bell if you want to grow your coding skills also if you do not know already an amazing flutter conference is gonna be taking place in January the next year 2020 in Warsaw Poland so people from Google will be there I will be there and it's gonna be packed with great presentations and a lot of fun so if you want to meet up with the flower community and you want to go to this flutter Europe conference check out the link from the description to learn more this tutorial will be all about the sailor library and by the end of it we will have an app which can navigate to the second page and also to the third page from the first page and as you can see the route transition to and from the third page looks kinda cool I wouldn't recommend doing this in your real apps but this is what we are gonna be building in this tutorial all of this navigation will happen with sailor and the values which you can see on the routes over here so laptop second-gen and its price 2000 are all passed to these routes from the first route and the way that these values are passed are different in the second route and in the third route so there is really a lot to learn here and you're going to learn about how to pass those values in how to set up Saylor how to navigate using Saylor and also as you can see you're going to learn about how to create these custom nice transitions for your routes and because I do not want to bore you with creating the basic layout we already have a starter project prepared which contains initial page second page in the third page currently the starter project contains just a simple navigation from the initial page to the other pages using the default navigator of polish material page route and so on and if you want to follow along with this tutorial and get the starter project be sure to check out the written tutorial from the link in the description where apart from the starter project you can also find all of the code written in this video links to the libraries and overall go through this lesson at your own pace now without any further ado let's get right to it the starter projects pop spec the IMO file already contains the Saylor package imported make sure that if you are following along with this tutorial you have the same version for now that's 0.5 point out that's because in the future releases of Saylor some things might be different so just make sure that we are on the same page just so you know the second page takes in its parameters separately so we have the second page constructor and this takes in product name and price as two fields and the third page takes in basically the same data but it takes it inside third page arts class so we've created an intermediary class third ARC's and only that is passed into the third page otherwise the data is the same so what is the first step which we should take in order to make the Saylor package work and do the heavy lifting of using named routes and all of that for us well we first need to add routes to Saylor we're going to do so inside main Don Dart and to follow the first solid principle which is the single responsibility principle we are going to put everything related to our routes into a separate routes class so let's do just that to end routes to Saylor we first need to somehow get hold of the staler instance we're actually going to put it inside a static final Saylor which is going to be inside this routes class and let's just simply instantiate Saylor so let's import package Saylor and now we're good to go we're going to use this Saylor instance which is made static inside the routes class throughout our whole app whenever we need to navigate with Saylor also we want to somehow add these three routes to the sailors so that it knows what to do whenever it to get some navigation event let's call it like that we're going to set it all up inside a static void create routes which we'll call sailor and now we have two options we can either add a single route or add multiple routes since we want to add three routes we're going to call a droughts which takes in a list of Sailor route and each sailor route can have a name which in the first routes case will be initial and then a very important part is the builder this builder will be the thing which returns the actual widget in this case the initial page and a builder as you can see takes in built context based arguments and param map so you know what built context is but arguments and problems we're going to get to them later as soon as we start playing with passing values into the routes but first let's just set everything up so this builder takes in context then let's call those argument arts and params it's a regular method which needs to return a widget so let's just return initial page and with that the first stale route is now set up so let's duplicate it or actually triplicate it so we want to have also a second route which will return a second page let's import that and then we finally want to have third route which will return third page apart from having these errors and warnings because the second page should take in two required parameters product name and price and the third page must take in the third page arts argument apart from this we have other pressing issues to take care of because currently we are not calling this create routes method anywhere so it wouldn't run therefore these routes would not even be added to Saylor and also we need to do some Sailor specific setup so that it can block into the default flatteries navigation system also I would recommend you in your own projects that you do not use these magical strings but instead create constant strain and put them in here because just passing around magical strings is no good but for the sake of the simplicity of this tutorial we are going to leave these string withdrawals in here so now from where are we going to call create wraps an obvious choice is the main method so let's convert it to a blog body and right before calling run app which will instantiate our first widget and so on we want to call routes that create routes so this will add all of our defined routes to sail and now how are we going to plug sailor in to the default navigation system of flutter well we need to modify some fields on the material app namely those fields are going to be on generate route function this is something which you would also modify if you were implementing the navigation yourself but we are now going to implement it ourselves we are going to let Sailor do all of the heavy lifting for us so even for sailor we need to define on generate route and we're gonna specify routes because that's where our Sailor instance lives that sailor so that's our only Sailor instance in our app and then we're gonna call generate or generator actually and if we take a look at the generator just for fun we can see that it tries to map the route name to the route which should be returned and overall there's quite a lot of code in here so I'm definitely happy that we do not have to write all of this then also we want to specify navigator key to be also from routes that sailor that navigator key what this will allow us to do is to actually not use the build context at all while navigating currently we need to use the build context for example here from the initial page as we are navigating to the second page we need to provide the context something like that would also be needed for Sailor but because we have specified this navigator key over here we will no longer need to pass around build context which definitely saves quite a few of keystrokes so that's awesome once we have Sailor setup let's deal with these missing values for the second page and third page that means we're going to pass in values and Sailor gives us two options in how to pass those values firstly we can use parameters or we can also use arguments to be frank the naming may not be the best because arguments and parameters are basically the same thing when it comes to programming you pass in arguments into a function so for example if I were to call void f int X right whenever I call F and I pass in one two three this is an argument one two three is an argument because I am passing it into a function however whenever I use that inside the function so X this is now called a parameter whenever I use the value inside that particular function X is a parameter one two three is an argument however Sailor differentiates between these two names in some other interesting way because parameters in Sailor are represented by a map containing multiple values and arguments are represented by a class and that means that parameters are perfect to showcase with the second page which takes in each and every field separately and arguments are going to be perfectly showcased with the third page which takes in a third page arts before we can use parameter and pass them into this builder method we need to define the possible parameters which can be passed into the second route we can do that by specifying params for the Sailor route which should take them and this is going to be a list of Sailor param and every sailor param has to have a name which will be product name and then we can also specify whether or not it's required and also its default value for product name let's specify is required to be true and then another sailor param will be with name price and let's just set this ones default value to be 100 point oh why point out well if we take a look at the second page we can see that the price is of type double and using parameters instead of arguments to which we are going to get in just a little while means that although we gain in maybe simplicity that we do not have to have an intermediary class define we can just pass those parameters right into the second pages constructor without using some arguments class at the same time we lose out on type safety if we were to define the default value for the price parameter to be only 100 it would be of type integer and then we would get type errors whenever the integer would try to be cast into a double so that's why we you need to set your types just right when you are using params these problems go away as soon as you move over to arguments instead of params so that's why I would recommend you to use arguments and not this monstrosity but params are also what's possible to do with Sailor so that's I am showing it to you now whenever we are going to navigate to the second route we can pass in these params over to Saylor and those prawns will arrive inside this builder function so now we can use them and pass them in to the second page we are going to define the product name to come from Tom's and now params is a special kind of a map a piranha map as you can see and we can get individual params out of this by calling param and then specifying its key so this one will be product name and we also want to specify the price so params dot forum and this is actually a generic method so we can either Lite dart compiler infer the type for us like your product name will be inferred to be a string or we can specify the type ourselves so this should be a double we can also specify it like this double this will take the care of the casting for us and we can specify the key to be price so that's enough for params let's now move to arguments which are in my opinion the much better option when it comes to passing around values in between routes that's because you get absolute type safety you get to compartmentalize your arguments into nice classes which is definitely a good thing and also there is much less setup to do because here we had to define all of these forums basically we have to duplicate the name of the field because we have to name the field inside the class right product name goes here then the same name has to go to the name of the Sailor prom so there is just a lot of duplication and also we lose out on the type safety which dart provides if we want to use arguments instead all we have to do is to just extend the arguments class with base arguments which come from sailor and once we have that we can now pass these arguments this object into sailor as we are going to be navigating in just a bit from the initial page and now all we have to do is to pass arcs which come into the builder to the third page arcs are of type based arguments and they're gonna be automatically cast into the type of third page arcs and also you do not have to access these arguments and parameters directly from the builder method like we are currently doing you can also access them from the actual widgets so for example here right inside the build method inside the second page you are able to access parameters and you are also able to access arguments from the build method of the third page however I think that it's best to always access and pass those parameters and arguments directly inside the builders of sailor routes however if you really want to learn how to access arcs and prompts from the widgets directly check out official docks and a link to them is in the written tutorial now we are going to finally navigate to these two routes the second and third route from the initial page so as you could see already we are currently navigating using the default way of navigating which is material page routes and we are pushing rounds around using the navigator now we are going to switch to sailor so instead of calling a navigator of context bush we are going to call routes that sailor of course we need to import main data art where the routes class is defined and now all we have to do is to call navigate and we're going to pass in the name of the route to which we want to navigate so second and then this second route takes in params and we have to specify them right over here as we are navigating so params will be a map of string dynamic so that's also why I do not recommend you to use params because it's just very easy to get lost in the maps of string dynamic whereas you really cannot get lost when you are using a nice class like this third page arts but anyway we are now going to specify that we wanna pass in price with the value of 2000 and also you have to make sure that you add that decimal place because otherwise it would be deemed to be an integer and you will get a tight cast error as you would try to cast it into a double so again params are not type safe so make sure that you keep that in mind then the next parameter we want to pass in is the product name let's say that this should be laptop second gender or actually second should be 2 MB in just to keep it consistent with what we had here previously so this is how we can navigate to the second route so how can we navigate to the third route with arguments well that's even simpler let's just copy this paste it into navigate to third method instead of second we're going to navigate to third and instead of params we're going to pass in arguments which are going to be third page Rx and now we do not have to worry about type safety about all of that because we can just specify the price to be 3000 and we do not even have to add a decimal place because now flutter or dart will automatically infer that this should be a double so we are not going to get any typecast errors here and then we'll specify product name to be laptop third-gen with this we can now test out if everything works as we would expect so let's launch this app inside the emulator and here we go we can now go to the second page and also to the third page and I can also show you why we need to make sure that the price is actually 2000 point now because if we make it 2000 and I save this and now we're gonna try to go over to the second page so let's go back and go to second we're going to get a typecast error because type integer is not a subtype of type double in typecast and that's definitely true so that's why we need to really be wary of your types when you are using params and not arts there is just one more thing which is really awesome about Saylor and that is that in addition to providing a really simple way to navigate using named routes it also simplifies adding route transition animations and as you could see in the example app we're going to build something really crazy looking for the third page navigation because currently is just default material navigation route transition we're going to build something really special you can either define transitions when you are navigating so you can see here we have transitions so we can define transitions right over here as we are navigating then you can also define global transitions for every single route that there is added to saver and you can also define default transitions for certain routes we're gonna go with the third option so we're going to define the default transition for the route sailor route itself if you want to learn more about defining transition as you are navigating or defying Global transitions all of the links to the official documentation are available from the written tutorial to which you can get from the link in the description so we want to define default transitions for the third route and this takes in a list of Saylor transition and you can also define your own custom transition again that's in the docs but Saylor comes with a bunch of nice predefined transitions which we can use so let's specify cellular transition and now we can choose even multiple ones so we can go with slide from bottom if we left it at just that and we would take a look at how the app looks like of course we need to hot restart the app not just reload because this create routes is called from main which is not reloaded so we need to restart the app so make sure you do that and now when we go to third page it's basically gonna look very much the same as it did before but now we do not even get that fade transition we just get it pulled from the bottom so we definitely want to have something more exotic than that so let's again specify another transition and let's now say slide from left alright so once again hard restart now it's gonna look something like this so it goes diagonally but we also want to have it a bit more exotic than that so let's say Saylor transition that zoom in and now it's gonna look like something which I would now recommend you to do in your real projects because like looking at this transition and it really makes my eyes cry after I heart restart so it looks it looks just it's just too much in my opinion especially when we change the curve and duration of the transition so we can also say default transition curve and let's just set it to be something really crazy like curves that elastic or maybe ease in and let's make it crazy is in circ and let's also specify the default transition duration and let's set it to be just too long so seconds too that just too long for a transition but anyway if we now take a look at how it looks like it's a very long winded transition and it looks completely crazy so awesome going to the second page still works as expected and also if you want to learn more about how to generally animate something in flutter not just transitions of routes check out the video from the cart in the corner to go through this tutorial at your own pace and to get all of the code check out the written tutorial available from the link in the description and also go to flutter - education links also in the description to get the top curated flutter news and resources aimed at improving your app development career I really select the best flutter news and resources and you can also get them delivered right into your inbox when you sign up to my mailing list in this tutorial you'll learn about sailor which is the next step when you are just fed up with manual handling of navigation through named routes it supports nice mechanisms of passing data around and in addition to that sailor also simplifies applying route animation transitions as you could see right now so if you do not want to miss more tutorials like this definitely subscribe to this channel and also join the notification squad by hitting the bell button to make sure you grow your flutter skills because here on reason coder I am determined to provide the best app development tutorials and resources out there if this video helped you with understanding Saylor and how to navigate better in Flour give it a like and also share it with our developers who will surely benefit from it too leave a comment if you have anything to say any suggestions for future tutorials or questions and see you in the net [Music]

Channel: Reso Coder

Views: 14,668

Keywords: resocoder, tutorial, programming, code, programming tutorial, flutter, flutter tutorial, flutter navigation, flutter fluro, flutter navigation tutorial, flutter routes, flutter routes tutorial, flutter named routes with parameters, flutter sailor

Id: T1hzNcaAKiA

Length: 29min 29sec (1769 seconds)

Published: Tue Nov 05 2019

Reddit Comments

[u/Gohrum]

I'm using fluro and I find it covers almost all my needs. Would you say that sailor is better? Looks less maintaned