Flutter Live: Learning MobX | Learn it with me!



let's say well this one do it then I'll probably not go to this one let's see let's see do okay we're live here and let's move that one them this is so so weird okay let's oh hey Ally I'm gonna explain everything I'm just going to see we can get the viewers from the other stream let's go back welcome welcome let's see if we can everyone let's see does everyone get notification anyway I couldn't actually Street it from let's see if we can close this so this let's see if I can move over to other video really fast is make a link okay so this bit like this mmm so there was some really weird issue with with due to control panel for livestream so they give me that that key to livestream to and when I start the livestream it didn't actually get through so you just got an error saying like okay the livestream is not successful so I just tried it over and over again but it seems like I can start a new life stream but you still not on that video so sorry if there was any like yeah sorry for 10 minutes later but I think I got everything working it seems like I'm not let's see properties and maybe we can get some better sound also is this better okay this is on on the left side oh my gosh so many first audio turn mixed to maybe like this sorry if I can't can't answer right now just kind of fix this really fast I will answer all the questions so you can just put everything there is it better now here everyone hear me yeah now we see we seem to have everything working good now I'm just going to go here and I'm also going to just open all of the code really fast I like have everything prepared so the the links and everything but now but now I stream into another video so the links are not correct anymore I think I had Twitter also here somewhere there's Twitter so it's kind of changed links tweet this one will also change and yeah that should be working amis gonna see if that works yeah okay now we got everything up and ready I'm just going to shake the comments really fast hi everyone by the way my mail address you can find it in the About section on my youtube channel you should see a button to see my work mail how to connect the SQL server in flutter I haven't actually touched on that and looked into that anything myself so probably someone else have a better answer than me see hey Mehmet I don't know if I can pronounce that it can make it tutorial on fetching data from server and this yeah I will make tutorials more on fetching data from servers also I'll get a better audio nice and ER today I want to have Google Maps on my app in flutter yeah that's something I also want to do some time into the future I haven't really tried out it I never heard of mobile X I've saw it before when I worked on a project at my work and I wanted to have a state management but they used pretty much forced us to reuse the redox at that point so I couldn't really try it out there either what's the best database for flutter and whatever works for you your use case we'll have to see you explain and talk about running flutter in the background yeah I really want it's really hard to cover that topic right now it's not a lot of like source on it or a code on it so I haven't really used it or got into it myself so this will probably be something more in the future okay but let's see so I have pretty much II started a a a set up here so the code you can find so like let's move this and we can see if I can change it over to the browser that's the wrong browser okay so everything is not working now so I would just move this here so you can see it here and I'm is going to hide the bookmarks there we go so here is the flutter repo or not the flattery put the repo that I will be adding all of the state management repositories and you can see here that I have used a simple readme for it and the product I would be working on will be residing here in the mobile learning so all all of the code will be updated here and I will also I think that's the also down in the description if you want to find all the source code and also I would be following this mob X getting started and this is used to begin with with countless I can get a basic understanding of it and maybe we can see if we can do something more advanced that depends and I thought provide is good alternative for statement instead of block yeah I really like provided a lot I'm currently on my project I'm using normal block and provider but I'm going to taste right now with Mobe exam provider I just want to see and test out of the state management because a lot of the questions I get on the channel a lot of question you guys give me is like what state management to use what I prefer what I recommend so I can't really recommend anything until I actually tested all of them so that's why I want to try that out so let's see so I have this normal project right here so I just remove the comments so we can get started and we will begin used see if we can get take the counter app working and hopefully it makes some sense to us and also myself I have never used Mobile's ever before so let's see if that works so actually what I'm going to do first is just create a new branch let's see if I can get the comments up also there we go so let's make a new branch and let's call it count or feature mobic counter and there we go so now we have the counter and counter branch hey summit how are you doing case I will use switch some of this out so we can get some more and let's also remove the debug banner that's used to remove the banner banner up at the top so hey Samir and let's see so first off we will actually use add all of the dependency because I saw on the get started that it was quite a bit of different dependencies that we would need so let's check that out so I will see if I can make this smaller so you guys can see it as well most time I use Redux or provider I'm interesting know how ridic Mobile's works yeah I'm really interested to see and test all of the different state management if you have any state management you want me to cover just let me know in the comments or in their stream chat I'm really not used to streaming so let's see how this goes so we need two dependencies in the dependencies which is mobile X and also flutter mob X so let's just add those two and we need the build runner and the mobile code gem so let's take that also and they will be in the dev dependency like that let's just see do I actually need to specify the version number um hey dream how are you doing awesome glad you found a stream here over five is not working properly it's really hard for me to be buggy it I have a disco channel if see of course I want to miss can fix one thing also I want to stake this so now so I have a a disco channel i will create i think there is an invite down in description i will just create a invite anyway let's never expire no limits and you can join that if you want to i missed 11 minutes thus 11 minutes was me fixing up the livestream actually because i didn't get it to work what is mob ex-mo bik's is a state management solution i think it's it was developed for the web but before for react i believe i haven't really looked into it that much I used to found it when I created a project for my last company in react but I had to go with Redux so I can't go with it so let's just try it now so I don't know the enough you guys know if I really need to specify a version doesn't really matter we can actually go and get a versions also not that one a little bit iOS style apps in fluffy as opposed to material apps mmm I have used like played around with the iOS style widgets I haven't really built a app that's specifically going to look I was styled on iOS if that's the question you mean why not use block like you can use whatever you want I just want to learn the new ones also or the other solutions and then make my mind afterwards to see what I prefer in the different products I'm going to create so first time is going to search on mobiles see what the version is we'll get a version there and flutter mope X there's diversion there okay we have also the mobile excursion we have version here annum is going to shake if we are getting everything working I think I will also add provider yes so we can test that out later I will just add it right away instead we don't have to add it afterwards what is mobius mobius is pretty much just another state management solution what is state and state management just an overview so pretty much when you make a change in apps let's say a value let's say you have a a user in the app when and when they sign in let's say they have a name and you want that name to displayed in multiple places in your app so a good way with state management is that you have like a a combined store let's say and when you change that value you can have that store value displayed in multiple places like that's that's like a oversimplified way of looking at it it's not completely similar to to Redux I can't say that but it's another solution and there's a nice thing for this public assist oh yeah yeah I haven't really had time to test a right I would I will actually add it after the stream and maybe we can test that out after the next dream also okay so we got two packages down let's see we can close on my it's not close that okay so we got that right we're going to use a REST API maybe maybe we can try something like getting images from a dog API I think I know a open one because we can test with and see if we can cook something up okay so we're going to first create a counter class it seems let's create a mobile store or a store okay a story mobic this way of collecting the related observable state under one class the stores allows us to use annotation and keeps the code simple okay so we're going to create a a new class so let's first use create some so folders I'm going to create a source folder and inside this folder I'm going to create a model scroller and I haven't really used like the generations for when you generate a class from my class or generate the code I believe it creates two two classes so I'm just going to just in case create another folder in the models which is just going to be called a counter so inside this we're going to create a counter class so counter at Dart okay so let's see how he creates one let's push this here and let's see if we can do this okay so we have okay so we're good and one sec I'll say a three the money is here Canada okay so first we are going to import the mob X let's see if we can get this right so I will actually use see if we can create a class itself first so it makes a bit more sense so it seems that we're going to use a abstract class and make the class private and then we're just going to have the store with it so let's go do that we're going to get a abstract class called counter and underscore just makes it private and I guess that's part of the code generation hey Lucas how are you doing let's see I didn't expect so many to be here actually Harry hi everyone even if you're a lurker so okay so we're going to have a observable so I guess we have these annotations so we can use remove a lot of boilerplate which seems to be pretty nice observe observe the bulb okay so below the observable we're going to use create a variable and this will be that the value of the counter so it can be friendly I'm just going to call it count I'm going to set it to 1 at work right away actually ok so then we have actions ok so the explanation comes afterwards I'm just going to like guess what this makes or this min and then we list see if I'm right or not so we have the observable which we can listen to the from the UI I guess then we have a action these are used color ball actions which would I guess fire of a change for the observable we're going to have a increment and this will use increase the count okay so we don't have to do anything else ok sweet hey Jay how are you doing so let's see so okay now we have this we are not going to forget the okay so we have to make a a class which we can call because this is a private class I guess so I'm just going to copy this but since petard so we have class counter with counter let's open the terminal and we are going to include the generated file let's do that also which I guess will be for the cogeneration and we're getting a read errors let's see if we can used which is the best way to or the best resource to learn flat online for free I guess YouTube videos blogs I don't have anything specific I try to make everything I have free if that helps there's also a lot of a lot of communities that you can join and learn ok so the abstract store class includes the store mixing all of your store related code should be placed inside this abstract class we create a counter class to blend in the code from the build runner ok so we pretty much have a after class which then will be blended with the counter class with build runner them and yet official documentation is great also the generated code will be inside this part okay yes Isis let's let's just go see what happens so this I guess will generate our file if it does anything did it run hmm unpeeled run a build guess it is loading okay there we go okay let's see so this should generate all of the boilerplate code that we don't have to actually do anything for for this county class and I'm guessing this will be placed in a counter folder let's hope so at least okay so it didn't seem to do anything so it succeeded but counter the dart is the same name right okay there we go now we got to generate a file I don't know why it wasn't working to begin with but we seem to have a counter generated file and this is half that all of the boilerplate for that counter widget or class good enough let's continue if you're making changes to the store and want to generate F G file automatically you can use the for arcade I want that because I'm probably going to make a lot of changes so what this will do is pretty much just watch this file so when I make changes that will override a file in the gen or decoding the generated file may have I'll run this command a to X is a 5-4 see an elevation of okay that doesn't affect us connect the store and add observer to your widgets okay now comes the that you I call them so I'm just going to minimize that and we're going to use to move this class so we can get a bit of separation I guess source new folder pages okay let's create a counter page and that will pretty much be this one we're just going to rename it to counter page then of course we're going to import the material design the entire room come to page your name fade okay there we go so now we have the counter page now we can go here again and go type encounter page let's just see in the emulator if we have everything working we can close that down there we go okay so we have the normal counters now let's implement our own counter so if we follow this again we can see that we're going to connect our we're going to first stash it our counter okay so they seem to instantiate it globally we can just in statute it actually in the counter page we don't care about the specific state management for the multiple pages right now so let's just create a new counter class finite counter is equal counter and let's import that we can remove all of the specific code for that local counter and this one can be empty okay we're going to have the identifier let's just make this private and we are going to okay so we can get access to them they count from the class mmm we're probably is going to say this and see if we can get the zero count from this first okay there we go now from the increment we can call our counter again and then call the increment method and I guess that's it let's see I will probably need some kind of way of not fine that the widget is changing so let's see how they are doing that there seems to be an observer here I could make a video about the profile page that's right could you make a video about the profile page that receive retrieve data from firebase contain profile avatar full name e-mail use name phone numbers change password from the app in flutter yeah I guess I can't make a video from that that should be no problem so here we can see that they are actually wrapping the text widget in a observer I'm just going to see if I can create the observer here so we have the observer and this observer is taking a builder with build context really don't need a context I know you can do the arrow function you don't like to use a arrow function sometimes I feel like this is a bit cleaner maybe you don't know yeah because when you use a arrow function let's see if I can show this a stunt like this this kind of indentation I don't feel like that's that nice to look at maybe that's use me so it's prefer instead of using that arrow please return the widget and then I keep getting that consistent view with all of the other widgets so now if we go here okay so now we got the state updating in the app with our counter I think the mobile approach is very straightforward yeah so far it seems very very simple actually haven't got stuck on anything and I believe okay so that is the getting started so we can actually probably close that okay so what we want to make it now so now we have this counter class so how can we make this more interesting mmm should we make some kind of like when you push the button you get the image of a dog or something something similar or something like a to-do app yeah maybe we can make it to do app I believe don't they have a example of making it to do up I don't what make like something they'd already have an example of I just want to make like anything so we can just like play around and see if we can learn something new what extent are you using to outline the flutter code looks very producer do you mean this lines right here this white lines here if that's the case I always forget the name I think it's like dart or preview yeah it's if you go to settings you can get the dart preview and just enable this one you should should get those outlines don't really know what we should make I really want to like try to make an app with complexity I like some of the dribbler science such as a music player yeah maybe the the one thing that I'm lacking on the most in flat is actually getting good at designing things I'm trying to get better at animations also so let's see what are we going to make maybe we can remove the app or so we can get this bit cleaner view and if we push the button should we get a image it's really hard to get a good working I want to have some kind of API so maybe that's good we can have maybe we can have multiple things so we can have one button for incremented a value we can have one button for used fetching a image and displaying that image on the on the app and maybe we can implement something more afterwards let's go if that I think github or server open api's you have this one see if we can get it loading this is a very handy handy repository if you want to like learn more or more on api's it has a lot of like open API thing you can use get on without some of them requires you authenticating but something like for example these cat facts seems like it doesn't need any authentication this is easy to set up though Docs homepage oh-kay base URL for the endpoint cat fax response time would likely be a few seconds long on the first request but one endpoint facts okay we should we get the image or should we get cat facts if they like cat facts is more fun let's try this cat facts API and let's start with the mobile X counter or not encounter a new model so I guess what I need to make sense of is how we're going to structure the model so are we going to have like a a file which is the complete store or are we going to have a file specifically for the cat facts and then one file specifically for the counter yeah let's go with that so please louder let's see I don't know if I can hide the volume maybe I can boost it up a bit let's see filters gain is this better and then we can also add a filter as a compressor is this any better just let me know okay good okay so we have a a folder or file for the counter so let's make one for the cat facts and we will actually start with a folder again so cat facts cat fact so I guess so what I always want to do is when I make models I wanted to be like I don't know the English word for it so it's single model and or a single object and not multiple objects so for example if I make a model call a cat fact that would be okay but I wouldn't make a a model called cat facts and so how would the mob ex look like that would I use create a model which is not yeah I would okay so prop okay let's just try it out and we can see so this we're going to rename to cat facts cat fact let's just go with cat fact and we're going to create a new file and this file will just be this will is be a like normal normal object not anything relating to mobile X plus four cat fact and if we check the API really fast we can see that we have this endpoint and we can do slash facts holy hell can we limit is to select one more something case we are getting multiple ones that should be fine in a way so we're getting multiple ones they contain a ID a text so let's do like this so we're going to copy this one right here all the way until we get to let's see I'm just going to move that here so I can see if you write something cat facts total fetch them yeah that's true so object is from case we get an object with the idea of this the text will be here we're getting a type which is cat and we're getting a user with an ID name first name last name upvote and useless okay we're getting tons of information here okay let's just do like dart to Jason Jason to dart I mean so we can generate the generator class we just going to replace everything and what are we getting we're getting the ID let's close this one so this one will pretty much just be responsible for being use that specific object and I'm just going to write this maybe is a bit unnecessary but let's go with this we can make a out unit which has a cat fact we have the user for that and we have the name for that user I guess okay so we have that normal object for the for their cats cat fact let's now make a new file to be the actual cat store if that makes sense so this one will you speak at start and this one will be responsible for used having that state of every like all the cats I guess let's go start just like make sure if you see me doing like stupid mistakes just let me know this is just a weird way of thinking for me I haven't really used like a something similar to two mo bigs I tried out sculpt model song and used to learn the basics I haven't really used it in like a end to end up mm-hmm so this would probably be have its own folder so instead of models it would probably be inside like mob X folder yeah that would probably be in a another folder so we're just going to call it mobile X we're going to have a new folder inside here I'm just going to clear everything up because I don't think it makes much sense to have my normal data models being in the same folder as the mobile X models so we have the mobile X folder here and we're just going to create a folder called yeah that's that's the that's why I didn't want to make it in the same folders because I have my date model here which is the cat fact and these cats will just be like the mobile X store and not actually a model so the mob X folder will be cats store maybe we can move this file over there and we're actually going to use do the same with counter and I missed it so kiss questions I miss going to move this really fast I'm going to create another folder here and let's name that counters to work we're going to move these files over here we can remove the counter folder and I'm just going to import the right one there we go I'm just going to see if everything is working again how Mobius works is joined is it like streams with easier what's pros or cons like so far it seems to be a lot easier than streams it's hard for me to explain because I enjoy working with strings I don't find them quite hard but we can shake this counter example so we used for example if we have a value that we want to have in the app or listen to we just have this I don't know what it's called yep the @ sign and we have the value so that means that we can listen to this in the app so for example we had in the counter page we had you say observer and then we could used listen to that count variable and then for the actions which is use the methods that we want to yeah decorators exactly and actions are used responsible for what I believe or what I guess it's it's responsible for is used making sure that this value changes and also that all of the observed walls or the all of the widgets are notified of the change so I guess if you if anyone can correct me in the shots if you know I guess if I would remove this or actually can you stress this if I remove the action okay I actually don't know there is a for the action maybe we should check that out mo vixx action okay let's see actions will have mutated the observe or thread a mutant in reaction add a semantic meaning to the mutation for example instead of just doing fine increment action carries more meaning actions are used to modify observable values but what's more to it because if I would remove the action wouldn't that make it so I couldn't mutate the observable value because if I remove this you save that so there may be a neat rerun this actually we can try it because I can still change the value or the count do I actually need a or is it is like good practice to have that okay to make sure that they notify only when the changes are complete Tomic completion of the action okay so pretty much what I guess is that actually makes it is a like a notifier I guess so it just makes sure that everything is completed before you not fight maybe someone can correct it if you have used mobile X a bit more than then my how long have you been streaming more than my 30 minutes of running around in circles okay so we have the counter so let's let's close that one and what we pretty much did now was we created a mob X folder so we could have let's move that also into this one and we can remove this folder so now we have our models which is used a cat fact and that's just that the data the data model so now we have the mobic store which is the cat store maybe we should have a better name information for this so cats store and if I remember correctly we're going to create a abstract class ok so it's more about how the generated code will be will be created when I say with the watch or I guess that makes sense if you don't have the @ sign or the decorator when you generate a file it won't make much sense to how it's going to be created ok so we have the cast or we're going to create a abstract class and this class cat store is going to be private and we're going to have the store we're going to have a part which is the cats store because this is going to be the same naming convention ok maybe we should rename this and so cats store so this we cast out little darts and we haven't degenerated this so I don't remember the last one yeah it was this one okay so let's go here again we're going to add that so the counter it's won't be a counter it will be a cat store cats to our cats store okay doesn't really matter we're going to have the private Cal store and we're going to have the counter be replaced with this so if we would save this will this generate file yeah okay so what are we going to create inside here we will have a observable maybe we should have maybe we should just have a ListView with all of the cats facts and we can have like some some nice styling if you guys want to also see how we can design something also not make not make anything too too basic okay so we're going to have a observable observable and is observable will beust be a list of cat facts we're going to give them in cat facts and this is just going to be a empty list to begin with we're going to have a action and this action will just be something like fetch cats it would be more fun to have dogs here so we could have a function called fetch dogs and fetch cats which care Katz's fact of the plural makes everything weird it's going to be a function so what are we going to make here so this will be responsible for getting the data or the the facts and we will then transform all of those facts into a list of cat facts hey sup hey Sam how are you doing nice to see you here okay so let's see if I can understand this we have cat facts we are going to fetch all the cat facts and when we fetch that we will add that to the list and as the API that we tested and this one this used seems to add like or get all of them I don't know if we can limit in some way an animal fact they don't have like any documentation for it Mabon let's just for now you get all of the cat facts we're so we have the end point for getting all of that we are going to close that okay so we're going to what are we going to do we're going to use HTTP to need HTTP plug-in then right let's just I'm just going to get the latest HTTP plug-in really fast so we're going to go to dependencies and we're going to use add HCB and let's close this down and we are going to just change this to a future void because this is going to take some time maybe you want to use future void yeah I should change that now um okay so we are going to do some some small things see if you can remember here how we are going to do this let me check here so let me is I'm used to checking the documentation for the HTTP HTTP a really fast so first off we're going to use create the response for what the HTTP gets and we are going to don't think we have imported it HTTP of course we haven't so I'm just going to take this one and we're going to write it to as HTTP so we can then write HDPE dot and it's gone sick and there we go so we have the HTTP and I believe there is a getter function so the URL and we're just going to we're going to define the URL maybe up here static promised private cat facts URL and let's just get that one really fast I'm gonna close this there we have it so it just becomes a bit cleaner there we go are we going to handle all of the different cases yeah maybe we should do that can I like have this side by side so I can see this shot better okay so the new it's going to okay it can't show that the the streaming window isn't fit for mobile so when I try to make it half the size it would just become really shitty okay so we have the response we're going to use check the different cases maybe we'll use check if it's loaded or if it has the states code of 200 and then under also all of the other cases we'll just make a failfish so if the response that's code is equal to 200 so if it is successful I'm going to add some comments in case some someone if new with this status code 200 is the same as means that we made a successful call or get so we have the sticks code so we go data and here we are we just going to print it to begin with so fail getting any data so let's see if I can remember this okay so mmm so we have the the cat facts list and we have their response maybe we should what's the best way of doing this because this will use to generate a huge mess of code pretty much hmm let's just for now I don't often work with HTTP so I flick forgot this one so this is very simple if you used to get a single post and then you we can use decode it and put it as a object but this one actually has a ton of different things I will use JSON decode but I don't have a maybe it works anyway so let's see let's try this and so we do json dot decode and we're going to import JSON or convert and we're going to decode the response dot body final items and this should give us a dynamic can we like I want this use generate a list of string dynamic or a map a list of maps maybe it's that right yeah okay so when we decode this we will actually get a list of string dynamics maps and what we're going to do is use pretty much just echo or make all of these to our list of facts so one way I've coded it we have dead eco dead items and then we can decode items dot map item and we can do do cat fact from JSON we can use pass I missed I'm probably going to make like a super huge mistake here let's see if we can do it anyway going to create a to list and we can assign these to our cat facts let's see if this this works and let's go in the main folder so we have the fetch cats let me know if I I am did you know some mistake on this one I'm not completely sure if that's right so we have the cat store which has a list of cat facts we have our action which just gets all of the cat facts and then used assign that to the list so let's go to not main we're going to create a new page believe let's create a new page called cat facts page dog parts going to create a stateless widget maybe yeah cap back page and we're going to import material let's just create a scaffold and inside the body we will simply use let's actually before we create the body we're going to instantiate the object or the store so it's this one we're going to do final cat store cat store which is equal to the cat store it's going to make it clearer last long there we go and I'm going to just make this there we go so we have the cat store so let's just make a simple list view to begin with and then we can use like change it up if you want to so inside this product we're going to have a list view and we're going to have a list view dot builder makes more sense maybe and this takes a I think count and I think count will be the cats store dot cat facts let's count or dr. Lynn and we will have blouse I have the item builder believe yeah Titan biller and item bin there will be context and then the index so here we can use to return a list I'll go and let's just put the title as create a final cat fact and that will be the cats store dot cat facts at the index and I can already see that we have don't have a observer so I will actually plug this in Observer soon so let's say that you'll have the type I don't know what the type is but we will have the type a text with the type and we will have a a subtitle which is B the cat fact stop text maybe something like this so what we're actually going to do is this list view builder is going to be wrapped in a observer and this observer has a builder which has a context to be near the context we're going to then return our list view so now let's switch this out to the cat facts page let's remove this one probably going to get some what's an observer would just do so the observer widget is part of the mobile X library so what is pretty much does is that it notifies the widget tree or the the child which is that they need to rebuild when the observable values changes so for example when we add a value here this observer will be notified so that this will be rebuilt so we can get new items so for example right now we're not getting anything so let's just create a constructor or let's do like this actually let's create so inside body we will have or outside the body we will have the floating action button is keeping it simple and on the unpressed we will have the so like in this yeah pretty much so if set state you're actually not find the or notifying flutter so to speak to rebuild the bill function and then to change all of the values that would be all the values with them would be displayed on the screen so a observer is a way for mobiles to notify the okay that for example this this list has now changed so we now need to like display those values inside these different list styles if that makes sense so we have the cat store we have our fetch cats facts yeah it becomes quite more efficient efficient if you have the observer which just makes it so that this list is the one that's going to be rebuilt so instead of use dribble in the hole to hold the whole tree will use revealing this specific part let's go to the I'm not sure if this will work let's right okay so type error internal link hashmap string dynamic is not sub type of type list okay let's see don't know let's Google is actually probably someone else has had this problem before me this is simply used a map but then we don't get ok so this was what I was thinking of try using just lists but this won't be a list I believe this is continue that bliss work but what's the type of this list I don't think this will work no so pretty much what I am getting from this site this is not but it is a list oh I think let's just make it dynamic see if we can get Rudy's dynamic is another type string dynamic of course we couldn't how do we how do we get a is anyone aware of this so this place actually used gets a a ton of objects and they are separated with a comma so I guess this is a list so it should be a list with the object oh wait a second we'll have this all section first and then we're getting a list okay maybe the API is the more complex thing I don't think mobile X's making this I'm using ListView builder I'm fetching items from the same birth database it's work but my scrolling is not smooth as native app it should be do you have an ID when are you fitting the items for the database from the database and how many items are a it should it be any like problem with the amount of items and also are you running in the bug mode or are you running in a release version of the app okay so we are getting a stream dynamic and this decoded will be inside here getting all list of dynamic is not a subtype of the return type okay what are we actually getting from this so we take the decoder items we select the owl which should be this one right that means that we should get because it's only one of them here and the last one is at the end so this means that is a list string dynamic we're mapping this from JSON let's let's try it again I always want to see you both error I am getting type list dynamic is not a subject of type list cards maybe we can make it oh yeah maybe that's that makes sense mmm-hmm null is uploaded okay let's just focus on the more important things done so we're going to have a cat facts this is going to just have should I use this or learn blocks suppose you learned block these days like you know my experience most of the state management solutions will get to work done it's so it doesn't really matter the block is quite hard to get into in the beginning especially if you don't know strings but it's quite worthwhile when you get a understanding of streams so we don't care about the user of votes let's remove that let's also remove these we don't care about the ID either and we can remove all of these if we can make this a bit more simplified let's remove the user class and all of the other code right here list of dynamics not subtype of type what am I missing so this gives us a list let's let's do like this is that let's not make it a functional statement they just going to test if this is working so we're going to create a for each final item in all of them and we're just going to print print item for now I'm just going to see if we can get this to work at least so each item is a object so doesn't that mean blood we should be able to do item and then used get the text for example what am I missing edit that works decoded items all returns list not map but what did I do since I yesterday it's returned a my a list which I wants to map through and that would give me each object or each kit maybe someone can make a pull request I'm not know I doesn't really make sense for me to get stuck on this so let's just for each item that we're getting because we're getting all of that at the same time so let's you sleep through them and add them each one by one so we're going to make a final cat cat vac is equal to catfac dot from json and then we're just going to pass in the item chance at least and here apply map method every itit yeah I think I did that maybe maybe I'm useful getting something so let's just not get stuck on it some is going to see if this Atlas is working listed from oh okay let's go let's try you with your solution it's probably better than mine okay so what did you write listed from and then we map that does that work oh that actually works what was the reason for it decode all returns at least but why is the reason that we're using listed from doesn't at least copy to another list creates a list containing all elements okay it works at least so let's not get too stuck on that so we have our list of items or cats a lot of cats so what can we do to make this more fun maybe we should have like some kind of way of is not fine that we are loading when we push the button so these are some things that get like the time used to getting automated with using block or strings so when we when I'm using a stream I'm used specifying in the the view at least is oh maybe I can do like that yeah so pretty much when I'm using the block way is that when I'm getting something or the stream is empty that will used create at spinning indication automatically and when we have that items in the list that would then signify that the list is not empty and the spinning indication would become so how would we like getting that more reactive way inside here so I'm guessing we have to specify types for that isn't like good documentation for this on the mobile X documentation I'm is going to open this here so we can already okay so we have the action state computed values we have a check computed values actually I can we see if if we can find some example of computed values also you can find virus that would be to write automatically when reliving computed echo or by using get case you have the two deuce okay so we can have compute the values that would then for example filter out that we want to first ten items in the list that seems quick pretty cool cool cool reactions so similar to computer battery instead of producing a new Valley reaction place has side effects for the thing I'm pretty much flutter packages maybe we're going to use the documentation for this one so I have the computed values that makes sense we can try that out also hmm so for example we can listen to the values and when that change that will change okay I don't see anything specific with that so let's just implement that ourselves so when the list is actually we can use we can use clean when we've okay I got a good solution so what we can do maybe it's loading observable value yeah I thought about that but maybe we can use yeah we can do it is loading that's probably better I will just try this one first thinking of when we use push the button that would clear the list and when we have the list is empty we can use set a spinner the problem I have with like is loading variables in some cases is that it doesn't really reflect on what is loading if that makes sense so for example if we had a bunch of different values that we would listen to that is loading maybe that's is loading is used responsible for the loading of one variable of course we could have naming conventions covering that but I used to feel that it should be more automatic or reactive if that makes sense so we have the observer we can use to check if the cats Len so if the cats length is equal to 1 or 0 I mean we can return a I always forget this is it loading spinner spinner progress indicator there progress indicator linear progress circular there we go case we have the and then we is going to have a else oh yeah I always forget the name of the circular progress indicator I always try to search for loading as we get a loading up in the top left corner so let's use wrap that in a center widget so we get some kind of loading and let's see if we get some items that's not loading anymore so one thing I'm guessing so for example if is the n1 by the way here using Mobile's for any application that would be let's use to go um so we have this list okay we can have the loading indication so let's just for now use clear the list so we have the cat facts not clear that should like force the list clear and we will get a spinning indication I guess we should doesn't it okay let's just maybe have a variable for is loading then isn't this the case where we can use computed values computed computed so if these cat facts am i doing it completely wrong now where do we have the Mobile's for computed values at computer oh it's a getter okay so we'll get cat for the name for it is loading ignore what I said earlier let's just have is loading so it's loading comes from when the cat facts dot length is equal to zero can we do like this so it's loading does this update the value when we're actually no it doesn't what is like the preferable way of handling this feel like oh I didn't have a cat facts not clear didn't matter let's yes for now say the observable and we can have is loading which is a bool and this is not a getter anymore it's just a rule is is loading secretive false true in the beginning considered to true when we start the loading indication and also when we have gotten items we are going to set this to false this is probably a better use case for younam's but let's just try it this way now let's use a enemy instead because I don't think the is loading is like covering all of our use cases so for example when we're fetching an item we can get that item and that will indicate that we are having a loading indication and when we get that item or that list of items we display them but also if that fails to load we want to like for example display something that makes you see that we have some kind of error so let's actually do you know sister you know state loading states maybe which is equal to you didn't look like this is making it on recipes simply this I forgot to start you know okay it's just like this and then have the values inside there so we're going to have one for good naming conventions good naming convention so we're gonna have one for complete that maybe is that it's an aiming for enums right you know yeah let's have none in stead so none loading error so now we have loading state which covers all of this so instead of having a pool we can have a loading state and that is loading will be set to loading States not loading to begin with so we can't do that here when it's done we're gonna sit to none and then when we have some kind of error we are going to set it to error so that makes probably more sense now we're getting tons of errors just because we don't have the boodle anymore I guess yeah so now we can instead shake if the if the East loading or that's a bad name in question so let's call it to the state hmm so now let's see now we have something cool so now I have the state and if it's equal to the not naming did I give it loading States so if it's equal to loading we will display in the loading if it's else if if the cats tour dot state is equal to the loading state of num we're going to display that and then we just going to have a else statement which says that center with a child of the text this one is just going to be there was one error we could store that value also in a by apologies but doesn't really matter so now we should have all of the different cases so if we would change this don't I change that so when we get item that would be none cats dot state maybe we should rerun this wait a second there are no observables detected in the builder function mister not isn't this values hmm because a widget that revealed every time an observer referenced in builder function is so how do we actually reference it can't we have like the if statement or do we need multiple observers it doesn't make much sense you and to anyone know why this is happening let me know in case I'm trying to see if I find a solution greeting can we give names to observables so observable state and flutter mode X naming you know SPC generics missing what small box mob X is like a state management solution for flutter or for many different types of observer I need to wrap my cat facts with a observer but doesn't I'm getting really confused here so hmm a observable future is a wrapper around the future and gives you a way to react to the status changes like redux yeah Redux is another way of managing States a store so stuff like that Mobius is used a more I believe it is made to be more simpler to understand because Redux Redux is quite a bit of boilerplate and hard to get into I observe a few G's of wrapper around future and gives you a way to react to status changes but should I so I have these two observables or these two values doesn't it isn't this enough to notify the view that these are that I'm looking for changes on them would I need to specify the type somewhere I saw that you could specify names but I don't know if that changes anything the clock getting quite late let's see if we can start to finish this up also observable fugitive wraparound fusion gives away lettuce should I make a collection server I don't really think the observer fuse is a good approach how do I use where's the documentation for the observable future observe God for future I'm just trying to understand because what why is the reason we're not getting the state changes of the different variables in the cat store shouldn't observer notified when we have any changes happening in this cat store or do we have to specify a type for it like by the way with the observable future when the stream is over make sure if you know a better way of handling instead of setting to different states make sure to like create a pull request on the repository and maybe we can get a better solution for this but let's see now we are getting and changing the state but we're not getting the states here I guess they are not observed was detected in the builder function for observer tender copies hmm you see the message with the name cast OS and observable um don't you have to specify castithan observable well like I have the annotation forward observable for the variables shouldn't that be enough it's worked for the other cases so it worked when I didn't have the if statements they're not observe was detected in the builder function for observer at one observer of Paul list does this make any changes not observables detect it in the builder function for observer two and that would be this one done so observe verbal and then we pass in the type I think everything should be oh please finish that makes sense let's see if we can oh did it actually what was the reason tow package graph updates okay so the reason is that we didn't maybe let's see let's hope that at least let's just do like this see if it bit something yeah let's go to the debug console push button oh there we go oh so it wasn't generating well now I feel really really stupid good catch by the way okay so it wasn't just generating the code for that observable or that changes when was it broke actually terminating bills due to package graph update mmm okay okay but listen to get some kind of indication that we were looking for so let's see if we can also do this so let's use to change this to response code 300 so we can get a taste else statement let's see if we can get that that should be the error right we could also have a state for the variable yeah so let's create a constructor now cats store so let's move all of this and would list make a private function so or should we do this oh we can just call this one so in the constructor we're just going to call the fetch cat facts it's pretty late now but I want to do one more thing actually and that is just putting that maybe we should have another stream what do you guys think about having another string tomorrow used to continue with this a little bit more because we haven't really touched with the mob mobile X package as much as I actually wanted would love to hear some opinions on it or do you think we are with everybody will really just Lurky now because I have some more IDs but it's getting quite late here we use doing some very very simple things right now just getting some kind of data displaying that in a ListView hmm maybe we should use end it here and maybe I can continue tomorrow what I'm actually going to do first is used setting or adding this cat store in the provider so if any one of you guys haven't checked out provider yet I'm is going to make a simple example of it so we have this material app what I want to do is actually have this cat store globally so we're just going to wrap this in a new widget called provider provider and the provider takes a builder and this builder will just be the cat store and the calso is not to instantiate it so let's do that we're missing that type type wait what am i missing now let's use check flutter provider really fast so we had the provider with the object Autobahn so let's say pi which is cap store then we have the Builder function or let's see here because the function can't be assigned to the permit oh we are not passing the context there we go how do you get in line error message do you mean the big you read the code that is from see if I can find it error lens I believe the error lens this is gives a huge red line or yellow line for all the errors I don't find these squiggly lines to be too noticeable so I really want to make them stand out so now I have the state of a cap store in with provider so now we can simply do final cat's store is equal to provider but oh please get that city's type of context Oh there we go so now I have some errors let's just reload this so that should be pretty much the same but now I have it completed and we can get it from different places of the app but let's just wrap it up here I will shake is and by the way let me know by liking the video also it really helps the video the livestream doesn't get as much attention as the normal videos so liking the video really really helps but I will list and pretty much the stream here I will upload everything to github maybe we'll make another live stream this weekend and we can make some more taking a bit more look at this can I make a pull request for the next stream like you can make pull requests whenever you want the repository is open so you can if you find anything here or for anything else that we are creating and lyceum just make pull requests or issues or whatever you find that will help you or help all the other people that are watching this but let's end the stream here and we can check on the weekend if we're going to continue thanks everyone for watching and also don't forget to like the video and I will see you next one bye

5 thoughts on “Flutter Live: Learning MobX | Learn it with me!”

Leave a Reply

Your email address will not be published. Required fields are marked *