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
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
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 write
widget.questions[_questionIndex]all the time.
_loading– an indicator if the user has pressed a button to show the answer.
ButtonStyleobjects in a list to change the visual representation of the answer buttons.
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!
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.