Build Memory Game App with Flutter | Flutter Tutorial For Beginners

so hello and welcome back to my channel my name is sanskar and today we will learn how to create this memory game app so basically how this app works is we will be shown with all these images of different animals and yeah as you may already understand we just have to match different images so for example who's not watching but if we selected wrong then it will be auto hide it but if we select the same it will be a point okay so the demo is done now time to make it so firstly i will create a new project i will say footer create memory game 2 it will get it build and i'm going to open it up so i'll go file open to open okay so first and foremost let me make the size of it good enough i think it's fine now i don't know guys like the screen size the problem so okay so first thing first what you have to do you have to get it all all this boilerplate code we don't require this just keep this and now i'm going to create a stateful widget i'm going to call it home and it's called home page copy paste get rid of this okay so these things is done so basically we have a container so first of all let's understand what is happening in this game so we have all these so this is actually a grid view we have a text and a text so this is a column and it is in the center so basically what i did i use the property which is called cross access alignment dot center so it is in the center this is a grid view consisting of different tiles this particular one element is a widget which is you know kind of an element and we are providing it the values and so on so so that's how it is working so we can match and you can see like for example if i select one and for that time i will not be able to click on others once that is done then i can okay so that's how it is working so now the time is let me get rid of the test delete we will come to the library create a new module we can call it a package and that's going to be data and we need one more that is going to be models okay so before that let me make the basic structure for the app hopefully the text size is hopefully fine so please do share your feedback in the comments i will be more than happy and if we go for the scaffold what we want is body and inside the body we will have a container i usually start with a container while we can directly go with the column but it just provides you different properties like padding margin which are very essential so now if you go for column inside the column we can see um these are two actually the first is a column and this is a grid view while we can directly provide these so let me do it this way i will say text okay we first need children's no worry we will say text inside that we will say 0 800 which is going to be the maximum then we will say text it's going to be points okay next up we have this so this is a grid view and you can notice there is a space between them so i will say size box height um i think this is around 20. we can play with it later on that's not a problem okay so we have size box now we need a grid view so i'll say grid view inside that grid view we have different properties like shrink wrap because we're using it inside the column so shrink wrap we can use other properties which is one of which is very important which is like grid delicate we are going to use silver silver sorry sliver grid delegate with um it's going to be max cross extent max cross 16 this is the one or that okay and inside that we are going to pass two things the first is spacing so that is going to be main axis spacing that is around 0.0 and then we have max cross extent so that is around 100 okay seems fine right now we are not 100 sure but uh yeah moving on now what we want we want that tile to be built right now okay stateful we will say tile okay and this is style okay so in the tile what we can see we have this you know kind of an image view and it have some margin around it and that's all what we have there is nothing more than that so i'm going to go inside the child i'll say child and we have an image view image.asset okay now what we need to understand is these images are not kind of fixed they are going to be changed so this should be a stateful widget that's why i have selected that to be stateful widget now we are going to get some values from um here which will be passed on to this style which will be used so what will be the value so the first thing which we need of course is the image asset path okay what more we need um that is one and second thing is we also want to know if it is selected or not so what is that basically this one is selected so if i click on it it's not you know working but if i click on this it's changing so that is one property which you want we want it is to be selected or not and we want one property which is i believe parent so i'll use home page state and i'm going to call it parent i hope that is fine okay now we will go tile and we will see this dot image asset path this dot selected this dot parent okay now we are able for example the tile is like ready to take these values let me assign these as well images set okay we have to type widget whenever we are using a stateful widget to use these we have to first type widget then we will say image asset path okay so we are assigning these values as well just let me give one thing as well margin edge and sets dot all five okay so we are getting the value the tile is ready to get the value is able to set them as well we have some click listeners to be like on tap functionalities to be provided but what we also want the data means what are we going to uh like give these images a path like what where is that so that's why we created that this one data and that we will have a file which is going to name like let's call it data so inside the data uh before creating the data actually we can understand that in this one in this tile we have these two properties which is image asset path and selected so before actually getting the data or creating the data we should create a model for it so i'm going to call this model um let's call it tile model okay so time model inside tile model we will have a class i'll call it tile model and inside that we need two properties so it's going to be image asset path and we need to have a boolean which is selected let's call it is selected i hope that's fine yeah okay now if we talk about tile um that we will going to say this dot image is a path this sorry this stop okay sorry sighs oh my god i i usually like forget this a lot so please please make sure to share your feedback if you feel that's quite small or something yeah so we have uh the constructor as well ready to go we have the values now let's create some getter and setter methods the reason why we are creating the getter and setter methods is basically we will be setting the data in that this file and we will be getting the data in this file okay so let's get started with that so first of all we will create a center method so certain method does not require any return that's why we are going to use a void and we will say set image asset path okay and inside that we are going to take a string um let me name it get image asset path okay this is basically a variable so you can name it anything okay now what i'm going to say image asset path is equals to get image asset path similarly we will create for it selected as well void set is selected and i'm going to say string okay sorry this is going to be boolean right so boolean and we'll say get is selected after that we will say is selected okay selected is equals to get is selected okay so these were the the setter method so they don't require any written value but now we are going to create a getter method so that will be returning a value so we will say get image asset path inside that we are not going to take any values we are returning the values actually so we will say return image asset path hope you got it if any doubts please please feel free to comment i will be more than happy to help and get is selected okay and we will say return and yeah it's selected any problem okay this is going to be boom done moving on to the data file let me increase that i don't know how much size it is okay so the first thing i'm going to create a function which is going to be returning a list of tile models it's quite big i'm not sure okay we will say get what is this going to be so what we need is these tiles or we can call it anything you want for example i am going to call it um get pairs because these are like pair images so we will say get pairs l is not imported so i'm gonna okay it's not import style model we should call it okay now if i import okay it's imported i don't know guys like for me the text size is quite large but hopefully it's good for you anyways um tile model then we will say list style model and just call it pairs new list what am i doing right now why am i creating a new list so let me do it first and then it will be more easier to explain then we will going to have a tile model tile model is equals to new tile model done okay one thing first so we have a list and we have a tile model so what i am going to do right now is basically saying tile model dot set image asset path so right now we don't have the images i'm going to take that from my last project assets then uh so basically first of all we have to create a new directory we will say assets and then we should paste go to pubspec.yaml let me screen increase the size fine okay um scroll down 44 line and just type it out assets slash so this will allow us to access all the images inside that folder okay then just click on packages dot get done so now what we will say we will say assets slash one by one every name so we have we are not going to use correct and question that is after we will use fox for example box dot png yeah okay now we will say tile model dot set is selected false so initially all of these are going to be not selected okay now then i am going to say pairs dot add tile model now as you understand we are going to have the same uh to be like two times right so we have what i am going to do for that is going to pairs dot add model and again then we are going to freshen up our tile model to be a new and we are ready to add the values again so i'm just gonna copy this paste this is the second so we need around eight for this third fourth fifth sixth seventh and eight okay now we should update these as well so the selected will be false for all but this will be updated so we'll say this this just just pasting up the names along monkey panda parrot do comment what is your favorite animals among these question no they're not going to use question we're going to have it by the way zoo is this elephant i am not the one who renamed it just to be clear by the way yeah for the images i downloaded them from flatiken.com very good website always recommended um so yeah our this data is done now as i was saying we will get it when are we going to get it when our app starts so this is the one which is going to be called in this we are going to use a property called init and in the init property what we are going to do first of all we need that list so we will say list tile model and we will say pairs is equals new list tile model okay and just these let me import these as well so imported after that this has been spelled so this is fine now what we will do we will say pairs and pairs equals to get pairs so now you like hopefully understand what we are doing that we are like doing all this data and one thing which i always like this is like always forget so yeah we have to return the pairs okay here this is a list kind of okay so now we are getting all these pairs here and we will be setting that over in this time okay so just a second yeah now we have to set these to great view so how we are going to do that we are going to have return oh sorry children i believe child what we can have you have children i think yeah list dot generate this is going to take two things the first is going to be length so length we are using pairs length okay no now the one thing which you should understand we can directly use this uh but we don't want to manipulate it why because i don't want when i'm just like selecting these um and we are you know we are setting the question marks and all because of that this must not be updated because we have a pure thing which like these should be random values right now if i will for example let me let me show you if we directly give this length so for example i say pairs dot length and generator is basically index and that then we will say return tile and now we are going to take the value so right now just let me just go for pairs pairs paris not paris p a pai and we will say index dot get image asset path okay now one thing which is these are named parameters so i'm just going to cut this image asset path and that after that we will say what selected so selected we will say pairs pairs index okay is selected and then i'll say parent and this okay so it is saying bool can't be assigned to string cut this say okay so the problem which i was mentioning is that i think first of all it should be working yeah we will be doing one thing because right now let me show you that it will what will happen is we are directly assigning these one by one so we have firstly fox then we have hippo then we have horse so what will happen fox fox horse oh sorry hippo hippo horse horse but we want these to be random and the thing is it it's just one line thing so what we can do basically type pairs dot shuffle and done it's going to be randomized now we have one error over here let me fix that quick semicolon like this is the biggest thing for like programmers like there should be something that could check all these semicolons at least anyways um just give me a second it should load i know guys like this video is going to take a bit more longer because it's not very simple app have some things to be learned so yeah meanwhile when it's doing let me explain you what is going to be the process so what i am going to do we have this list right now but what i will do i will create one more list and that list will be the one which will be storing the values which are shown over here so what we will do as you can see when the app starts so now you can see these are shuffled if i comment this and come back over here and restart it you can see these are arranged very properly uh first fox and then hippo then horse but if i use this functions they are going to be shuffled up and that is what we want we don't want that to be sequence in a sequence right okay so uh that is done what i was saying is what i want is these um like they will be shown but when we initially start all these will be shown but after just five seconds which i have um it will be shown a question mark over that place right so how we are going to do that we are going to create one more list so how i am going to do that i am just going to copy all this and just paste it sorry just after that i'm going to paste it and we will say get questions so questions okay and in this what we will do we are not going to set these uh different tiles we're just going to set these to question and it's very straightforward question so i'm just gonna type it question by the way this guy is like if you have any other suggestion of the things how i'm doing it it can be better um as always this project is going to be on github so you can like pull request on something like that or you can at least comment like please share your feedback by no means i'm saying i'm the perfect and this is the best way to or something like that okay yeah okay so we have created that that is going to just written a list of question question questions questions so let me create a list for that now the list which i'm creating it is going to be the list which is going to store the values which are shown right now so we can call it something like um visible here so so something like that okay we will say as opposed to new list um we are going to say tile model something like that tile model and yeah it's done so visible okay visible players so what i will do i will shuffle them then i will visible pairs will store the values of pairs you got it and i'm just going to update the these okay and what will happen i want a delay here so how we use delay we will say future dot delay it's right over there it will take duration sorry duration it's going to be in seconds um 5 to be exact and i think that's done anything problem function can't be named is it new map can be assigned to future dynamic function okay what are the things it takes it takes um one dot um so that's going to be duration duration okay okay okay and i'm very clear about duration but there is some error happening so i'm gonna say seconds and five we'll we'll get back to this okay um so what we want after five seconds to happen okay i think this is this is the issue which happens no okay so after that particular time what i want that these visible pairs should be updated with question marks i will say get questions and it is showing an error just give me a second um let me just confirm it bit quick what is the issue we are doing so it should be constant and two values parameters okay so what we will do we will cut the duration and have it like that we'll say constant duration and like that so it's done okay so we have a future dot delayed cons duration that so if i go to run and restart it again of course like we should open up this app then from the bottom up this is not the one this is the one i have too many apps open so i'm just going to close them okay this is the one so it's sinking now you can see these are shown but after five seconds which we provided here it should be converted to question marks if it is not then there is a question mark in what we did so i think five seconds are done aren't it okay okay set state so if i reload it you can see one two three four five boom okay so it's working perfectly fine we are changing these two question marks question mark i think that's correct so in the container we also want some padding in it so i'm going to say padding edge inserts dot it's going to be symmetric because we want different vertical so vertically we want around 50. horizontally we want around 20. good good good it's looking fine um i'm going to give some styling i know i'm putting style ahead of what should we do first but you know it should look good oh my god font size it should be and it's going to be font weight font weight around that's good great and we need some sized box it's quite at the top we don't we want a bit of space and points is fine we can just make it something like 24. okay so yeah this is fine but this is zero we don't want to show zero all the time you know the user must change so enjoy it so we will have something like end and i will say points points points which is going to be 0 initially and i'm going to now the reason why i'm defining these points over here rather than just defining it somewhere like this place something the reason is i want to be able to access that through this stateful widget because when user will click on this and the pair match uh it should be you know increased by hundred so that's what we are doing so yeah that was the reason why i'm like declaring it there so we can just use it here and everywhere um i think we don't even require any kind of import or something maybe i'm not sure yeah data is already imported so maybe through that but anyways so yeah we have the points now so the point is being loaded from there now what we want we want to give this a click listener nothing is happening if we are clicking on it so we want to make it able to be clicked so i'll say on tap what do we want on that so the first thing which we want to make sure is when uh we are showing because there are occasions when we don't want this to be clickable for example when we initially started the app okay so when we initially started we don't want them to be clicking this right uh we don't want them to be selecting it right off the bat so for that we should have kind of a boolean value which should decide should we allow them to uh click or not so i'm going to just name it selected which means that they are selected and we should not um allow the click so initially that would be false okay so and we will be allowing the click only if it is false so we're going to name that selected okay some things can get a little bit you know kind of complicated it's not very complicated but kind of so if you have handouts comment believe me like i'll you're giving instant reply anyways so yeah we have selected we have said that if it is not selected then only allow the click but initially it is like false so it will be clickable that's not what we want so what we will do we will come at this place where we declared the future and stuff what we will do we will firstly initially say when it just got like these values we will say selected equals to true so not allowed to click yeah and we don't need to have a set state for this because it's kind of fixed value and stuff uh hope so i'm not sure like we will say see again so we will say selected is equals to false once uh like this is done then we can basically make it false like you can click now and when we click on it just to see maybe let me just restart it now and we are going to have it sorry just just let me add one thing which is going to be a print and it is going to say you clicked me okay and i'm going to restart it one two three four five boom okay i was fast but yeah so now if i click on anything you can see it's saying you click me but if i click when it is initially showing so for example if i believe me guys i'm clicking it okay so it's not working but after some time it's working so that was the purpose of using selecting okay so what is the next thing so next what we want is we want when we click on it it should show what is behind the curtain so for that what we will do we have the selected property right so initially that is selected to be false so what we can do if the selected sorry we can say widget dot selected if it is false okay so if this particular widget dot selected is false which it is initially we will directly show what is in the asset path which we are providing a question mark we understand that but if it's not what we will do we can close this yeah what we will do if it's not um what it's not it's it's not false if it's true basically uh which we will do when he will click on it what we we want to show we want to show the image of that animal so where is it it is stored in the pairs so where is the pairs here's the pairs now one thing is important we want to access this pairs from that so we will not be able to do that so what i will do i will just cut this and paste it here so that we can access it from here and i'll say pairs okay and one thing uh we are getting the selected right we also want the index why because uh i know i'm not sure where are you clicking means uh from the pairs we have these 16 values but we want to show the exact one according to the type so what we do for that is we are going to just declare one integer in this which is going to be an index uh let's name it tile index and we are going to get this so this dot tile index these are named parameters if you just get rid of these curly braces you can directly get the values without even saying this okay now we will say tile index and we will say index done now what we will do we will go to the pairs and we will say index oh we're going to use style index okay again the mistake richard index how happy now we don't directly show this we want to get the image asset path but it doesn't make sense over here because we are giving or you should say we are providing a child and it's a value it's a string so we what we are going to do we are going to say um you know what let me do it this way we should put it at the this place you know because it's a string and we will have the condition over here makes perfect sense and let me make it more perfect since for you okay now hopefully everything is visible so what i did is i placed this conditional operator that if widget got selected which is basically selected we are using widget because we are calling it from in a stateful widget um so we are asking is it true or false so if it is true then we are showing that already image so we want to change this so let me flip this actually you know because we want to show this if it's true and this if it is false got it so if this is um true then we are going to show the true image which is behind the curtain um and if it's false we are going to show whatever it is and when we click on it we are going to set this so i'm going to say set state um and what is it gonna be actually you know what we don't want this selected to be updated and we don't need this because you know you can understand we have defined the selected over here selected over here so we can access it directly uh hopefully some errors are there correct um yeah because so we don't need that to be you know get this values because we already have it accessible and get rid of this in some cases guys i think i become fast because i don't want to like take a lot of time but i just want to make sure that i explain everything very properly okay so we have selected now okay so next what next we want to set that selected to be true so i'll say selected is to true okay so once we will do that um guys you know what uh if i will use this it's not the correct thing what i would i should do i should use pairs and widget dot tile index sorry this is the wrong way okay so what i'm doing is i'm getting like the particular selected of each here you can say get is selected okay that is going to be false initially now if we click on that particular element i'm going to save pierce that equals to dot rather than get we are going to say set to true hopefully got it get it okay we have an error invalid value value range is empty zero zero zero zero zero zero zero zero okay so what is the problem over here we have the widget tile we have so it is saying that relevant error occurring the following was thrown in valid value range that is what it is saying are we passing up the index yes we are are we using the index yes we are is there anything which we should be i think i did made the this error before as well it is saying you're noticing 0 1 invalid value value valid value range is empty one okay value range is empty okay let me fix this and i'll be back so welcome back and uh so actually as for the errors there is none um when i just restarted it and it was working perfectly fine so here's our progress so what we have done till now is if we click on any of the item it is showing that you clicked me and stuff um but what we want is basically we want to set it to true which it is a setting but the thing is right now it's not showing that right we want that to be visible sorry so for that what we will do we will just surround it with set state and if i save it again okay now you can see that the one which we clicked are visible so let me restart it again and hopefully it should work so we will click these okay just for the test purpose it's not going to be if you click on this okay so it's working perfectly fine we are basically what we are doing is we are updating these onset selected and over here over here we are checking that right so yeah so once that is done what we want to do now is we want to check that one the particular tile which we are selecting and the second one which you are selecting are they same or different so how we are going to do that we are going to go to the data file and over here i am going to add one variable we are going to name it lets call it a string first of all sorry um so we are going to store a string which is going to be called image or [Music] yeah we can call it selected image asset path okay and it's going to be initially blank or something like that we also want to save the tile okay so we will say selected um tile index index and we're going to make that initially nothing i just don't want to have wrong values rather error will be much better so that we can fix it okay so getting back to it we can just clear this all now what we want is we whenever we will click on this right so right now what we are doing we are just setting that to true this particular element but now what we will do is we will say we will have a condition just below this that if um this offers which is selected tile index selected tile index is equals to let's say not equals to blind okay so what i'm saying is that if it's not equals to do uh do this then do this or else do this so initially of course like when i click it for the first time it is this so it will be calling this function so what we want to do at that particular moment of time is we will do select um actually yeah we will do selected tile index is equal to tile index sorry widget dot tile index and we will say selected oh my god selected image asset path is equals to widget no not picture okay so let me describe this what we are going to do selected image asset path can be like i can type it like widget dot but that's not correct why because we are actually setting this question mark over there right that's the images part which is coming through that but what we want to save is the behind the scenes is kind of the image of the animal so where is that we we have that in pairs we are going to call pairs in that we will provide the index which is going to be widget dot dial index and we are going to say dot get image asset path hopefully that is clear so this is what we are doing if it is not it is uh like blank for the first time so first time this will happen next time what we will do we will check if sorry my throat is bit whatever so next time what we will do we will check so i'm going to copy this selected tile next and we will check if that is equals to this so okay not selected linux but rather selected image asset path is equals to this and if that is that means correct or else it's else wrong choice okay so let's see if this is working so let me just print correct something like correct over here wrong choice okay i'll just gonna save it and restart so we can see these are the options so this and this is same parrot and if i click on this you can see wrong choice if i click on this you can see wrong choice while this should be correct so it's not so it is showing the wrong choice at the first moment which we don't want so it for some reason it's it is able to get inside it um which is not it should not be true because we are saying that it should not be equal to this let me check it out okay so it should be selected selected what did we named it do we named something wrong i think the spelling is spelled correctly but anyways okay let me refresh it or rather restart and let's give it another try so this these are same so trump okay so we are getting that so what do we want so now what we want is once we have known that this is correct we will use a delay we will say future dot delay and we will say duration constant then we will say duration we will say seconds and this is just going to be two seconds um this time is just to use so that we can see that yeah this is same or something like that we just don't want that whenever we just selected it will be you know done automatically that's not what we want so okay correct so after this particular delay what we want to do is we want to hide these okay so how can we do that um we want to set those like you know even just back so one way can be that we are going to set that to be something like selected true or to false again um but that's not the correct option rather um i will say that this is uh correct or something um um what can we do let me think about it so we want that this and this are selected now we want to add the point first of all so let me do that points is equals to points plus hundred so what are the point is it will be increased by 100 now we want these to be changed by a correct so if it is correct uh we can if i directly define it over here that that is selected so i can just make it true because right now if it is selected it is showing this right so uh what we can do over here at points equals two points plus 100 is we can say let's give this a try so we have this i don't know why this is getting imported a lot of times we just want once again and we have this vis visible pairs we can directly update this actually you know like we can update the visible pairs to start this in this point to be updated to correct so let's let's just try that out um what i'm going to do i'm going to come over here and visible pairs i'll give it an index we will go for widget dot tile index i think that's correct yeah and we will say dot okay so of course it will not be accessible directly so what we will do we will cut this out and paste it in the data okay so the reason why i put this over here is basically because we want to make sure this is accessible from every um widget because we are going to access it through this so now what i will do i will select visible pairs widget.index.get image asset path and actually we are going to set okay so we're going to say set image asset path and i'm going to set that to assets slash and it's going to be correct image so we have that image this one should be exact we're going to just type correct dot png we can minimize this um now according to our game which how it should work is both of these should be like that not just the one which is clicked the last time so for that what we can do we have a variable over here in which we are selecting like we are saving the selected tile index so we can do that i'm just gonna copy this line and paste it and i'll say selected time index okay and set image asset path and so on so hopefully this should work and let me check so we have correct we have um one thing which we also want is we don't want this to be clickable um but let's let's just test it out if it's working fine or not because there are like a lot of things which we can do but you want to make sure it's working first of all so this and this was same i believe so it is correct and one two boom now boom okay nothing is happening it's printing that it's a correct but it's not uh nothing is happening i have given it time to be two seconds and what i'm doing i'm increasing the point so yeah this is what the problem is so guys uh the thing is the point is increased but we should update so two things will be done we have to do the set state that is the one and another thing which we have to do we have something like this dot parent i believe not clear it should say it's at state again but we will be using this over here sorry parent um parent dot city state parent okay sorry wait jet dot parent dot set state so basically this is going to the do the set state of you know the this one this whole so let me save that um so some reason let me reload it and see i think this is wrong actually because it should be this one and this should be this one either the values are not correct or it's more than what it should be so if i click on sorry i i didn't notice that sorry so this and this are same this and this are same so let's just select the parrot parrot parrot so it's the correct choice but these are the ones so basically it's plus one um the reason for that is not very clear exactly because over at this place we are selecting widget or tile index and selected dial index so it should be from 0 by the way but if it is not what we can do let me just give it a try by the way in the last time when i did this i didn't use this minus one or something but it was working fine so i think there is something which we did differently this time but uh let's let's see what happens so if i select this in this um okay so minus one is not going to work did it reset it let me run that again because last time the error was nothing but just running it again okay so this is the correct okay um for some reason it is selecting one plus so let me think about what we are doing again so what we are doing is basically when we see that right it's correct so the points is increasing um i'm sorry for this one what is happening is uh if i select them and put it it's not going to work but okay so we are basically setting this assets dot correct png image to the selected tile index as well as widget total index okay so this is the problem now guys that um that you know what these uh we should have something over here which should be impacted through this um what we can do let me see what if i said that to be set um okay set is selected for the visible pairs to be true and we can have over here in this image that if [Music] what is it called visible pairs so visible voltaire's widget dot tile index dot get is selected and we will ask that is it selected or not so if it is selected then all the scrap that will be happening or do we want it to be the other way so i will go the other way so this is what we want to happen if it's not selected and if it's selected i'm just going to say image dot asset and that's going to be assets slash correct dot png if i save this now restart it um so this and this is same let me do this this and this you click me you correct okay that's that's that's too much okay we are setting this here we should get rid of those okay sorry we have to set these isn't it yeah or should do we don't i'm not sure what is happening guys uh let me see if i not save this and save it let's say actually the values are already changed so it's not going to have any impact this and this are same this and this click me correct okay so nothing is changing um let me do it again okay so this time none but if we uncomment this let me like put it in slightly satisfied i don't know like for some reason while it should work but it's not i don't know okay this time i was not watching if they were seeing but okay oh my god why is this happening so it is uh we are setting that to be correct um so visible pairs uh we are setting that to be correct only at one place and it is getting setted at two places um okay so the whole thing is like i clicked on these and i want these to be selected but it is also doing that for these so the question arises why is it setting um true value for that but because we don't want that to be happening right we just because we have two over here okay that is the problem oh no no no that's not okay so we have you know guys like i can close this and start again but like you know do it on my own but i just want to share with you exactly what happens okay by the way it is clickable even when that's a problem so this and this is i don't think it's what is it you know like you see this one and this one is selected for no reason um what can be there is uh issue for this so how are we setting so we are using this correct image only if it is true so it is getting true if it is true then we are showing this image or else we are going to show this image um and the question arises how is it getting true for plus one values or basically four values because we are just setting it for true two values sorry um so if we look at the visible pairs and the title index on that okay okay so here's the problem guys um i think okay so when someone clicks on it you want to save that it's correct i think okay we have this as well you know set state i'm just going to get rid of this which is basically making them true oh my god i think that was the issue whole time like all the time sorry um we selected this and this this not again i removed it man what's the problem so we are going to click on these this and this they're not flipping but they are getting corrected okay so let me do it this way i'm just gonna keep this and i think it's not required to set it through this um okay let me see so whichever we are selecting we are setting it to be true right let me check this out guys okay so we're gonna restart this this time i'm gonna slip this hippo okay i hope two seconds are done but nothing happened so the points has been increased but um this is not working perfectly well it should um so we want to show that so the set state is being called i think it is getting settled let me see um for this particular thing to happen what is the condition like is this i think it's out of it it just asks that it should not be selected and that's all if that's the condition it is setting that to be um true um but it's in the pairs okay i want that to be set in the visible visible [Music] what is it named visible pairs okay so let's try this out is these the same that was not good because it just instantly updated that so we should do it this way because you want to show that so i'm just going to save the pairs right now pairs it's fine and we will have this as well both of them what is happening then let's see okay so these are the same so it was setting up for the whole right okay it's working fine let me see this is not same okay okay i think it's working fine let me check it out um which one is same horse yeah horse horse okay it's not um so one value after it one value before it i didn't clicked on it i clicked on this and how is it working so image dot asset dot this if um if it is selected there so it's not and we will check if it if the pair image is selected so um peer image okay don't know guys like i'm not very good like recording and thinking about stuff you know what i'm thinking of um [Music] let me see let me go about it again from here so he's setting that fine because of this it's visible okay it makes sense but after that we want this visible pairs um to be when we are calling the set state method i think that that whole thing i don't know it's not working okay so in this one what is happening it's like re building itself uh but it is having a problem that set is selected to true [Music] okay without any further ado let me have a do what i did so here in this what i am doing is i have this condition that if my parents so you said checking it through my peers okay if dot that image is not equal to this so okay selected so get image so my peers image so am i setting that to something let me have a look okay so featuredly what i'm doing i'm just setting the tile model dot set image to this and then i'm setting that to my pair um yeah i'm just giving my pair that tile model which have no values so my peers through my pairs okay we're not going to use visible visual uh visible pairs okay so where is it we're going to use my pair so what the condition which we will be using will it will be pairs and okay index tile index oh my god dot tile index and dot get images it path what is selected or is it images at what okay so we are saying that if this images a path is not equals to this then show all this stuff if it is equals to this then so over here we will basically say pairs and the set image asset path do nothing and similarly we will set set images path to nothing i'm going to save that i think the condition is so we are saying that if that get immediate path you saw that particular title uh tile index is nothing then in this if it is nothing if it's not nothing in this if it is nothing then what so okay yeah it's it's it's it's flip so i'm just gonna grab this i'm gonna paste it again okay now it is visible but we want that to be set it like correct or something so i'm going to run this app again if we click on this in this it's working perfectly fine okay so what's what's next now what we want is if we select incorrect for example this and this if it's wrong choice then it should be um like set it back to you know this should be just flipped so i'm just gonna copy that and i'll say future dot delayed and we'll say constant duration seconds to comma okay sorry i think it should be inside okay we'll just do and we'll say selected index and we'll set it to false and let's see what happens okay that was not some things are just normal okay this and this is same so it should be checked this and this are not same so that should be game and also whatever happens what we will do after that is selected path image over here equals to this and i'm going to do that even if it's correct or even if it's wrong should do it after this time and okay i save this now it's probably [Music] restart these are same these are not so we will click on this same so that should be checked these are not same so they should just okay um we will save dot parent dot set state and going on set the state is playing with me let me do it again so what we will do we will select two same and two not same so i will select this in this which is same so it should be checked this and this are not simple they should just get out so it's working perfectly fine um [Music] okay one thing which is happening while this duration or delay happen we don't want uh the user to be clicking anywhere else so i just copy this and when this starts i'm just going to set it to true and when this done i'm going to set selected to false similarly over here we will set selected to true and select it to false okay um now if i run it again first thing first you can see i cannot click on these when it's showing this once that is done i'm selecting these now so if i selected these ones now and let me select these and if i try to click on another uh you know after they are gone then only i will be able to click so this is hippopotamus this is uh horse horse okay yeah so i think it's working fine now one thing which was there as well that once this whole quiz is complete there will be a replay button and a kind of a rate us button uh it was not shown initially sorry for it um but we can have that so how we can have that let me show you that so it's going to be very easy uh what we want is when the 800 points completed we should just show show a button which is going to say replay so how are we going to achieve this is basically over here having a condition that points points is equal to equals to or let's say not equals to 800 then show grade view or else show a container which is going to have a child of text and that should be written replay okay and we're going to say decoration and box decoration and it's going to be color and colors hopefully this is very clear to you guys this is not very complex stuff um border radius and it's going to be border radius start circular where is it let's go for something big and let me give this a little bit style i'm going to say textile and it's going to be much how much how much how much okay yes i font size to be something like 17 we can say point weight to be something a bit more then it would be fine i hope um yeah color will be colors dot white i'm gonna save this okay so we don't want to play the whole game i'm just going to give you the point through here yeah we are awesome this is what will be visible we don't want to show the points if that condition is there so i'm just gonna grab the condition where are you where are you here i am copy it go go go go okay so that's the reason what i can do is basically create a column here called lemon and i'll send children and sorry save points and then i can grab these and i have them here and so if the condition is there then and if it's not then just show nothing so for nothing we can use a container okay uh one thing just something kind of very last padding edge inserts dot symmetric vertical around 12 horizontal around 24 [Music] okay i think it's fine guys now um so yeah let me give you a preview of how our game works so let me install it again just a final touch so yeah i should say like if you have been watching till now hopefully it is completed okay i was not able to see let me see okay so we know tenderness my memory is not seems to be very sharp okay uh no that is not correct oh my god now yes and this no i think i saw it here no i saw it here yes okay i clicked on wrong this and this you know we can have some negative points if we click wrong will not do that for me because right now i'm playing okay then 10 10 10 10 and this one and this one and this one is the last one so 10 and voila okay so finally when we are the other we finally completed this project and yeah hopefully you learned something and if you do make sure to click that like button click that subscribe button um believe me or not this video does take time and yeah uh i will be more than happy to make more just just a little bit you know you can like that you know the button i cannot show you but yeah so the button on the like and subscribe and yeah i'll see you in the next one bye

Channel: Sanskar Tiwari

Views: 3,232

Rating: 4.9699249 out of 5

Keywords: flutter full app tutorial, flutter app tutorial, flutter app tutorial for beginners, flutter tutorial, flutter memory game

Id: 6bq_YXqsciw

Length: 74min 52sec (4492 seconds)

Published: Sun Dec 27 2020