Flutter Quiz App Tutorial - Trivia

[Music] thank you so let's start building our quiz app the first step we Define a model for our question so each question is defined in a class and it has three properties the first property is going to be the question itself let's start with string the second property is list of the options so as you see each question has four options so we Define a list of options each each which is the string and lastly we have a correct answer index so this is going to be the index of the correct answer we also need to provide the Constructor for our class and set all the properties as required at the next step let's define our questions so I have already done that I have prepared nine questions beforehand you can write your own questions or if you want to copy this I will put a link in the description to the GitHub repository for this project so let's define our UI for the crazy screen at the first step let's get the question and this is first question out of our questions array at the next step we Define a padding with a column inside we have a planning of 24 from all the sides and inside which we have a column so the first child is a text that is providing our questions here this is save now and we see our question appears as the second property we provide a listview.builder we use a list view because we have four options so inside the list view we have our item Builder and we have an item Cam that is question.options.lent we also have a shin grab we have to send it to true because we are using a list view dot Builder inside a column widget so this is gonna cause UI problems so lastly let's return a gesture detector to make our options clickable and inside our gesture detector we have an answer card that is right now mostly hard-coded so if you now hit save we see that we have all our options here so in this step I'm gonna teach you how to create a question card it is going to be pretty complex so I have written you an algorithm this card has three different states first of all if no option is chosen we have no styling and all the buttons are enabled but if you choose an option we again have two different states if you have picked the correct option only and only the correct option is going to be marked as green and all other options are marked by default but if you have picked the wrong answer our answer is going to be Mark as red and the correct option is going to be marked as green so let's define them as you see we have a class called answer card inside we have five different properties we get the question we get if the option is selected we get the index of correct answer we get the index of selected answer and we get the current index so let's go to the UI here we have a padding and our panning is vertical pin threaten them you see there's nothing in the UI but let's go one more step we Define two properties the first one is is correct answer so here we check if the answer doesn't have picked is correct one and we can do that by saying if current index is equal to the current correct answer index and what if we have picked the wrong answer and we can determine that by saying if it is not the correct answer and this item is selected so now let's define a container with a height of 70 this is the height of our options we also give you the padding of 16 from all the sides and let's give it a decoration by default the colors it to White and we have a border radius of 10 so now if we hit save you see we have our items but this gives some more properties let's give it a border and inside the Border we say if it is the correct answer give it the border of green and if it is the wrong answer give it the border of red other ones give you the border of color white 24 so now let's hit save and lastly let's define what is inside these borders so I Define the rule and third week we have an expanded widget inside this we have a text with the front side of 16. so now let's hit save and see this is the basic UI for our answer card so let's finalize our design right now we are only showing the design for when the user has picked an option but what if the user has not yet chosen an option so none of the items should be highlighted for that purpose we're going to use a check mark here we say if the selected answer index is not equal to the null show this highlighted design but if it is null show this container that has no design so let's hit save now but nothing will be changed because we have already picked an option we also can add a button here to show if the item is correct or incorrect so for that purpose after our expanded widget we issue a size box and also an icon so if it is a correct answer we build an icon for the correct option if it is wrong we build the wrong I can so now let's build these buttons each of them is going to be a widget function returning a circle Avatar with the radius and a background color for the correct option we have color green and for the wrong option we have a color plate so now let's say save and you see that our UI is complete so right now if I click on any of these options you see that nothing happens because we have not yet defined the logic so let's define the logic here and the first step I defined the selected answer Index this is going to hold the index of the chosen option we also have a question index that is holding the index of the current question and then a score so let's define our pick answer method inside twitch we first of all put our value inside the selected Index this value is the value of the item that we have chosen so we put it inside our selected index so it is no longer null and then we pick our question and then check if the answer that we have picked is the same as the correct answer if it is true we add one to the score and set State we also need to get the question inside the build method and also we Define a Boolean flag that is checking if it is the last question or not inside our gesture detector we check if our selected answer index is equal to the null this determines Vita we have already chosen an option or not if it is equal to the null it means we have not yet picked any option we put our Peak answer method and pass the index and if it is not equal to the null we pass the null and all that it means is that if we have already picked an option we put not inside our on top to disable the button so let's hit save and now you see that I can pick any of these options and if I pick the wrong option it is also going to show me the correct option so let's define a method that helps us to go to the next question this is called go to next question inside which first of all we check if we are on the last question and if we are not we add one to the index and set the selected answer to the node and as the last system we put the set set so below the listview.builder you're checking if you are on the last question and if we are I'm gonna Define a finish button inside the on press I have a method that navigates to the result screen but if you're not on the last question I'm gonna create the next button here we first of all check if the selected answer index is not null so if we have already choose an answer we can go to the next question but otherwise this button is gonna be known so let's hit save now and if we do that right now you see that we can pick an answer and also go to the next question so as the last step we're going to build the result screen this is going to be an easy one and first of all we Define a column here inside which we have a size box and a text if we now hit save you see this is the vertex under that we have a stack we use a stack to put two edges on top of each other and the first video that's gonna be a circular progress indicator this is going to show the percentage of our score if we now hit save you see this is our percentage the value is going to be a score divided by the number of questions in this case is nine below that we have a column with two texts the first text is going to be our score that is exactly one and the second text is gonna display the percentage of our score so that was pretty much everything about this project see you in another one [Music] [Music] [Applause] [Music]

Channel: Code HQ

Views: 7,090

Keywords: Complete quiz app in flutter, Create a quiz app in flutter, Flutter quiz app, Flutter quiz app tutorial, Flutter trivia app, Flutter trivia tutorial, Flutter tutorial for beginners, Multiple choice quiz app flutter, Quiz app example in flutter, Quiz app tutorial, Quiz app ui, Trivia app tutorial in flutter, flutter app, flutter quiz app, flutter trivia app, how to build a quiz app in flutter

Id: oZ31EDs2PY0

Length: 10min 23sec (623 seconds)

Published: Tue Jun 06 2023