How I built a simple Quiz App using Flutter from scratch — Part 2
In the previous article(link in comments section), we got familiar with the design of our quiz app and discussed its layouts in depth.
This article will deal with the usage of OOP concepts to build our app efficiently. Also we’ll see how to navigate between the screens of our app.
For those who are new to OOP concepts —
OOP stands for Object-Oriented Programming. It means we consider elements of the app as objects and hence handle those objects to program efficiently.
Object-Oriented Programming comprises of 4 main pillars:
- Abstraction — To modularize and abstract(hide) each module functionality into a separate class. It avoids mixing of a module’s code with the main layout code and allows us to debug easily.
- Encapsulation — To isolate the properties(variables) and methods(functions) of a class and making them inaccessible from outside the class.
- Inheritance — After modularizing, we end up writing a lot of repetitive code. Rather, we can use the properties and methods of a class by inheriting from them, just like we inherit money and assets from our parents.
- Polymorphism — Though we inherit certain features from our parent class, we want to implement a few of them in our own way. So, we can implement a particular feature either in a native way (as our parent class does) or in a customized way.
Well, let’s get back to our topic where we’ve left. At the present moment, our quiz screen shows only one question instead of a list of questions.
We can achieve this by putting list of questions to a variable ‘questions’ of datatype list of strings.Then, use each question of the list to display on our screen as below:
But, mixing all these functional codes with layout widgets makes it confusing during development and isn’t an efficient coding practice.
(Abstraction principle demonstrated here)
So, we can have a separate class QuizBrain to store the entire database of questions and answers along with methods(functions) to access them.
Also, let’s create a new class Question with questions and answers as its properties(just as structures in C/C++). Now, we can maintain a single list of Q&A instead of two separate lists.
(Encapsulation principle demonstrated here)
Imagine the properties of your quiz such as questionNumber gets modified somehow — it makes your app work abnormal.
So, there’s a concept called encapsulation(OOP concept explained above), where we declare properties(variables) as private(by adding ‘_’ to start of property name). This makes properties unchanged while playing with widgets or other functionalities outside the concerned class.
Since, we declare properties private, but need to access them when needed (for example, to update questionNumber upon user selecting his choice) — so, we use methods to retrieve those properties.
One such method is nextQuestion(), which increments questionNumber and the screen rebuilds itself with a new question.
The methods which we may require for our quiz app are listed below:
Now, let’s discuss an interesting method called setState().
We have been talking about Stateful Widgets in the previous article.
They rebuild themselves upon some criteria right?
And, that criteria is nothing but the code written inside the setState() method. According to that code, setState() method calls the screen to rebuild itself.
Now where are we going to use it?
Yes, when the user clicks either true or false button, we’ll tell the setState() method, which is inside the onPressed property of our FlatButton, to retrieve the next question (isFinished(), nextQuestion() and getQuestion() methods will be used in sequence for this purpose).
This makes up our functionality of updating questions one after another on the quiz screen.
How does the score get tracked?
Any quiz validates the user’s response against the correct answer in the database and marks it as a correct or wrong response. And, it happens to every question i.e repeatedly used.
So, why don’t we create and use a method checkAnswer() for this purpose? We’ll retrieve the original answer from QuizBrain using the getAnswer() method and compare it with the user response(based on which button got pressed — true/false).
Next, we declared the scorecard as a list of correct or wrong responses in the previous article. So, after each question, the result can be added to this list as either check ✔️ or close ❌ icons.
And, finally when all questions are done, the count of correct responses will be displayed on the Alert pop-up. AlertScreen functionality is achieved by code similar to this:
Finally, last but not the least! Let’s discuss navigation between the screens.
I suggest you refer to the Navigation section of official cookbook docs, at least till you get a grip on this concept of moving through the screens.
I have applied the ‘Navigate with named routes’ concept from the docs above.
But, I would like to mention one small trouble I faced at this point!
By using code from rflutter_alert package, closing the pop-up brings me to the QuizScreen. But, what if I want to direct it to my HomeScreen?
Simple! If you have followed carefully till here, you would have noticed that we landed on the QuizScreen from the HomeScreen using Navigator.pushNamed(context,’/second’) statement (Here, ‘/second’ is the route to QuizScreen from HomeScreen).
So, manually add another Navigator.pop(context) statement after the Alert widget usage. This brings us to the HomeScreen.
From this, we can say, well understanding of the code taken from the internet helps us a lot in debugging.
Hurray! We’ve built a simple quiz app out of this article!
But wait! Are we completely done? There’s always a room for improvement!
- We have our screens with a much plain background till now! We could style our screens according to our tastes using Styling Widgets or even embed an image in the background like this:
I have used BoxDecoration and DecorationImage widgets for this purpose! Explore more yourself on how you could do this.
- We could apply a lot of transitions between the screens or even exciting Animations to our widgets.
- We could add success(ta-da!) or failure(Oh No!) audio tones upon completing the quiz, based on the user’s result.
And what not? We can try playing with the beautiful and awesome widgets Flutter provides!
Enjoy Flutter Coding! And all the best!
Thank you for reading my article till the end!
Feel free to go through the entire code of my app here.
PS: This quiz app is inspired from the Quizzler app of ‘Introduction to Flutter Development using Dart course’. I am glad to build a customized version of their app.
