Flutter Tutorial For Beginners [2024] | Flutter App Development Course For Beginners | Edureka

[Music] foreign [Music] the ultimate toolkit for creating visually stunning and highly performant mobile applications platter uses one code base for multiple mobile platforms want to know more about flutter then you have come to the right place hi everyone I welcome you all to explore flutter in this session on flutter tutorial with the following agenda firstly we will start with what is flutter and followed by we will look into why we use flutter after that we will move on to environment Center where we will be installing flutter SDK and Android Studio then we will see that the programming language for flutter then we will move on to the dart basics where we will cover variables data types operators control flow and loops then we will move on to Slater architecture and we will see how it is built then we will jump into widgets the important building block of flutter then we have stateful and stateless widget and finally we will end the session with small flutter project but before we get started make sure you subscribe to our edureka's YouTube channel and hit the Bell icon to stay updated with all the latest edureka videos and also if you are interested in getting online training certification course in flutter then please check out the link given in the description box let us explore what is flutter flutter is an open source mobile application development framework that enables developers to create high performance visually appealing app for Android iOS and other platforms from a single code base so this is the actual definition of flutter so let me make it it in a simple terms so flatter is a tool that developers use to make mobile apps so that can work on both Android and iOS devices before flatter developers used to write different codes for both Android and iOS but now using flutter we can write a single code for both Android and iOS and this can save time and effort for developers and all of them to create apps that look and feel great on both platforms and you should know that flutter uses a programming language called Dot which is easy to learn and use for those who are familiar with other programming languages Slater also offers a rich set of pre-built widgets and tools making it easier for developers to create beautiful and functional apps and we don't have many other Frameworks for Native Android and iOS platforms but why do we actually use flutter as we saw that the flutter is a mobile development framework that allows developers to create visually appealing and very efficient app using startup and not only that we also have a lot of features that flutter provides the first thing that the flutter is a fast development framework so with this fast development feature flutter offers a hot reload feature that allows developer to see the changes in their code immediately without restarting the application which means it processes like a speed of the wind so which speed UPS the development process do right so with this hot reload feature if our developer can immediately see his results then obviously we will get a expressive and flexible UI right here flutter uses a widget-based architecture that allows for building custom UI elements easily and quickly it also offers a large library of pre-built widgets that can be customized to create Unique Designs then we have another feature that is native performance flutter uses Dart programming language so which is compiled into a native machine code this makes the apps built with flutter highly performant with smooth animations and quick reload time and the most interesting feature is the cross-platform development with flutter developers can build the applications for multiple platforms like Android iOS web and desktop from a single code base saving time and efforts so imagine how much time and efforts are saved using a single code base and finally flutter is for free yes flutter is a open source framework with a vast community that provides support documentation and a wide range of plugins and packages to choose from aren't you excited so these are the reasons why we use flutter today so we have seen what is flutter and why we use flutter and obviously the next step will be environment setup to install flutter and set up the environment for that we need some of the prerequisites that is Java Android studio and finally we will be installing flutter so we will see the step-by-step procedure to install all these softwares so the first thing I will be installing is Java for that go to browser type Oracle Java so Oracle is the official website to install Java so go to the first link and you will get this UI so here you can see this download Java over here right so you can go and click here to install Java so as you can see here these are the latest version that are available now and if you scroll down you will get the Java 19 for Windows so if you can see we have 64 compressed 64 installer Etc right so we need installer so just go and click on this link so that this will be installed over here now it is downloaded go here and click on this so as you can see we are preparing for the installation and you can see or welcome to installation we have Java SC development kit 19.0.2 so let's go and click next and you can see here the path here we have a c folder in the program files and Java will be installed if you want to change you can change I would like to set it as a default I'm clicking next so as you can see we have successfully installed Java now the next thing is we need to close this and let's see where we have installed the Java so go to file explorer and you can see we have installed Java jdk 19 on Windows right so now we have saw while installing the path was in C drive and in program files and you can see here we have Java over here red so double click on this and you can see that jdk 19 right so click on that go to bin so if you click on the bar so you will get to copy this link so copy this and now go to start and just type edit environment variable go to environment variable here you can see the path over here right so click on this edit and go to new click here and paste the same path and click on OK let us create a new variable that is let us give the variable name as Java underscore home so make sure it is in caps and paste the same link just remove the bin so click on OK and find it so we have successfully installed Java so to verify that go to start and type CMD then click enter here you will get a comment prompt here to check just type Java space hyphen hyphen version hit enter and you can see we have installed a Java 19.0.2 version right and now you can check Java C that is the compiler version here you can see we have successfully installed all the in Java folders and files now let us go and install flutter SDK for that just type flutter dot depth so you will go to the actual flutter page over here and go to Docs click on get started here you will get started with the installation so I'll now install for Windows and here you can see the system requirements specifically for the Windows installation here you can see the operating system the basic requirement will be Windows 10 or later versions and you can see the disk space here the basic requirement is 1.64 GB so this do not include the disk space for the IDE that is your Android Studio or the other tools that you develop the application form and the next thing is stick tools the first thing is the windows Powershell so this will be pre-installed with the Windows 10 so if you are using Windows 10 this will be already installed so you need not to install again so if you are using a lesser version of Windows then you need to go and install this the next tool is they get for Windows so which I don't have so I'll go and install this so I'm using the 64-bit I am installing this so once this is downloaded click on that and we got a prompt over here saying that do you want to allow this app to make changes on your device so click on S same as Java so here we have the license obviously we need to click next and we need to agree for this and you can see the path over here I'm keeping everything as default click on next next so here uh we need to click on the second option for overwrite the default Branch name for new repositories and click on next and for the other things just keep the default next next and here we have come to the installation so finally hit on finish and you'll get this installed successfully to check this go to comment prompt again and you just need to type get space hyphen version and you can see here the version is 2.39.2 so here we have successfully installed the git now we will go again to the docs and see what next to be installed so get the flutter SDK over here to download this you need to click on this blue button and you will get a zip file so here you can see we have this ZIP file installed so click on this it will ask you to open this file in file explorer so let's say okay here as you can see we have this flutter folder over here we have installed all this so we will go here and we will copy this here you can see the instructions extract the zip file and place the contain flutter in the decide installation location for the flutter SDK for example C Source flutter so let us go to the file explorer let us see where our flutter has been installed first let us extract all this and you can directly browse over here and say the location so select folder so let us go and check in the C drive so we have flutter so let us paste here in the C drive here you can see we have flutter installed successfully over here so let us go to bin and if you click here you will get the path so copy this and go to environment variable and here you can see in environment variable go to path so if you don't have you can create new so I already have so I can edit in this so go here and create new and paste the path which you have copied and click ok now let us go to flutter so let us go to fluto and you can see the flatter console over here so double click on this you can see a comment prompt over here so you can just type flutter space hyphen hyphen version so you can see flutter is successfully installed you can see here welcome to flutter prom so this means flutter is installed in your system you can check there or else you can go to comment prompt and just type flutter space hyphen hyphen version and here also you can see we have the same result we have flutter 3.7.7 right so with that we have successfully installed flatter and you can go to comment prompt and just type flutter doctor so here this will tell you what needs to be installed and not to be installed so here you can see the flutter is successfully installed we can see some green color tick mark and also you can see the x mark over here so this will tell you unable to locate Android SDK so that it is telling us that we need to install Android Studio or if you want to install visual Studios and you can also install visual studio so we have these two to be installed so I am going to install Android Studio so let's go to this file again and go to Android setup so go here we already have a link given over here so click on that download this Android Studio agree for the license and download so as you can see it has been downloaded so let's click this so this will tell the setup will guide you through the installation of the Android Studio so we'll just click next next so this will tell you the path click next then it will ask for the installation so let us click install and click next now click next so as you can see here completing Android Studio setup so let us finish now this will ask you for the import Android Studio settings so let's click ok after that see here we have successfully installed the Android Studio so let us keep this don't send and next so let us keep this custom next so this is the path where the Android Studio has been installed so let's click next so here you can see the Android version 13 is tiramisu so here let us click next so that is the version that we are using now so let us click next so here we need to set the GB for emulator so let us keep the recommended settings and click next next and accept all the license and click finish so downloading components is completed so let us click finish so here we can see we have Android Studio so let us go to plugins here and install flutter install so this is telling me to restart this IDE so let us do that restart now let us create the new flutter project so create flutter here you can see the browsing option so we have saved the file in C so let us click this let us go and find the flutter over here so click on this so click on OK next so here you will get this so click on the Android language as Java and give the project name so let me give test one and let us go and create so it is asking me invalid module name test one must be valid a DOT package so it must be in lower case so it is creating flutter project so here you can see this file right so we have the project name over here and then we have the new flutter project and we have getting started so this project is the starting point for flutter application okay now we have successfully installed everything and we are into the flutter project now let us click on this lib folder so that is the library folder over here you can see the main dot dot file so here this is the actual code that is the flutter developer had given us so as default this code will be in the main dot dot file so you can run this file over here and check whether your emulator has the output or not so that you can check whether your emulator is working or not or any other installation has gone wrong somewhere so with this you will get to know that whether you are properly installed everything or not if you want to run this code you need to go to emulator and run so to create the emulator you need to have a device connected to this so here we have no device selected as of now so let us go to search and find for the virtual device manager and click on that and I will go here and create device here you can select the phone and selective version you want for example let me create six and let me click next so all the packages installed and let's click finish and finish so here you can see we have created a virtual device pixel 6 API 33 so let us run so here we got an error called haxm installation failed so for that let us go and close the project so let us go to control panel and let us check go to programs uninstall our program turn Windows feature on or off so here you can see we have this hyper-v so click on this and hit OK so Windows completed the request change so let us close now let us create new device so here as you can see we have many categories over here like phone tablet desktop TV Etc and if you click on phone we have lot of other versions also so I am clicking here at pixel 6 and I'll click next here we have tiramisu so that is the latest Android 13 version so after this let us click next so here we have the avd name that is our virtual device name so here we will see what phone we have selected and what version we have selected everything so once you have confirmed everything then let's finish we have created a virtual device over here named pixel 6 API j3 so if you click on this button so this will run our emulator so here you can see our phone has been turned on so here we are getting Google as you can see it is loading so here it is started as you can see here we have entered into our home page so this is how our UI looks like so it will act like your normal phone so if you swipe down so it will show you all the notifications everything over here and you will have internet Bluetooth everything over there then here you can see our apps so you can click on any app so that will act like your normal application in your phone so you'll not feel anything different so it will look and feel like your normal phone so here as you can see there is a code so when you click on your new flutter project this will automatically be in your default folder so this is for testing purpose whether your emulator is working or not so this is a sample code so as you can see here we have the running Gradle task here in the background tasks so it is installing some packages so here you can see our flutter project has been deployed here is our app UI so as you can see we have a app bar over here flutter demo home page and here is the code for that so let's modify it uh I'll remove flutter demo so I'll just keep home page so this is the title for our home page so this is our home page now let us go down so here you can see the text over there right so let us change that here I changed so once you click on save so automatically this page will be refreshed and your output will be automatically saved so as you can see the changes has been updated so this is our home page here we have changed that clicked right so that has been changed so here is the button so if you click there is a changes happening right so this is the logic behind this so if you click on that the number should be incremented so here you can see in the code on on pressed the increment counter should be called right so if you click here see if I click so the number is incrementing right so that is the logic behind this code so this is a simple application so this is automatically built for you so you no need to code this while beginning so you can test this using this emulator so let's stop this so that we have successfully completed our environment setup with installing flutter SDK Android studio and Java so to get started with the flutter we need to know our programming language called dot so now let us see what is done Dart is a general purpose programming language it is developed by Google in 2011. it is mainly designed to be easy to learn and use and it can be used for both client-side and server-side development also that is object oriented strongly typed and has built-in support for asynchronized programming Dart uses a just-in-time compiler for the fast development cycle and easy debugging and also that supports ahead of time compilation for generating native machine codes it can also interoperate with other languages such as JavaScript that is similar like other programming languages in their basics that also has variables data types operators control flows and Loops now let us see each of internal detail form now let us go and explore variables and data types in Dart in that variables are declared using where keyword just like our JavaScript Dart is a statically typed language which means that you must specify the data type of the variable when you declare it so the data type that are supported by Dart include int double string boole and dynamic so these are the respective examples for it we use int for declaring it and number as a variable name and we give the value over here so if we look at the description it uses to store integer values so as I said before that is similar like other programming languages so it is beneficiary if you know other programming languages before you start with DOT so as like other programming languages variables in Dart are used to store values that can be later referenced and modified so in that you can declare a variable using the where keyword followed by the variable name and its initial value and also you need to keep in mind that that is a statically typed language which means that once you declare a variable with a specific type you cannot change its type later so here let us see an example of declaring an initializing variables in that a variable is a named space in the memory so that means it stores a value in other words it acts like a container for the value in the program okay so variable names are called identifiers and you should keep in mind that identifiers cannot be keywords and identifiers can contain alphabets and numbers and also keep in mind that it cannot contain spaces and special characters except the underscore and the dollar sign and here the variable must be declared before it is used that uses the where keyword as I mentioned before the syntax will be where and you will give the name for the variable and you will specify the value for that name here all the variables in dot stores are reference to the value rather than containing the value so if we look at data types it is one of the most fundamental characteristics of programming languages so these are the types of values that can be represented and manipulated in the programming language take a note that these dot language supports the numbers strings booleans lists Maps also so if we consider numbers we have two data types namely integers and double integer values represent non-fractional values that is this numerical values without any decimal points for example the value is equals to 15 is a integer and integers are represented using int keyword that is this int and the next data type is double so previously we have seen int so we have said that it does not support any fractional values right so to use any fractional values we use data type called double so the double data type in dot represents a 64-bit floating Point number for example the value is equals to 15.01 is a double value so the keyword for double is double itself so it is used to represent a floating Point values then we have strings here strings represent a sequence of characters for instance if you were to store some data like name address Etc right so these names are in form of strings those are characters so the string data type should be used in this case so the keyword we use for string is string itself so these string values are embedded in either single or double quotes so it will be recognized only if it is inside a single or the double quotes as you can see here we have string message is equals to hello world so it is wrapped inside a double quote and the next data type is Bool it is nothing but Boolean so this Boolean data type represents the Boolean values that is true and false so here dot uses this Bool keyword for this Boolean data type so you will have a scenario of whether the day is sunny or rainy so if it is sunny then it is true or else it is false to indicate this you will have to specify a bold data type so in this example you can see we have bull is sunny whether the day is sunny then the output will be as true or else it will be as false then we have another data type called Dynamic so this is kind of interesting data type so when a variable is declared as a dynamic type so it can store any values such as int and float or any string values even so this is dynamic so the values can be dynamically changed even so the value of dynamic variables can change over time within the program so for example you want to specify a float value for a certain code then you have to specify a string value in the other code so you can use this Dynamic instead of specifying int or string so let us see an example for data types and variables so for that I am using a DOT pad for the compilation here let me type a class name as edureka and I will give data type for name age and experience and whether the person is the student of edureka or not so I'm going to check what kind of data types are these so for that I am going to type all this so here you can see we have a class name as edureka and I have variable called name and I have a value for that and respectively for age experience and a variable called a and I want the data type for all the variable over here so that I want to print here so for that I have data type of name I'm asking what kind of data type is that and I am calling it with a dollar sign and I'm asking it in the runtime type so let us run this as you can see the data type of name is string a data type of Ages int and the data type of experience is double as you can see we have given experience as 1.5 so it is in a fractional number so that the compiler tells us that it is in the type of double so as you can see we have given the value as true so as I mentioned in the table we have a Boolean value so Bool value is true or false so I have specified here true so that compiler takes it as it is a bull data type so this is what the variables and data types are so let us move ahead and see operators control flows and Loops in dot so the operators are the special symbols that are used to carry out certain operations on the operands so the dot has numerous built-in operators so which can be used to carry out different functions for example plus symbol is used to add two operands so the operators are meant to carry operations on one or two operands so we have a different types of operators in that for example automatic operators relational operators logical operators and we have more such as bitwise operators conditional operators and Etc next we have control flow statements the control flows or the flow of control is the order in which the instructions statements and function calls being executed or evaluated when the program is running so this control flow statements are also called as flow control statements so in that these statements inside your code are generally executed in the sequential form from the top to bottom so it is not always the case your program statements to be executed straight forward you may require to execute or skip certain steps or the instructions based on the conditions so here we have if statement if statement nested F and Etc and then next we have loops a looping statement in dot or any other programming language is used to repeat a particular set of comments until certain conditions are not completed or in other words that Loop is used to run a block of code repeatedly for a given number of time or until it matches the conditions so this Loops are essential tool for any programming languages here a loop can have two parts such as a body of the loop and the control statements so the main objective of the loop is to run a code multiple times until the condition is satisfied so here in Loops we have for Loop while loop and Dubai Loop so let's see each of it in a detailed form let's start with operators so as I mentioned before we have lot of operators such as automatic operators relational operators and logical operators and not only that we have many more but here in the session we will be exploring only automatic relational and logical operators so if you look at an automatic operators this class of operators contains those operands which are used to perform some automatic operations so they are binary operators that is they act on two operands for example a plus b so here in this example we have X Plus y so here x is an operand and Y is an operand so we perform some of the automatic operations on X and Y so in case of addition if you want to add any operand so if we use this plus sign to add multiple numbers so it is same like the mathematical operators so to add any operands we use plus to subtract any operands we use minus and same like multiplication division and modulus so you can see the addition of two or more operands for that we use plus to subtract any two operands we use minus and we use star for multiplication of two or more operands and we use slash for division where it retains the quotient after the division as the output and when we look at modulus it Returns the reminder after the division so these are the automatic operators so let us see an example I will create a void mean here I will declare two variables that is inch a is equals to 2 int p is equals to 3 so I will start with the addition so I want the output in a variable called C so for that let me declare variable C I want addition of a plus b and I want it to be printed as the sum of a plus b or A and B is Dollar Tree so let me run this here you can see the sum of A and B is 5 so 2 plus 3 is obviously 5. so the next operation is subtraction so same like that where yes is equals to a minus B and I want it to be printed as so I'll do the same for all the operations and I will run it together so if you run this you need to get addition subtraction multiplication division and remainder so if you see the sum of a plus b is 5 the subtraction of A and B is minus 1 the product of A and B is 6 and the quotient of A and B is 0.666 and the remainder of A and B is 2. so these are the automatic operators so this is how they work now let us move to relational operators so this class of operators contain those operands which are used to perform relational operations we use greater than lesser than which is not equal to so we will be getting some scenarios like whether the number is greater than this number or not or whether it is equal to this or not so in such conditions we will be using relational operators so here in this table we have operator description for that and what kind of operations we will be resulting with so here we have greater than this will check which operand is bigger and gives a result as a Boolean expression so as you can see we have the output in a Boolean expression so it will tell you whether the x is greater than y so if it is so it will give you true or else it will give you false so this is how it goes like now if the number is lesser than then it checks the condition and it gives you the relatable answer so we have another operator such as greater than or equal to and we have lesser than or equal to we have equal to or not equal to so these are called as relational operators now let us see some examples using relational operators now I am going to dot pad so let us clear the previous operations that we have done and reload this and same we need to call avoid mean inside that let me declare int a is equals to 5 in B is equals to 8. so the first operation is greater than so where is G which is equals to a if this is the greatest sign and B so I want this to be printed as a is greater than B so let me run this so as you can see we got the result as a is greater than b is false so a is 5 and B is 8. so in this case a is lesser than b so the condition goes false so we get the result as false so for example if we change the number to some greater numbers and let us run this and the result you got is true now so this is how the greater sign works and similarly it works for other signs also now let us try for the lesser than sign same as previous and you need to keep in mind this is case sensitive so if you give print as capital then it will give you an error that the function print is in defined so you need to keep in mind that print should be always in the smaller case now I want the result as a is less than speak now I will check whether d a is greater than or equal to B so for that greater than or equal to so in that you will specify the comment using two slash so this is how you will Define greater than or equal to now let us check the equality between A and B so for that for that the operator is a double equals to B so if you do this then this will give you the equality between a and b and the next is not equal to for this the sign we are using is exclamatory and equal to so this means it is not equal to so a is not equal to p so now let us check the output for everything here as you can see a is greater than b is true so let us check here a is 9 and B is 8 so according to the print statement here we have a is greater than b so if that is case we want the output to be true right so we got true now a is less than b so here a is 9 and B is 8 so B is less than a so here this print statement is false so here we got false and if we check a is greater than or equal to B so a is greater than or equal to B yes it is true because a is greater but not equal to so here we are giving two conditions that is if it is greater or equal to then the answer should be true or it should give us false so it is the same in case of less than so if a is less than or equal to B then it should give us the answer as true so here in our case a is greater than b so here this condition is false so if you check in terms of equality between two operands a is not equal to B so we got false now if we check the condition for not equal to then a is not equal to P yes a is not equal to B so that is why we got the answer as true so I hope you understood the relational operators now let us move to logical operators logical operators are used to perform basic logic gates like and or and not so if you look at this table we have the symbols for operators and the name for it so this two amphisons is used for and operator and this logical dysfunction operator is used for or operator and this exclamatory is used for not operator and this and operator is used to add two conditions and if both are true then it will return true now if you look at this or operator it is used to add two conditions and if even one of them is true then it will return true now if you look at naught then this is used to reverse the result so when the input is true the output will be false in this so let us take an example for this also so let me open avoid mean where X is equals to true where Y is equals to false now let me take the operators and operator so which is equals to X I am giving the and operation over here same for or operation so I am giving only exclamatory X whether DX is false then the output must be true so that is why I am giving only one operand so I want it to be printed now let us run this code okay I have given operation here and I have typed operate over here so that is why I am getting an error so let us type operation yes so the X and of Y is false because we have true and false so take this as 1 and this has zero so 1 into 0 is always zero so here 0 in terms of computer is false and 1 is true so and this false if you take or operation r is true plus false so 1 plus 0 so which is equals to 1 so 1 is true right now here if you take not operation so naught of X is false because X is true so the complementary of X is false right so that is the result for logical operations so I hope you understood The Operators now let us move on to the control flow now let us look at if statement so this statement is a decision making statement that guides a program to make decision based on the specified criteria and if statement consists of a Boolean expression followed by one or more statement for example you have a condition let's take a scenario for example a candidate needs to score 35 percent to pass an exam or else he will be considered as failed candidate so here the condition is 35 or more so if that condition is satisfied then the candidate is fast or else he will be considered as failed so this is how if statement takes a decision based on a criteria so here the criteria is 35 or more so it will take the decision based on the specific criteria now let us take a look at dots if else statement if else statement provides the facility to check a set of test expressions and it will be executed the different statements so it is used when we have to make a decision from a more than two possibilities here this type of structure is also known as lcip ladder so the condition is evaluated from top to bottom so whenever it found the true condition the statement associate with that condition is executed when all the given conditions are known to be false then the else block will be executed with this let me give you an example for a better understanding for that I will write void mean so let me give marks as a variable so I will give 95 as a Max and I will specify if condition so if marks is greater than or equal to 95 then I need it to be printed as outstanding so I have specified if condition over here now I have another condition to be applied over here for that I will do else if marks is greater than or or equal to so I have else if block here so I have specified marks over here so if this marks is less than or equal to 75 then it needs to be printed a then I will give another else if for the marks which is greater than or equal to 65 so if it is greater than or equal to 65 then it needs to be printed b or else the candidate is filled so for that let me give the number as 89 and let me check here the marks is greater than 75 and less than 95 right so the condition here is true so this block will be executed and it will give us the result so how does this work first it will check the marks over here and it checks the first condition and it evaluates the condition so here the 89 is less than 95 right so this condition is false so it will go to else if condition now it will check for this condition and 89 is greater than 75 right so the marks is 89 so the 89 is greater than 75 so this block is true right so then inside this else if will be executed as a result and other part will be ignored by the compiler and will give you the result as a so this is how the else if statement works now let us see loops Loops in dot are used to execute a block of code repeatedly in computer programming a loop is a sequence of instructions that is continuously repeating until a certain condition is reached typically a certain process is done such as getting an item of data and changing it and then some condition is checked such as whether a counter has reached a precise number if the condition has been reached the next instructions falls through to the next sequential instruction or branches out to the loop so a loop is a functional programming idea that is commonly used to write a program and then comes an infinite Loop so it is one of that lacks of functioning exit routine the result is that the loop repeats continuously until the operating system sees it and terminates the program with an error or until some other event occurs such as like having the program automatically terminated after a certain duration of time so if not mentioned any conditions then the infinite Loop will be continuing in Loops we have for Loop while loop and do while loop a looping statement in that or any other programming language is used to repeat a particular set of comments so if we look at for Loop for Loop in dot is similar to that in Java and also the flow of execution is the same as Java so if you look at the syntax we have for Loop and we have initialization condition and text expression after that we have a block of code that is the for Loops body so how this control flow works so it starts with the initialization then it checks the condition then it goes to the body of the loop then it checks the test expression so the first is executed only once in that beginning while the other three are executed until the condition turn out to be false Now with an example let us understand this in a detail form so for that I will go to dot pad let me open a void mean then I will initialize the loop so for int I is equal to 0 then if I is less than 5 I should be incremented so this is my for Loops condition so here what did I do here I have initialized int saying I is equals to 0 so here I have a condition saying that I should be less than 5 so if I meets 5 or more than 5 the loop should be terminated or else the I should be incremented for here I will be printing welcome to edureka now the condition goes like this first for Loop checks the initialization then it checks the condition after that if the condition is true then the print statement will be executed then it goes again to this eye now the I will be incremented now the I is not 0 it is 1 because it is just incremented one is less than 5 right so again this print statement will be executed then again the I will be incremented so this will be repeated until this condition is false after that if once this condition is false then this Loop will be terminated and we will get the output as this the print statement is printed so this is how the for Loop works now let us go and see while loop here the body of the loop will run until and unless the condition is true here the while loop executes the instructions each time the condition specified evaluates to true so in other words the loop evaluates the condition before the block of code is executed now if you look at the syntax over here we have the while condition over here then we have the expression and after that we have the body of the loop right so here let's see an example for a better understanding so that I will just clear the for Loop and I will initialize variables where number is equal to 3 and let me give a factorial problem so where factorial is equals to 1. so I have the factorial is equals to 1. now let me give the while condition so while number is greater than or equal to 1 then the factorial is equal to factorial into that number so if that is so then number should be decremented if that is true then it should be printing the factorial now let us run this code so as you can see the factorial is 6. so what's happening over here so I have mentioned the number as three so I have initialized the number as 3. and factorial is equals to 1 so the number is 3 so the number is greater than or equal to 1 so it will go to factorial and it executes this formula then if that is true then it prints the print statement now let us go and see do while loop the Dual Loop is similar to the while loop except that the 2y Loop does not evaluate the condition for the first time the loop executes however the condition is evaluated for the subsequent iterations in other words the code block will be executed at least once in a dual Loop and you should be careful do not miss the semicolon used at the end of the Dual Loop now let us take a look at flutter architecture and what it is comprised of now one of the benefit of learning the flutter architecture is that it helps when structuring an application like updating the State Building Widgets or screen or making an app easy to maintain now knowing the flutter architecture let us get familiar with these Core Concepts now let us look at the layers of the flutter architecture we have embedder that is the lower layer then we have engine the middle layer and we have a framework that is the highest layer now if we look at embedded layer it is an entry point provided by a platform specific embitter which coordinates with the underlying operating system to access the service such as accessibility rendering surface and input the emperor is written in the platform specific language such as Java and C plus plus for Android and Objective C and Objective C plus plus for iOS and Mac OS and C plus plus for Windows and Linux flutter code can embedded into an existing application as a module or as a complete applications content using the embedder layer now once we finish the embitter layer we will move on to engine layer so this is written in C or C plus plus and it takes care of the input output and network request and it handles the difficult translation of rendering whenever a frame needs to be printed flatter uses Kia as its rendering engine and it is revaluated to flood a framework through the dart UI which wrap the principle C plus plus code in the dart classes then we have the final layer that is the framework layer here the framework layer is the part where most developers can interact with flutter the flutter framework provides the reactive and modern framework that is written in Dart within the framework layer it comprises of rendering widgets and material it also has a foundational classes and building block services like animation drawing and gestures which requires for writing of flutter application now we will look into these aspects in a more detailed form firstly we will go through flutter widgets the first thing to note in the flutter is everything is a widget a widget is simply an instruction that you place within your code and they are the basic building blocks of flutter application widgets indicate how they are present configuration and Status should appear in their display when a widget State changes it rebuilds its description which the framework compares to the previous description to see what changes in the underlying rendering tree to transition from one state to the next state a widget can be in the form of a button image icon or layout or even a text and placing the widgets together create a widget tree now as I said text rows and columns stack containers are also considered as widgets now if we take a look at text it is a widget lets you to create a runoff style text within your application so whatever you write in a text format so those are considered as a widget now if you look at row and column so these are the flex widgets it will let you to create flexible layouts in both horizontal row and the vertical column directions the design of this object is based on the webs Flex boxes layout model in flutter everything is widget as I said widget are the basic building blocks of flutter app to be precise there are two main types of widget one is stateless and stateful widget now before knowing what is stateful and stateless widget first let us see what is state the state is a information that can be read synchronously when the widget is built and might change during the lifetime of the widget in other words it is the responsibility of the widgets that is implemented to ensure that the state is properly notified when such State changes or in other words a state in widget that describes a part of user interface by building a constellation of other widgets that describes the user interface more concurrently now let us see what is stateless and stateful widget stateless widget are those whose State cannot be changed once they have been created they cannot be muted so once these kind of widgets are developed they are immutable that means that any changes to the variables icons buttons or data retrieval will not be affected the App State less widgets include icon icon button and text now we understood what was stateless widget now let us understand what is stateful widget stateful widget means the widget has a mutable state so whatever the changes happen so it will change over time so that is the difference between stateless and stateful widget so stateless is the changes whatever we are doing it will never affect the stateless widget but in terms of stateful widget whatever the changes we are doing so it will be changed and rendered automatically as of now we have completed all the theory parts now let us go and learn the practical way of how to create a flutter application I will be importing a tic-tac-toe game over here so as you know previously we have created a emulator right so that will be our emulator here also so let me import the code so I have imported the code over here so I am getting three errors right now so it is telling me to import the Google fonts right as I told you I will be creating a tic-tac-toe game then I will be using some of the animations and as well as some of the Google fonts for that the Android Studio will ask you to import some of the packages so that is what I'll be doing over here so here I am in pubspec dot yaml file here we have dependencies here I'll be adding animations and Google fonts version over here so that the Android Studio will understand what particular animations and Google fonts or any other tools will be understood by the Android Studio so that is the reason we add all the versions or all the tools packages that we are using over here so once we do that let us go to terminal and let's click on the pub get over there so that it will automatically run the code and it will import all the packages that we have mentioned so as you can see here we have changed 19 dependencies so after that go to the main dot dot so here there will be suggestions so just click on the suggestions but don't always stick to the suggestions sometimes it is okay but do not always stick on to the suggestions now let us run the emulator and let us run the file simultaneously so here we have the emulator and let us click on the Run here the file is compiling so here is our output so this is how our output looks like so I'll be adding you this code in the Drive Link or in the description box so we have this beautiful UI right it's for that let me explain this code detailing for a better clarification so here I have imported a package called material dot dot in flutter and I have imported Google fonts as I showed you here in the dependencies so as you can see here we have Google fonts and the next line is void Main and also we have this run app called tic-tac-toe so here it runs the run app function called tic-tac-toe it is the entry point of the application now it will run this run app function with the tic-tac-toe as an argument here the run app function takes a widget as a argument and renders it into a screen then we have the tic-tac-toe as a class so that is extended from the stateless widget now what is stateless widget so it is a widget that does not depend on the mutable state it means that the widget cannot change its appearance based on the changes that is happening so whatever changes we do so that will not affect the stateless widgets so that will be a static Widget the next one we have the build method there right so that will be called when the widget first built and whenever its dependencies changes so in case we have this built method returns a material app widget so which is a pre-built method that is provided by the flatter framework right whenever the changes happens so this build method will be called then we have the material app so here this widget provides a structure for the app and it sets the title for the app for example we have the title bar over there right or the app bar so whatever the name that should be defined over there will be declared over here in the material app these are the most important keywords that you need to keep in mind while building any flutter application first one is the void main so that will be an entry point that you need to keep in mind and next one is build method so this method is very important so anything the changes that happens there so that will be visible in the output so that is very important next one is material app as I said it is a structure of your app so whatever you define so it will be structured in a proper manner all these keywords are very very important while you start learning flutter so then after that we are defining the theme so we need to give the theme data over here so as a primary color I have mentioned blue so that is why we are getting their blue and we will give the text theme and you can see we have imported the Google fonts right from there we are using the pop-in text theme and then we have come to stateful widget now we understood what was stateless widget now let us understand what is stateful widget stateful widget means the widget has a mutable state so whatever the changes happen so it will change over time so that is the difference between stateless and stateful widget so stateless is the changes whatever we are doing it will never affect the stateless widget but in terms of stateful widget whatever the changes we are doing so it will be changed and rendered automatically so as you can see we have created a state over there so here in this box whatever the changes happens so that will be set as a state here we have a tic-tac-toe page state so this is a class so this class has three instances variable one is game State active player and winner so now here this game state is a list of strings that will represent the current state of the tic-tac-toe game board and if you take active player so it is a string that will also be represented the player who is taking the move if it comes to winner here this is also a string that will represents the winner of the game as you can see here x is a winner so it will be indicating the winner has X then we have the init State method so this method is called when the widget is first created in this case this will call the reset game method here the reset method will be called to reset the game to its initial state so whenever the button reset game click then it will automatically set to the initial state so this reset game method will call the initial state so it will basically tell that the game is over and the user wants to play again now let us see the check win and check time method so this methods will check who is a winner and whether the game is being tied so for example let me play a game so as you can see here no one is a winner so it is a tie this method will call check tie and it will be giving you an output called it is a type then we have check win method so if a player is a winner then it will check with these kind of conditions now let us see in detail so if this check win Returns the True Value the winner variable is updated to the current active player so here if check tide Returns the True Value then the winner variable is turned to type now if you look at a check win method that will check if the game has been won by the current player or not so this method checks all the possible winning combinations of the game and it will see the current player has made a winning move or not if any of the winning combination is found that all the three cells are marked with the same current player then the method turns true if none of the winning combinations are found to have all the three cells marked with the current player then the method turns false so with that this game will check whether the current player is a winner or not so these are the three rows and columns that will be checked by this conditions so these are the logical and the relational operations that I have mentioned before in the dart programming languages so these are very important before learning flutter you need to learn that programming language so each and every functions that you declare or initialize it will always need a dart programming language so next is the check tie as I said before so this will also check whether the game is on time or not so then comes the widget build board so this will build the board with the height and width 300 respectively so after that we have border and we have border radius that is set to 10 and we have box Shadows so these are the some kind of styling that we are doing for this application then we have the grid view Builder here the each small boxes are called grid so these are the three into three Matrix right so this will be mentioned over there so we have a cross axis count 3. then we have the animation widget over there so here we have our durations delay widget decorations everything so whatever the stylings we need to mention that we can mention so that you can alter according to your way so here we have the item count of nine so as I said before it is a three into three Matrix then we have the widget called build message so as you can see we have turn X right so this is the built message widget so this will be rendered when the current player changes from X to o or o2x or if the game comes to an end or whether the game is won by any of the player or if the game is turned to tie so whenever all these events happen this build messages will automatically re-render and will give you the output so whenever the game comes to an end or any of the player has won so here I have mentioned the condition as if the winner X wins the color should be in blue or else the color should be in red so whenever the O wins the game then the color will be turned to red or else it will be in blue then we have the widget called build context here we have scaffold this scaffold will have the properties like material app has so here where we will be telling the app that the Box should be aligned in the middle and the Box should have this much of height and width or any event happens like for example any button is clicked or any other boxes are clicked so that will be called through this scaffold method then we have the animation widget so here we have imported all the animations right so this will be called in the main dot Dart file so here all the animation will be in the version of 2.0.7 so this will indicate the widgets delay decorations and what kind of actions that are happening in the Box so these are all the custom animated widgets so whatever we have seen this from the animation widget so these are all the custom animated widgets so this will be used to a play a fade and uh slide animations to the child widgets so if you take a look at the initial state so this is a method so as I said before this is called when the first widget is created and within this method an animation controller is created with the duration specified by the widget duration so here also we have the build method so when the widget is built or rebuilt this build method will be called right so within this method of fade transition method is also called it also calls the opacity animations to the child widgets then finally we have a dispose method so when the widget is removed from the tree then this dispose method will be called So within this method the controller object is disposed to prevent the memory leaks so overall this code creates a flatter application that displays a game of tic-tac-toe let's finally play a game let's see who wins yes X wins so this is how this app works flutter is a easy and fun to work with and it saves your time and effort by letting you to create single code base for both Android and iOS if you like our videos then I suggest you to subscribe to our YouTube channel and hit the Bell icon to never miss any updates from us especially on flatter I hope you will be a flooded developer in the future let's see you in the next video Until Then happy learning I hope you have enjoyed listening to this video please be kind enough to like it and you can comment any of your doubts and queries and we will reply them at the earliest do look out for more videos in our playlist And subscribe to edureka channel to learn more happy learning

Channel: edureka!

Views: 32,617

Keywords: yt:cc=on, flutter, flutter tutorial for beginners, flutter tutorial, what is flutter, flutter app development, flutter course, flutter widgets, learn flutter, flutter app, flutter tutorials, google flutter, flutter introduction, Dart basics, what is flutter app development, what is flutter google, flutter basics, what is flutter and how to use it, what is flutter?, Flutter training, edureka Flutter certification training, edureka Flutter, edureka, Flutter tutorial 2023

Id: ss5_6e9emZY

Length: 86min 29sec (5189 seconds)

Published: Tue Mar 21 2023