Flutter Crash Course - Building a Complete App From Scratch

hey guys what's going on my name is Bram and welcome to this crash course for further in this crush first you'll learn how to create a full application from scratch width letter for both Android and iOS with only one code base so the application that we'll be creating is a simple quiz app so let's take a look at it wake out a simple landing page whenever it's have that page we go to the actual quiz which has some state random statements for us like floater is a sleet or false well of course flutter is awesome so let's say through we check whether the answer is correct and then we threw a fancy animation to the user to show whether their answer was actually correct or not right and then we have a lot of other statements that go on and go on for as long that you have questions to ask the user now before we start actually creating this project youyou should know that there's a few prerequisites first of all you will have to have floater install already which is actually pretty easy process so just go to the floater website and follow the steps of course if there is any problems with the installation feel free to ask me for help Donna comes below and I'll be sure to help you also you should know the basic concepts of object-oriented programming because Fleur uses a language called torte which is object origins so if you have any experience with Java C sharp or even like JavaScript using typescript or es6 you'll be good to go so just make sure that you get the basics basic concepts of classes so without further ado let's now just start and create our first floater projects creating a floater project is rather easy just go to your command prompt on windows or your terminal on both Linux and Mac and CD into the directory you would like your project to be in so I want my project to be on my desktop so to see the desktop it's actually create the floor project type further space create space the name of your project so I will call my project quiz but of course feel free to rename it to whatever you'd like so this will run the creation process it should only take a minute so I'll come back to you guys in a second alright so once that is done you have your further project created now you can open it in any text editor you would like I'm using Visual Studio code but of course feel free to use IntelliJ Android studio at them whatever you'd like just open it up and we'll go further from there so in Visual Studio code I will open my projects open my folder it is called quiz select folder and now your code your pre-built code for you should open up for this video I will use the building terminal in Visual Studio code to type my commands so instead of using the command prompt I will be using the terminal in Visual Studio code so just remember whenever I type something in Visual Studio code in the terminal so in here just remember that you can also type it here in your command prompt on Windows or your terminal and Mac or Linux so let's now actually start coding so in your code editor go to your library folder and open main the darts in here you will find a lot of code already so let's delete all of this because we want to start from scratch so once you've deleted everything import a new package called material and this file will actually include a lot of widgets for us which implements the material design spec so a widget is basically some sort of visual for us to use and in this package there is a lot of pre-built widgets for us to use so also your mangled art file create a new methods called main this is basically a starting point for your application so be sure to never forget this in here type run app and run app takes a man takes a widget we will give it a material a purchase and a material app widget is basically a widget that which gives us a lot of functionality in terms off it allows us to give our application a a custom team it allows us for named navigation and if all that doesn't make sense for you right now don't worry too much about it it will you know become become clearer in a second but for now just you just need to know that the material app widget has a property called home which will be our home page for you ok so let's now create the actual homepage so to create our homepage let's first create a new folder in our library folder called pages in here let's create a new file and let's call this file landing underscore page starts and this file basically contain all of our code for our home page or landing page whatever you want to call it so in here let's import our material package and let's create a clause to represent that actual page and I'm going to call it landing page so we need to extend this clause with the stateless widgets cost and I should explain to you what a stateless which actually is because it's very important in darts in flutter so we stateless widgets let's explain what it's stateless widget is now because it's way easier so imagine that you have an application that shows the time and every time a minute goes by you want to update the visuals of course right because you want to keep your application up to date you wants to notify the user something change the time change so in that application we would call the numbers or the time on-screen the states and every time we update the state we update the time we want to re-render rebuilds the visuals with a stateless widget we do not have a state so we do not have something to update so we basically are left with a static widgets so that's when you use a stateless widget so in here we should override the build methods which looks like this and get used to writing this kind of layout up for classes in employer because it's used a lot and in here we create a we create our visuals right so we return a new widget and let's create a material so a material is a widget and like what does it look like right what's what the visual what is the visual look of a material so a material is basically just a a piece of paper and that piece of paper can have a color for example so we could give it a color something like color is dot green accents and that will color or piece of paper green now we can also give it a child and a lot of other fancy stuff but for now let's just keep it like this so let's review this one more time we have a material widgets material widget acts like a piece of paper and we have given that piece of paper a green color so if we would run our application now we would expect a a blank page that is free right so let's save this file let's go to our main a dart file let's import our new page so imports pages landing page and in the whole property let's change this to new landing page awesome now we are actually ready to to run our application on an emulator so of course I'm using Windows so I'm using an Android emulator but if your Mac feel free to use the iOS simulator or real divided course so to run our application we use flutter run we type this in our terminal or command prompt we press ENTER and this can take a while for the first time so I'll be back to you guys in a minute alright so as expected we have a green piece of paper or a green screen on our device right now so nothing too fancy nothing too exciting so let's dive back into the coast code and spice things up a little bit so let's go back to our landing page of dart file and as I told you guys the material which it also has a child property and this child property takes a widget so the widget that we will use here is called inkwell an inkwell is basically a fancy invisible button with an even fancier animation and if that doesn't make sense to you right now don't worry too much about it it will become clear in just a minute just note that the inkwell has a property called child as well and this child takes a tip and takes a widget so the widget that we will use here is a call and I hope that you guys are seeing a pattern of like nesting it's into widgets into widgets so a lot of widgets have a child property which you can nest new widgets in right but the column is a little bit different because as you could imagine account takes multiple widgets and displays them underneath each other right so instead of just having a child property the column has a property called children and like you can see it takes a an array or a list of widgets right and here we can basically just start typing creating new widgets as we did here and here so the first widget that we want to display in our column is called a new text or it's called a text and a text widget takes a string and the string will be displayed as a text widget on screen right so let's say let's create the string let's quit awesome let's also create another text widgets underneath here separated by a comma of course because we are working in a in an array in a list so another text widget and let's call this tab to start explanation points now to to restart your application or to rebuild your application there's two options in your terminal or command prawns that you were working in you can press uppercase R or lowercase or uppercase R will fully we start your application freely reload your application and throw away the states and lowercase R real preserve this day for you we have we don't have a state right now so it doesn't matter for us so let's just press lowercase R and once that is done we will see hopefully Oh first of all we need to save the file for us right so save the file press lowercase R let's go back to our emulator and now we actually see some text on the page awesome now it's displayed at the top not where we want it to be because of course you want it to be stanford's so let's do that really quick so the column with it also another property called main axis alignment and main axis alignment we can assign a mean excellent property today and we want to Center it right so the main X is for a column is the up and down axis right the y axis and we want to Center it on the y axis so that's what we're doing here save this refresh or reload our application and now it's centered awesome so we still need to do a few things to finish this page off of course first of all the text looks a little bit dull it doesn't look as as good as in the previous Oh so change that we can go to our text widgets over here and the widget section the text widget also takes also has a property called style in which we can define our styles for that text right so the style widget unstop already takes a texts style class object and your that deck style object has a lot of properties right for example color we could give a color stop white we could say font size and let's give this a font size of fifty point zero because it takes a double so enter your wouldn't work can we do something else with this let's make this bolt so font weight font weight dog bolts and I think that that's it for for this text widgets so let's save this file let's reload our application and that looks way better right so let's do the same for our second X widgets style new text style collar let's also give it a a white collar because that looks kind of nice color is the white let's give it a bigger font size something like what did I use in my preview application 20.0 and let's did I make it italic or bold I also made it bold any preview applications so let's say font weight font-weight:bold right now let's refresh this and that should look a lot better right now right awesome so there is still one like mysterious thing about this page and that is the the inkwell widget right because I told you guys it is an invisible button that register clicks or taps but whenever I tap something nothing happens and we don't seem to write register the tab right so it's actually register a tap the inkwell has another property called on tap and it's on tap property takes a a function let's create a an error of function and so whenever we tap this we want to print something out for example once the print we tapped the page explanation point let's save this let's reload our application and now you will see what I meant by fancy animation right so click the page and now we see that fancy material animation that we all love or some of you hate maybe but you know it is what it is and you can see over here that every time we type the page we print out we tapped the page awesome so that's basically it for this landing page for this home page we will come back to it later when we actually navigate to another page but for now it's done it's finished so congratulations you just created your first page in flutter all right so let's now take a step back from the visuals and let's create some clauses for us to use later on in the project so first of all we would need a question class for us to hold questions right so let's create a new folder in the library folder and let's create let's call this utils in the UT's folders utils folder let's create a new file called question the darts and this file we'll hold the cloth for a question let's create a new question Clause and we will need some class variables for example we need a string to hold the question and we will need a boolean to hold the answer right now traditionally with object-oriented programming languages you would now create a constructor with some arguments so for example we need a string question I will need and we also need a boolean for the answer and in the constructors body so in here you would then assign the class variables so or the arguments to class variables right now I can see this is a lot of work it's a lot of typing work especially when you have more class variables this could be tedious work so dart actually has a sure syntax for this so instead of using this body we could replace this with a semicolon and in here we can simply do this the question and this the answer nowadays the question refers to this do to the class variable question and this will answer refers to the class variable answer so what we're saying is we want a one a question at the argument which is a string and we want an answer as an argument which is going to be a boolean and we are using this dot syntax here because whenever a new instance of this object is created we want the arguments to be assigned instantly to the class variables right so that's just a neat little way to type it out without a lot of code now also I would like to create I would also like to make these class variables final because whenever we create a new question we would not want to change it up so let's just make it final and let's say this let's now create a new file for quiz cloth so let's create a new file in the users folder call it whizzed up doors and in here let's create a new class called quiz we will need a few class variables one is going to be a list of questions let's call this questions one is going to be an integer to keep track of where we are in the questions right so at what question we are at so let's call this current question index and that's a sinus to minus 1 to begin with and let's also keep track of the scores so that's creating new variable cost variable called score let's assign this to zero now like you can see over here the question the question Clause isn't recognized in this file because we still need to import it so let's do that imports question though towards let's now use our new way of writing fancy constructors in this file so quiz this dot questions so remember this will just automatically assign this arguments to the questions class variable and in the the body of the constructor let's actually also do questions dot shuffle because we wants you to randomize the questions every single time that we that we create a new quiz right so also something that I would like to do is create these variables private this class variables private right because we don't want the user to actually change the questions or to change the current question index or score so to make something private we do not have a something like a private keywords indoors we actually simply place an underscore in front of the book on the variable name right so let's do that for the basic variables also in here in the constructor rules have to changes of course so that's not great some getters for these class variables because of course we made them private so the user can not access them cannot read them and that's kind of an issue right now so dart has a cool syntax to create getters so let's try to create a getter for the score so int debts which is a keyword to notify dart that we are creating a getter score and will return the score so this is syntax to create getters in darts and the cool thing about this is if I create a new instance of the quiz object then I could do quiz dots if I now take a look at a score then we see that it it looks like a normal class variable it looks like a normal variable but actually in the class we're using an egg egg getter function right so as far as the user is concerned score is just a class variable all right so let's now create getters for our other class variables as well so lists question questions and let's return the questions of course don't forget to get P words now it's probably not useful for us to return the current question index something that would be useful for a user to know is the length so how many questions are in this quiz right so it's get lengths and here we just return the questions the blanks so the length of the of the list right something else that's useful for us is probably the the question number so what question are we at are we a question 1 2 3 4 whatever right so let's create an integer for that a getter integer for that so ends get question number question and let's think about this so current question index is an index for a list and a list starts counting from 0 right so 0 1 2 3 so we have question 0 question 1 now humans start counting from 1 of course so what we're going to do is current question index plus 1 that's what we're going to return also now but we need one more getter to return the current question or the next question so we do question get next question and this will look a little bit weird so instead of using this arrow function we will now just create a regular function with this gather with this gets keywords so in here we first of all at one to the current question index excuse me because you want to go to the next question to the next we want to up the index one to get to the next question in the list if the current question index is larger or equal to the length then we know okay there is no questions left so let's return no else let's just return the let's just return questions current index current question index right now one more thing that we need to do is we need to have a function to answer to you whenever a user answers a question we need a function for that right so let's create a function called answer which takes an arguments a boolean and it's call this is correct so if it's correct then we up the score by one awesome and that's basically going to be it for our quiz class alright so after writing some classes after writing some boring stuff let's now go on with the florist of the exciting stuff so let's create a new page a page for the quiz so in pages create a new file and let's call this quiz page and the score darts and this will contain a code this file will contain the code code for our quiz page first of all let's import the material package here and we also need to need to import the class that we just created which are the question clause and also the quiz Clause right so let's do that real quick quiz now now the the page that we were creating right now is a quiz page will actually not be a stateless widgets like the like the landing page but will actually be a stateful widget so let's take a look at what that looks like so class quiz page extends stateful widgets and now a stateful widgets needs to be connected with a a state right so let's call this quiz page States extends States quiz page so let's take a look at what we're actually doing here in going forward with building the layout after day so a stateful widgets like I told you guys in the beginning is a widget that can be rebuilt so visuals can change over time so that's happens in handy for animations for whenever you want to you know give some feedback to the user so just think about the hypothetical timer application or time application that I told you guys about at the beginning of this tutorial you could definitely make that with States for widgets but the thing is I'm constantly telling you guys that stateful widgets are mutable right that they can change but it's actually not the complete through because a stateful widgets the clause itself is actually immutable so no variables no class variables in this clause change but we connect a state with it so we connect a state with the stateful widget and this states is mutable we can change variables class variables in this state and that's what that what that is what allows us to like rebuild rebuild our visuals right so I think that was a pretty clear explanation if not feel free to ask me for more for clarification and it comes below so let's take a look at what these what we have to write here in the body of the stateful widgets so we need to override a method and this method is called creates state which returns eight states and lets in here just return a new page States and with this we are connecting our quiz page state with this quiz page right and that's basically everything we need to do here in the state for widgets the class under the quiz page State looks a little bit like the or actually looks a lot like a stateless widgets as we've seen in the landing page in the sense that it also we also need to override something in here called the build methods build context context and here we also start creating the visuals we'll also start like praying the layout in here right we returning widgets and that's what we do in the state class so let's now actually create some visuals for our page so in the build method let's return a new widget to which that we'll be using is called a stack now a stack looks a lot like a column in the sense that it also has a children property but instead of layering the children and each other just as with a column a stack stack them on top of each other so it stack layers the children on top of each other now the reason why this is useful for us is because we want to have an overlay overlay that's stacking over the page when the user answers a question right so that's why we use a stack here we won't be using it for now but just remember a stack stacks children or widgets on top of each other so in the in the children list let's create a new column and this column is basically going to act as our page so our like this column is going to contain our through button or container for our for our question and our fall button so let's create a comment here and say this is our main page in here we need to use the children property and in here we create a new material this material will have a color and this material will be will act as our through button so let's create a comment here through button and the color for this through button is going to be green right green accents this material also is also going to have a child this child is going to be that magical button and that magical button the inkwell because we want to be able to press on the button of course so it's going to have an on-set property and for now let's just print out something whenever the user taps on the on the button so let's print out you answer through the inkle is going to have a child this child is going to be a new center and i centered this exactly what you would expect it to be its center is the child so the center has a child this child is going to be a new container the reason why we use a container will become clear in a second a container also has a child and that child is going to be the text for our for our actual button so it's going to be true so let's now actually save this and let's go to our main the dart file let's import our quiz page pages quiz page and let's let's change our home to a new quiz page and let's then we start our application so let's take a look at it so I know what you're thinking this is pretty underwhelming we just got a green bar with a with some text in there and height is just high enough to display our text right so normally in flutter the widgets try to take a take up as much space as possible but whenever we have a a widget that is a child of a column then the widget will try to take up as little space as possible now to change this we should actually wrap our material so our material that is a child of our column in an expanded widgets so let's cut this let's create a new expand and expand it has a child and here let's just paste what we just copied right let's try to indent this a little bit nicer and now if I save this refresh our application then the full page should be covered in our material so we now have our button or through button whenever eyes happen you can see that the fancy animation appears and we also show we also have our print statement printing you answer through here now we should also create our false button right so what we could do is just copy all this and paste it at the end of our list of children let's make this color Reds accent you insert false and the text is going to be false and actually because we created this expanded widgets let's get this comment up here whoops through button and let's delete this false button right so if you now refresh this then we should see our green button and our red button both working with the nice animation but this looks a little bit messy right this looks like we should not have all of this code just to display these two things right because they are very similar the only difference between these two buttons is this text and is the color so let's now try to create a separate widgets that we can call whatever we'd like to to actually only have the code once instead of having this code here twice so let's now actually create a new folder in a library folder which will hold all of our UI elements so let's call this fuller UI and in here let's create a new file and let's call this file answer underscore button dog darts and this file will basically contain all of the code for our answer buttons whatever it is be true or false answer button so here let's import the material package and our answer button is going to be a state stateless widget so answer button extends stateless widgets and in here let's just override our build methods as usual widgets built welcome text oops contacts alright so in here we can as usual just start creating some visuals so what we can do is we can go back to our quest page and sake one of these buttons copy it and just paste it in here right let's try to invent this a little better let's get a return in front of this okay so what I did is I just copied all this so for this one but I copied all the code for one button and I paste it in there I pasted it in the build methods so if I now save this an import our or enter button so imports UI and it's called answer button then I get now replaced all of this code with a new widget that we created called new answer button let's now save this refresh and that should give us the exact same application all right so let's now try to make our answer button a little bit more modular because at the moment we can only display our green true button but of course we would also like to be able to display our false button with it so let's go to our answer button dart file and first of all we'll need a new variable let's call this variable answer and let's make our constructor here oops so answer button they stop answer and the answer is basically just going to tell our answer button whether the green so the blue button or rather default button the red button has been pushed so now in color we can use this answer button to decide whether we want a green or a red button so in here let's use a ternary operator so answer equals true question mark so if the answer is true then we want to make this button green so green accents and else we want to make the color of this button red so color is dot red accents so if you are unfamiliar with this notation this is called the ternary operator and it's basically the same as doing this so if answer equals true then return colors green accents else so if the answer is not true then we do return new arm return colors dots red accents right so this is the same as doing this all right so let's delete this and let's now do the exact same in our text so if the answer equals true then we want to display a string with the text through in it else we want to display false so let's save this and let's now reload our application whoops and of course we are getting an error here so let's take a look at this and the reason for that is of course that the that we are now creating or we are now trying to create an answer button here but we are not passing in enough arguments because now we have to pass an answer audience so in here this is our through button so in here we passing through and let's now actually also delete all this and let's make this a new answer button and this is this is of course going to be our false button so let's type false let's save this let's refresh our application let's take a look at the emulator and now we see that it still works so that's all so we now have one widget to display both the answer the true button and the false button so there are still a few things wrong with our buttons or at least there is still one thing wrong with our button whenever we press on the false button or print statement prints out you and third through now this is one of course so let's go to our answer button file and what we could do is we can use this this ternary operator as we did here for our print statements but we're not going to do that because we are going to use something way fancier we're going to use a avoid callback callback let's call this on tap now what exactly is a void callback I hear you saying now a void Kovach is a type that and a type def is a signature for a function so what is a signature for a function right so a signature for a finish it could be something like the return type so for example int for integer and then the the name so on tap for example on tap and the arguments right so if I make an argument here bool answer then this would be a valid a valid signature red for a function so the signature tells us that we want to return an integer we want to call the function on tap and we want the function to have an arguments which is a boolean called answer now the void callback is such a signature but the signature tells us that there that we do not return anything so void with we tell that the function name is on tap so on tap and a fourth callback does not have any arguments so we leave this empty and that's basically what an what a void callback what a void callback is so that doesn't make sense to you right now don't worry too much about it because we are going to implement in a second but for now let's just also as this in our arguments and in the on tap property let's remove this print statement and let's replace it with the with the on tap callback function let's save this let's go back to our quiz page is now we are not having enough arguments in our answer button constructor or whenever we create or enter button so what we can do now is we could create a function in here that looks like this which returns nothing right so now we could do prints you answer it through and we could do we could also create a function your prints you and search false did I do anything wrong here I sure did let's take a look let's just copy this uh-huh all right so let's save this let's refresh our application and let's take a look so this should print out you entered through which is correct and it's false button should now print out you entered false which is correct awesome now let's clean this up a little bit so instead of using this normal syntax for a function let's use an arrow function to make it a little bit cleaner and let's do the same for our other for our other button right save this refresh this and we should see the same results so let's now finish up our enter button class so let's go back to our answer button file and here we see an arrow or at least a warning saying that the stateless widget is immutable so our class variables should never change so we should place file in front of them final and I already made this on tab function private so that's it is same for answer because we don't want to use it to change anything to the button once it's created right alright save this refresh this and this should give us the exact same results it did not uh-huh uh-huh oh we forgot to replace this answer with and there's four answer save refresh and that should give us the same results so let's now actually apply some styling to our buttons right because in the preview application they looked way nicer so let's go back to our answer button and first of all the text should look better so let's expose that style poverty let's do it on a new line so style which takes a new text style and in here let's make the color of the text white the font size is going to be 40 point 0 the font weight is going to be bold and the font style is it going to be italic save this refresh and that should look nicer already awesome now the preview application also had some nice borders around the text and that's why we had have this container here because container has a property called decoration and this takes a new back box decoration which has a property called border and in here we can add a new border but all just want the border to be around all sides and we can say okay we want to border to be white let's color the white and want the border to be to have a width of 5.0 save this refresh this that should look better already now if you're also triggered by the box or the border actually touching the text and that's because there is not enough padding between the text and the box so let's add some padding the container also has a property called padding which takes a edge in sets and we're going to use action sets all and then here we can apply the padding so depending of 20.0 for example save this refresh and that should add some padding to the border and the text so let's now make the visuals for our text that will be explaining the question or the statement whatever we want to call it so let's go back to quiz page the darts and in between these two questions let's create a new material buh-buh-buh this material is going to have a collar let's make it whites whoops caller caller is it that whites now a material has a child property and let's pass a new center in here because you want the text to be centered of course and the center has a child and this child is going to be the text right so normally would has the question in here or the statements but we don't have questions yet so let's just create some placeholder so statements one pizza is nice let's save this and let's refresh our application and looks good already right but we do not have enough padding in my opinion between the buttons and the actual text so let's get some padding in here so with a minute really container like in our answer button container has a property called padding but what we actually also can do is use a a penny widget so let's copy this so the center and the text and the material will have a child called loop heading instead and the padding is going to hold or our or Center and our text writes oops if this one's to work of course all right now the padding widgets has a property called panning of course and in here we can do the same as we did with the container padding right we can pass it a and H in sets so let's do that so padding new edge in sets and instead of using actions that's all we only want the we only want some padding on the vertical axis so we are going to use edge in sets symmetric and we're going to say okay vertical one the panning off 20.0 let's save this reload this and now we should have a nice container without texting so let's now actually make a separate file for or for this container holding our text because we're also going to add some animation to it so it makes sense to actually create a new separate class word and new separate widget so our code looks a little cleaner so in the UI folder let's create a new file let's call this question and our score text dope darts and in your let's import our material package and let's create a new clause let's call this question text which will be extending a state full of widgets why we're using a stateful widget will become clear in a second but let's just write down the boilerplate for stateful widgets so that's also writes a state question text let's override the create States method so state great state new question state question back States and in here in our state LexA let's actually overwrite our both methods build contexts contacts awesome now we can return all of our visuals in our build method IQs well actually I'm sorry as usual so let's go ahead and copy all this let's copy this and let's return it in here right so let's write it and then this nice one more time whoops let's save this let's import it in here so import UI and we want to import the question text the dart file and now in here we can simply create a new question text let's save this and they should return the exact same as as before and it does so awesome so let's now make our question takes a little bit more modular because right now we are stuck with this one string tightly display so we should have an arguments for this for the statement number or a question number and we should have an argument for the actual statement or question right so let's go into our question and refer text alert file and let's in our staple widgets in our question text Clause create some class variables let's make them final because remember stateful widgets class is immutable and let's make the first variable a string let's call this question and other class variable is going to be an integer and it's called this question number let's save this and now we should kinda know first of all we should actually make a constructor here question text this dots question and this dot question number and our know what you're thinking you're probably thinking like how do we get these variables into our actual class so into here where we are actually building the layout right so how do we do that so let's look at an example for D text let's try to replace this one with the question number defining our question text okay so in here that's append a string or let's try to append this question number and we do that by using widgets dot and then we have access to the variables of our state for widgets of our question text right so now we can do widget of question tip question text that's two string and now now that should work now let's also replace this pizza is nice with the question from our stateful widgets so let's do widgets dots question I'll save this now of course in here we should add these arguments so the question will be will still be pizza is nice and let's make it the first statement right let's save this refresh this right we should actually hot really I'm full fully reload this so with uppercase R because we changed the state who want to rebuild our question text right so we should use uppercase R and now we should still see the same visuals as before right alright so let's now actually start doing something very exciting let's create our first animation for our text here so the animation that we're going after is an animation that pops text up so for example the font size starts at zero and goes up and up and up till something like 20 right so we increase the font size over time first of all let's try to fix this spacing issue so let's go to our question text art file and let's add a space here let's save this refresh this and that should fix it awesome let's now start creating the animation so first of all we have to add something to our class to our question that text states so type with single ticker prior state mixing and that's a really scary-looking word I know it is but just don't worry too much about it right now we'll come back to it in a second but just know that when you're using an animation each you you need to take a provider state mixing alright so we will need a few class variables one is going to be an animation and let's call this animation font size animation and we also need an animation controller and let's call this font size animation controller so let's think about what these two variables will do for so first of all an animation will have a value and its value will be a double and this animation value will be zero zero point one zero point 2 and so on and so on and so on until 1 right so that's why we're using double here and the animation controller is actually what is going to control our font size animation so where should we actually assign objects to these variables so we should do that in the unit state methods so let's override this just like we did before do not forget to call the super dot in its state function methods now we can assign something to our font size animation controller so let's do that font size animation controller equals new animation controller now animation controller has a property called duration in which we set the duration of the animation so in new iteration and now we can choose between days hours microseconds milliseconds of course we're going to use milliseconds because we want the animation to be fast of course so let's say something like 500 milliseconds and something else that we need to pass into this animation controller is vsync this thing takes a ticker provider and it's not a coincidence that this thing takes a TV provider and the sink and we typed single ticker provide estate mix in here is for this thing we just pass in this object this class so let's think about what piece Inc is first and then go back to this single ticker provider state mixin so this Inc is facing handles up handles animations that go outside the screen for us so for example if I have an animation that goes outside the screen it would be a waste to actually render out that animation to actually calculate anything for the animation because we're not seeing it so be sink handles that for us now single ticket priority state mix in and I'm just going to read this from the dark so provides a single ticker that is configured to only tick while the current three is enabled as defined by thicker mode so it just provides us with a ticker a single ticker which we can pass in to its facing objects so worry too much about this one thing that you should know is with a single ticker provided state makes in you can have one animation controller with a take your provider state mix in you can have multiple animation controllers so just keep that in mind alright so let's now actually assign something to our plant animation so if want animation is going to take a new curved animation this animation has a parent the parent is going to be the phone size controller and this animation is also going to have a curve and the curve is going to be linear for now more about the curves in a second so like I told you guys the font size animation so the animation has a value the value changes over time it starts from 0 and goes to zero point one goes to zero point two etc etc so if we want the texts so our text here so change font size over time font size over time we first of all need to have a style object here text style so new text style and ago we set the font size to 12 size animation dot value so first of all I'm so at the beginning this font size will be 0 and at the end the font size will be one but font size of one is rather small so for example if we would like the font size to be let's say 15 then we should multiply this by 15 writes is at the end we will do 15 multiplied by 1 which is going to give us a fun title of 15 of course now one more thing that we should do or two more things that we should do for this animation to work is we should set the stage somewhere right because we're rebuilding our texts because the font size changes so to do that we are going to add a listener to our font size animation so on-site animation don't add listener and in here we are going to set the state so this sets state and this is going to be an empty set state so once again why we need this is because our font size animation value is used for the font size of our text we display the text and therefore every time that the font size therefore every time the value of the animation changes we want to re-render that next we build that text right so that's why we need this empty set States now to actually start our animation we need to forward it and we do that by using the font size animation controller dots forward alright let's save this let's reload our application we should fully reload our application so uppercase R because we are rebuilding this we are we have changed the state right so that's fully we start this and hopefully this works and it does so awesome you now build your first animation so one more thing that we can change about this animation is the curve so let's take a look what the curve actually is right now we got a linear curve which means that the value of our animation value well over time will look like this so we start at 0 and we go up until 1.0 linearly now we could actually also use something else like bounce out if we save this and reload this then we will have an animation that kind of bounces out and let's take a look at what that looks like looks awesome now what curse you have to watch out of course because example if I use elastic in and I'll take a look at the curve that I see that at some point the curve that the value of the animation goes below zero and for us we use the animation value for the phone size and of course a negative phone size is not defined so we we can therefore not use the elastic in curve so let's just keep this two tons out for us save this will load this and now we have this awesome animation ready for ready to go all right so our quiz page is almost finished but there is one more thing that we should do one more thing that we should create and it is the overlay so remember in the preview application whenever the user answer a question or a statement and overlay we popped an overlay over the screen showing the user where the answer was correct or wrong so let's create that right now so in our UI folder let's create a new file and let's call this correct and let's go wrong overlay the darts I know I'm not probably original with my names but mmm that's fine I guess and in here let's import the material dart file package let's create a new class and let's call this correct wrong overlay this will be extending these state full widgets because we are going to have an animation in here so let's also create the states or our correct wrong overlay this will be exciting State of course and we've been doing this for every now so you should be getting used to writing this out right so right now in here that's overrides tea create state methods great state new correct wrong state and in here we should override the build method right so override widgets builds build context text so let's think about what in layout actually looks like for the overlay so so let's now start making the layout for its overlay so let's return a new material in our build methods and this material will have a color and remember from the preview application we had a light transparent black color so to get that transparent black color we say color is black and instead of using black we use black 54 which is black with a 54% opacity that's exactly what we need so the child will be one of those magical inkwell buttons so inkwell and the on tap property let's just make this something like prints you tapped the overlay this angle will have a child and this child is going to be a new column and here we will have some children one of them is going to be a container which will hold which will hold the icon that we use to show the user where the aunt was correct or wrong and we will also need a a text right to say whether the answer was wrong or correct so let's now just say correct okay so in this container let's now create our icon so to do that we just say child new icon and I don't I don't think we have used T I can with it before but it's fairly easy so you just say new icon and then in here at the arguments you pass in an icon so there is a lot of pre-built icons from the Google material library so to access those we just type icons dots and we're going to use icons dots what's it called done alright so let's save this and let's now go to our quiz page and let's import or overlay so import you I can let's say corrects wrong overlay the darts and now in our stack remember a stack is used to stack widgets on top of each other display widgets on top of each other so in our stack in the children of our stack let's add a new correct wrong overlay let's save this let's restore our application and let's take a look mm-hmm that doesn't really look right okay so the reason for that is the stack has a property called fit which takes a stack fit stack fit and instead and the stack foot is going to be either expand loose or pass through we want to the widgets to expand as much as possible so therefore the field is going to be stack fits don't expense save this fully restore this and now it should build a complete screen right hopefully and now you can see this text here and at the top you can see the icon all right so let's now create some sort of style for this overlay right because it looks a little bit boring and the content is not centered and that kind of stuff so let's go back to our correct one overlay file and first of all let's try to Center or contents so in the column remember column has a property called main axis alignments and let's set that to Center so main axis alignment that's Center save this hop reload this and that should fix that awesome now let's make the icon a little bit bigger so I can also has a property called size and in here let's make the size 80 point zero let's also add some style to the text so style new text style and textile let's say color course got white let's make this the font size let's make that something like 30 point-0 save this hot reloads and now it should look a little bit better now one more thing that I did in the preview application is I had this wide circular border about the icon so that's why we actually have a container here is remember the container has a decoration property which we can pass a new box decoration to and box decoration has a property called color so let's say color is don't white save this refresh and now we already got something but now I want to create a circular container rights instead of a rectangular so to do that we can use the shape property you need Ekron and we can say box shape box shape dots sir circle save this cut blue loads and now we have a circular button circular I can at least so let's now make our correct room overlay a little bit more modular because the user is at the moment stuck let's start seeing the correct text and the done icon but of course if the user is answer is wrong then we would like to display something else so first of all let's fix this typo here and let's now go into our correct room overlay let's create a new variable which is going to be a boolean called is correct and let's pass it in a constructor so correct wrong overlaid this dots is correct and now with this boolean with this variable we can decide whether the answers and whether the icon and the text should be correct or wrong right so in here let's type widgets dots is correct so if it's correct then we want to display the text saying correct else we want to display some text saying that the answer was wrong so something like wrong okay let's save this let's do the same for our icon so widgets dot it's correct that's true then we are going to display icons dots icons dots done oops that wants to work I cans out done else you are going to display icons dot clearer all right let's save this and let's now go to our place page because we changed the constructor here so you also need to do that here and let's say that I want that I want an overlay for an answer that was wrong that was false so let's type in false here let's reload this and now we should see the correct the correct icon and text of course let's try this forward through save this reload this and that should still be correct now I also feel that there is not enough space between this button and this text so let's go back to our correct wrong overlay and in our column in the children of our column between the container that holds our icon so this and between our text let's add a new padding so no padding and new padding of course has a property called padding which takes an edge in sets all and we're now going to use an edge in sets only and now we can choose between top bottom left right we're going to say top or actually we're going to say bottom and let's have some padding 20.0 let's add a comma here save this reload and now we should have some more space so let's now create the animation for our icons so if you remember from the preview application the eigen kinda rotates in growing bigger over time so let's now try to recreate that so let's go back to our correct run overlay and let's type with single thicker providing state mixing and here we need an animation controller and an animation of course so animation animation double and it's called this animation I can animation something similar of course and we also need an animation controller let's call this I can animation controller after that we should override the in its state methods overrides voice in its state don't forget to call the super top in its States and in here we should assign the I can animation controller to a new animation controller the duration will be a new duration and let's say that we will we want the animation to be in two seconds so 2 MV single course is just going to be this let's now also assign something to our I can animation so I can animation it goes new animation or equals new curved animation I'm sorry the parents of this curved animation is going to be our icon animation controller and for the curve we are going to use a curve called elastic out now remember we also need to add a listener to change the surface state whenever the I can I'm gonna have the animations value changes so let's do that I can animation dots adds listener and here we do this dot set state and we also need to start the animation right so we do something like I can animation controller dot forwards alright so now we have our animation ready we just need to use the animation the icon animation value somewhere so to actually do that let's Boop let's copy this let's cut this for now and instead of an icon being the child of the container we are going to create a new transform not rotate it also takes a child and that child is going to be our icon but also it also has a property called angle and this angle we are going to set to the I can animation value dot value so remember the animation value goes from zero to zero point one to one of course right so we want to rotate one full rotation so 360 degrees so we should do this times two times pi right it's pi it's 180 degrees and two times five would be 360 degrees would be and that would be a full rotation now pi is in the mat library so we need to import that stock in here let's import mat so dart mat save this and I think we should be fine now let's fully restore our application and let's take a look so that looks really good in my opinion but of course in the preview application we also we maybe also maybe I can grow bigger over time so let's do that really quick so in here the icon we have set the size to 80 so let's actually do I can animation dot I can animation dot value times eighty let's save this fully restart this and now we should see a cool animation with the icon growing bigger alright so almost all of our visuals are finished we only need to create one more page which is going to be the score page for to display at the end of the quiz but for now let's go back to our quiz underscore page of dart file and in here we still need to do a lot of things right because we still need to create a quiz we still need to keep track of the current question and all that kind of stuff so first of all let's create a question variable which I'm going to call question and this is basically going to be or actually it's called this current question and this is just going to hold our current question we also need a quiz let's call this quiz now let's create a new quiz here remember a quiz takes a list of questions so let's create a list of questions so no question the question here is going to be Elon Musk is human and actually know that these are statements and all questions but in my mind it just makes sense to call in questions so I'm sorry if you are like triggered about that but that's just what going on in my head so the answer for this question or statement is going to be false of course and then another question could be something like question pizza is healthy oh that's walls of course and let's now make a true question no question flutter is awesome and of course that is true let's save this and now we created a quiz some more thing that we need here is a string to hold the question texts we need we also need an integer for the question number the current question we need and we also need a a boolean to keep track whether the current answer is correct or run right all right so now let's override D in its statement itself void in its state in here called super dot in its states and here we are going to assign values to date to these variables of course so first of all the current question but the current question that once the load is going to be our quiz dots next question our question text is going to be our current question dot question and our question text is going to be let's think about this currents I'm sorry current question number so question number is it going to be currents question dots and how did we call this or actually quiz dots question number so let's now actually use our variables that we just created in our layouts so for example in our question text we can out change this hard-coded string with our question text and this number so the question number can be a question number now you might have noticed that we still have our overlay on top of our page which should not be there worth because at the beginning we want to use it to be able to answer so to actually create some sort of toggle to switch the overlay on and off we create a new variable I'm going to call this overlay should be visible and let's initially set that to to false right and then in here in our stack in the children of our stack we have our correct wrong overlay so we're going to use a ternary operator view so if overlay should be visible it should be visible equals true then we want to display or I'm correct room overlay right else we would like to whoops they should be a question mark of course else we would like to to hide it so to hide it we just pass which is given a an empty container right because an empty empty container does not display anything all right so let's save this let's restart a replication and now the overlay should be should be hidden awesome all right so what I would now like to do is get some functions to handle the answers of the users so whenever to use it taps through I want to display I want to overlay to pop up and check whether the answer was actually correct or false so let's do that right now in our quiz page state let's create a new function and let's call this handle answer and this will take a boolean which is going to be the answer at the user so in here remember is correct this variable will hold whether the current users answer is correct or false so we set is correct equal to well if the print question question dot answer equals answer so if these two are equal to each other the user's question is equal to the current the users answer is equal to the current questions answer then s correct is going to be true else it's going to be false something else that we should do is called quiz dot answer and in here we pass where the user is answer was correct or wrong so we do we pass in s correct and remember this an threw function basically just adds the score by one if the answer is correct something else that we should do here is called this table set States so the reason why we are calling distil set state here is because we want to display the page we want to display overlay we want to change something about the visuals oops by changing the states and the state that we were actually changing is the overlay should be visible right okay so one more time the reason that we call this dot set state is because we are changing states and changing this state will result in rebuilding the widgets to show a new visual in our case that's to show the overlay our bytes so now we should call hand lands or somewhere so whenever we press on the true button so this is the true button we want to call the handle answer method so handle answer with an argument of true right because we answered through this is going to be the false button so Paul's button I will never repress this button we would like to handle the answer and we'll answer all false awesome now one more thing that we should do is remember the correct wrong overlay takes an arguments whether the answer of the of the user is correct or wrong so here in the correct wrong overlay we should also pass is correct let's save this let's fully restart this and Boop now we are seeing our application we are seeing the statement now I can enter either true or false now remember Alumnus is not a human so let's enter false and now we should see a and overlay saying that the answer that we've given is correct that's now restarts again and let's give a wrong answer to our quiz to to test whether the overlay is actually working for the results well it is but let's say false for now and we get the overlay saying that our answer was wrong so as you might have noticed we still have a problem here because whenever the overlays display there is no way for a user to dismiss it so we still have that like cool ink well magical button but the only thing that it actually does is print something out in the console in the terminal so that's not really useful so that's right to fix that let's go to our correct wrong overlay file and in our correct room overlay let's create a new variable which is going to be a void callback and let's call this on tab now remember a boat callback is a signature function with a return type of voice so it doesn't return anything and it doesn't take any arguments so it's going to look like this so void void on tap so this is what this this is what this is going to look like right all right so let's add this in the constructor so this dots on tap this is on tap and let's now go to our to our correct wrong overlay States and in our inkwell whenever someone taps the inkwell we want to call our on tap void callback function right so widgets dot on tap right so once again one more time this is going to allow us to add a function so to add a function in our correct run overlay which is going to be executed every time someone taps on our inkwell so every one every time someone taps on our overlay so let's go back to our quiz page and let's go to our correct wrong overlay we can now see that we haven't liked that something is wrong here because we do not have enough arguments so let's open this up so first argument will still be is correct but the second argument is actually going to be a function now right so in here we create a new function and its function first of all is going to set the new is going to update the current question so a current question equals quiz dots next question something like that we're going to do is do this dot sets State and we're going set state because we want to put we want the overlay to to change so overlay should be visible should now be equal to false so we are dismissing you overlay anyway the question text visual will also change right so the question text should now be current question that question and the question number visual should also change so the question number is now going to be equal to quiz question number all right let's save this well that's fully reload our application and let's take a look all right and something is wrong of course we forgot to add the semicolon at the end of these diskette States function so let's save that and let's reload again and once again I did something wrong of course because this current question should be equal to quiz dot next question this is a getter so we do not have to make this a function call let's save this and let's restart is one less time to check whether our code is correct all right so now we can enter our statement so pit is healthy well it kind of isn't so let's save false this should bring off bring up the overlay saying that the answer is correct and now whenever I accept this overlay then the overlay should dismiss the question text should change and the question number should also change right so let's do that let's try that and that works now this the animation for the question text doesn't work anymore and there's a there's a good reason for that so let's try to figure it out right now so they actually understand why our text is not any meaning anymore after we tapped on the or after we dismissed the overlay we should go back to our question underscore text of dart file and let's take a look so here in our United States in here we start the animation so we 40 animation once but we want to update animation every single time that that we change the text so every single time that this text changes right so to do that we are going to override another method so for it did date widgets and this is going to take a question text old widgets so what did update widget do so I'm sorry so and what this is going to do for us is every time that the that he waited updates we are we are going to be able to compare the new widgets and the new widgets no question text with the bold widgets right so that's that's right to do this first of all we should call super updates update the date widgets old widgets and here we can do if old widgets dots question if that's not equal to widgets dot question then we want to reset our animation right we want to restore it so we do one size animation controller dot reset and after that we do font size animation one size animation controller dot four words right so poop let's take a look at that one more time so did update widgets will get called whenever T widget updates and it will also give us the old widgets and this old widgets will make it possible for us to compare the old widget with in new widgets so it would it makes it possible for us to check whether the old question the question in the old widgets is not equal to the question in a new widget anymore so whenever these are not equal anymore you want to start we want to reset the animation and restart our our animation right so let's save this lets fully restore replication and statement1 it'll miss is human well that's not true so pulse so we got there oh we get the overlay and whenever I dismiss it now we should see our text animation popping up again and that works awesome all right so once that is done the quiz page is kinda done there is still a little bit of things to do some things to do but let's just consider it done for now so let's now actually try to get some sort of navigation between our homepage or a landing page and our quiz page right because right now in main the darts we are displaying our quiz page but of course that is not our home right so let's for now delete this and let's display our landing page to be our home page right say this restart our application and now we should see our landing page again all right so we are now going to connect it to two pages to navigate between them so let's go to our landing in article page the dart file and well that's first of all import the page that we want to navigate to which is going to be our quiz page and now remember that we have an inkwell so whenever we tap this this page we print something out to the terminal which is not very useful so instead of printing something else the terminal we would like to navigate so to actually do navigation we typed navigator navigator dot off context dot push push okay we want to push a new routes we want to push a new page this takes a new material page right and a material page right has an argument has a property called builder and in here we type book context those context context and here we return the page a direction that we actually want to navigate to so that's going to be that's going to be our quiz page let's save this let's restore our application and now everything went right then whenever I'd tap this page now we should navigate to our to our quiz page that works so let's now start creating our last page on this last page is going to be a page that displays the score when you are finished with your quiz so in the pages folder let's create a new file that's called as something like score underscore page Authority and in here we are going to import the material package and this is going to be a static page so we are going to make this a stateless week it's called score page so it will be extending stateless widgets and in here as usual we should overwrite deep dope methods the context context and now we can start building the layouts now if you want to do this little page in your own feel free to do so it's a very simple page and it's just going to display the score of the of the user from the quests right so if you want to challenge yourself feel free to do this yourself and come back to the video after that all right so to actually build this page let's return a new material this material is going to have a collar whoops collar to make this blue a blue accents collar it's going to have a child just going to be a column this column is of course going to have some children we want to display the children in the center of the column so in the center of the main axis so main axis alignments will be main axis alignment Center and in here we will have a texts so a new text displaying something like your score then we will have another text something like new text with the score so something like two out and then we will have an icon button so a new icon dozen this is the first time that we use this this widgets and I can button is basically the same as an icon but it adds the functionality of a button to it so an icon button has a property called icon and here we can create a new icon widgets and this icon widget is just going to show I can with an arrow to the right if I can find its arrow right and whenever we also want to give it a color so colors want to give the button the colors or color stuff lights we want to give this an icon size of 50 point zero and whenever we press this button so I'm pressed for now we're just going to print cool awesome so let's now go to main the darts and let's import this page so imports pages and this is called the score page let's now display it as our home page so new score page save it and restart our application so let's now style our page a little bit better because it doesn't look that good in my opinion so let's go back to our score page first of all the text should have a style so style new text style the color should be white in my opinion color the white and the font weight should be bold weight bold and font and the font size is going to be equal to fifty point zero and that's actually apply the same style to to our other text save this restart it alright so let's now actually try to get rid of this hard-coded score so to do that let's create some new variables let's say final int I'm score and we also need an integer to keep how many questions that actually works out so it'll questions and now we can create a constructor here so for page this score and this dot total questions total questions writer and let's now change this so in here let's do score dot two string plus so little questions dot two string save this and of course now in Mabel dart we are going to have something that is incorrect because now we need two arguments in our score page so let's do that let's say that I have a score of five out of ten save this will let me start this and that should work alright so let's now actually try to create some sort of navigation between the quiz page and the score page so to do that lets go to our quest page and the dart file let's import this score page here so imports oops score let's import score page and I remember whenever we tap on the overlays and whenever we tap on the correct wrong overlay then this function is called so at the beginning of this function if the quiz the blank equals two or question number so this actually means if there is no questions left then we should navigate to our to our out of page right so then we're going to do navigator dot off context dot push and we are going to push a new material route page or page right writer the builder is going to look like this whoops build context context and here we return or we say new score page and in here we can pass in the score and the score was called was stored in quiz score and total questions was storing quiz dot lines right so something other we should do is return because we do not want any of this or any of this to be executed after we navigate it to our page let's save this and let's restart let's actually first go to our main the dart file and here let's make our quiz page or home page so new quest page save this and now we start alright so that actually crashed the application for me and a reason for that is that the animations are not this post or animation controllers are not exposed so what that actually means is let me show you guys so in question text for example we have an animation controller and whenever we dispose our our widget which dog also disposed our or animation controller so we should override a method here avoid this close and here we call font size animation controller dispose now we call super dot dispose and it's actually very important to do every single time whenever you have in an animation controller and this will free the resources from that animation controller to your device again so never forget this now we also did we also forgot to do this in the correct realm overlay so we should also have an override here void disposed and in here less to I can animation controller disposed and the Superdog dispose now save this let's go back to remain the dart file that's a fully real abilities application and now we should be good to go okay so let's take a look but everything works so pizza is healthy through whoops that's false so that's wrong for the results and that's true for sure ill musk is human that's false for sure and now we should be navigated to our score page with the correct score which is correct but one thing that is not correct is that we can still navigate back right so that should not be possible so to fix this we are going to go back to our quiz page and here we want to to push and remove all of the previous location that we've been to so let's do that really quick so push and we move in so let's remove this and we want to remove all the previous rights that we've been to so routes route we want to remove everything until you're out equals no right so what we did what we did here is this first argument is still the same the material patrons and the second argument is now telling us ok we want to remove all the previous pages all the previous routes and so the route is zero um no so until there is no route left let's save this all right so let's now test this again so Alumnus is human false pizza is healthy false and letter is awesome that's true let's now now we're going to the score page whenever I tap the back icon the icon the app would actually close okay so I went ahead and we started my application and now the final thing that is left to do for us to finish this application is create some sort of navigation between the score page and the landing page right because every time that we are on the score page we want to be able to go back to the landing page so to do that lets go to our score page file and here we have this icon button and whenever we press on this icon would want to go back to the landing page so first of all let's import the landing page imports and once it import landing underscore page towards my name here let's do navigator dot off so just like we did before context dot push and remove until because we don't want to use it to be able to go back to the quiz that he actually finished right so push a remove until so first of all the first argument is going to be a new material page right with a builder let's fill us in real quick build context context now let's return a new landing page here and the predicate is going to be just go back until there is no roots left so root root until really equals null right so this is saying remove all the roots until there's no wood left right let's save this let's now go to main load arts and let's switch quiz page with landing page and now we should be able to have to to go through the full process of our application right so if I now restart certification now I should be able to just start to quiz so there is awesome through let's make some mistake here yellow mask is human true that's Falls actually but okay Pete eyes healthy Falls now we see the score is two out of three and when we press this button here then we go back to the landing page so let's try this again we taste healthy is that through its Falls LMS gets human falls and that is awesome that's true and let's now actually try to go back to the quiz to the quiz page but remember we push them removed until there is no page or no route left so that should actually close our application and that did exactly what we expected it to do awesome so our application is now finished alright so that was the complete crash course for flutter I really hope you guys enjoyed this video there was a real end video I know it took a real long time to make so I would appreciate if you would drop a thumbs up if you enjoyed it if not of course feel free to but some constructive criticism down in the comments below also if you did not understand a specific concept of litter such as navigation animation I got a lot of other great tutorials on my on my youtube channel and that you can watch to like maybe get a deeper understanding of the concepts so that was it real guys enjoyed it really hope you guys learned something and I'll see you guys in the next one

Channel: Bram Vanbilsen

Views: 274,031

Keywords: Flutter, Flutter Tutorial, Flutter SDK, Flutter Windows, Flutter Mac, Mobile App Development, Android App, iOS App, iPhone app, iPhone, Android, Dart, code, beginner, crash course, easy, scratch, basic, Material Design, Flat Design, Java, Swift, Objective C, codebase, single, single codebase

Id: jBBl1tYkUnE

Length: 108min 24sec (6504 seconds)

Published: Mon Feb 26 2018

Reddit Comments

[u/SmellsLikeHerpesToMe]

Just finished this if anyone has issues with the walkthrough. Very quick, in-depth look at all the basics!