Introduction
Challenging your users with questions is common. So here is how to make a simple quiz page widget for Flutter apps.
There are tons of quiz apps out there in the app stores. If you ever thought about making your own, then here is a tutorial on how to make a simple quiz page widget for Flutter apps.
Eventually, it will look like this:
A simple quiz widget for Flutter apps
Models
Let’s start with the data models first. We don’t need really much to get started. A Question object contains the text and four 4 answers and an Answer object contains also text as well as an indicator if it is the correct answer.
To collect results and track progress, I also created a QuizState class.
User interface
Now, we have to build a UI for the user. Here is my proposal. Feel free to adapt it as you need it.
Let me guide you through the code. It should be fairly easy to understand for the most part.
We start with the state variables:
_questionIndex– to know what the current question is. The questions are held in a list and this variable points to the current position.currentQuestion– a shortcut so that I don’t need to writewidget.questions[_questionIndex]all the time._loading– an indicator if the user has pressed a button to show the answer._buttonStyles– FourButtonStyleobjects in a list to change the visual representation of the answer buttons.
The build method contains the usual stuff with a little twist at the beginning. When the quiz is finished, a summary is displayed instead of another question.
But what happens when the user clicks on an answer?
Look at the _handleAnswer method. First, we set the _loading variable to true. Then we check if the answer is correct or not and apply the corresponding button style to the button that the user clicked. A call to setState rebuilds the user interface.
If you are unfamiliar with setState, have a look at the article below
After rebuilding the UI, the question is added to the QuizState object. Then, the loading variable and the button style are reset, and the index is increased. With the next call to setState, the next question (or the summary) is displayed. You can change the time between questions by increasing or decreasing the duration of the Future.
That’s all the magic!
Conclusion
In this article, you learned how to create a simple quiz widget for Flutter apps. With this template, you can customize the code to fit your requirements.
