Flutter - Full Quiz App Tutorial (For Beginners + with Different Functionalities)

So, if you've ever wanted to know how to create a fully working Quiz app on Flutter, this is the video for you.
I tried to make it as short as possible, but in order to explain it well, it had to be this long.
Hope this can help someone out there!
Project Repo (GitHub): github.com/FlutterMentor/flut...
P.S. My apologies for the mic sounds
00:00 - Intro
01:33 - Removing Unnecessary Code
01:50 - Creating The home.dart File
02:16 - Showing The Questions
03:07 - Laying Out The UI Related Code
05:47 - Score Tracking Icons
07:23 - Creating Starting Variables
08:03 - Adding The Questions To UI
08:56 - Adding Answers With Functionality
15:14 - Turning Static Strings To Dynamic
16:27 - The Answer Tap Logic
20:09 - ElevatedButton onPressed Logic
23:14 - Testing Bugs
23:47 - Fixing Answer Score Bug
25:10 - Fixing Skip Question Bug
26:41 - Adding Bottom Answer Message
29:00 - Adding The Final Score Message
30:38 - Checking That Everything Works
30:55 - Like & Subscribe
31:21 - Flutter Mentor Out
#flutter #quiz #app
Credits:
OUTRO SONG:
Mitsubachi by Smith The Mister smiththemister.bandcamp.com
Smith The Mister bit.ly/Smith-The-Mister-YT
Free Download / Stream: bit.ly/mitsubachi
Music promoted by Audio Library • Mitsubachi - Smith The...

[@joffreveloz2410]

For those who get every error, it is because this project has disabled Null Safety. kzbin.info/www/bejne/rWe6oqR8fLWSec0

[@FlutterMentor]

Thank you so much for this!

[@sudipraaz]

This was a really really great tutorial and provided awesome guide for me. Thanks a lot brother. Keep up the good work.

[@abdallahelshayeb146]

this was a really helpful tutorial. thanks a lot.

[@vladarskopin3314]

Thank you so much for this tutorial! I used VoidCallback in the Answer widget instead of Function, and then it worked

[@azuigbokingsley4295]

bro thanks for this comment, u ve really saved me

[@da_7402]

Great work. Waiting for more

[@FlutterMentor]

Thank you, thanks for watching!

[@surajmadhushan584]

Superb Tutorial ,THANK YOU SO MUH :)

[@phoolprakash713]

bro ek help chahiye

[@archmag]

Thanks for the video!

[@kamalkkvelly1170]

Great help Thanks

[@tayelolu_bells8241]

Thank you 🙏🏿

[@Meirovsky]

This video was very helpful! Thank you. If I want to add a question that has two or more correct answer, do you have any example on how to implement it?

[@speedtnt7591]

Change List TO List This will solve null error

[@crltsmrtnz]

the solutions for the problem: type 'Null' is not a subtype of type 'List' in type cast IS: the final _questions = const [] need be a son of class _HomeState extends State {} If the positions is in the final of the editor is conver in a partner an dont work

[@iGauravVaishnav]

Thanks for the tutorial, How can I update answer option in gridview of 2*2. I want 4 options in 2 rows * 2 columns.

[@Mig29kub]

Thanks for the tutorial! Do you have any idea how to display text and image from .jpg file in "Bottom Answer Message" which is connected to the specific question. That will allow to explain question using image and text just after hitting answer.

[@FlutterMentor]

Thanks for watching! What is the specific difficulty you're running into? If you have many images, you can use the index to change the string name of the image or something like that (if that's what you're asking)

[@crltsmrtnz]

the solutions for the problem: type 'Null' is not a subtype of type 'List' in type cast IS: the final _questions = const [] need be a son of class _HomeState extends State {} If the positions is in the final of the editor is conver in a partner an dont work

[@emrecam1778]

thank u :D

[@FlutterMentor]

You're welcome!

[@gururaser]

Merhaba, "_questions[_questionIndex]['questions']," kısmını yazdığımda 'Object?' can't be assigned to the parameter type 'String'. sorunuyla karşılaşıyorum sen de karşılaştın mı ? Ne yapmalıyım ?

[@arturoromero21]

@@gururaser You have to add .toString()

[@amrithak9875]

The code is working fine, but on the screen i get something which says "bottom overflowed by 30 pixels". The bottom part is covered with strips and is not visible. Could u pls help?

[@FlutterMentor]

Maybe if you apply a SingleChildScrollView to the first child of the Scaffold it will fix it

[@BadhiyaBanda]

hey sir first of all thank you so much I just love your tutorial sir:) and now to the point sir I got error when I declared that method (void _questionAnswered) in vs code it's not showing any red line but when my app was build and it's installing in my physical device than vs code gave me this below error ....sir can you please help me || - [ FlutterError (setState() or markNeedsBuild() called during build. This Home widget cannot be marked as needing to build because the framework is already in the process of building widgets. A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building. This exception is allowed because the framework builds parent widgets before children, which means a dirty descendant will always be built. Otherwise, the framework might not visit this widget during this build phase. The widget on which setState() or markNeedsBuild() was called was: Home The widget which was currently being built when the offending call was made was: Answer) E/flutter ( 4141): #796 _rootRun (dart:async ]

[@egbuchulamalexanderginika3423]

Thanks so much for the tutorial, but am having difficulty in converting the score tracker from showing icons to showing the exact option the user clicked . Such if am to make a score page , I can be able to print the exact options the user clicked for the user to take correction of quiz after the quiz and not during the quiz.

[@FlutterMentor]

Did you try collecting the user answers in a new list?

[@egbuchulamalexanderginika3423]

@@FlutterMentor I tried using the answerselected bool to form a list just like you did in score tracker .. and I was getting true as a response and not the exact answer that was selected.

[@FlutterMentor]

@@egbuchulamalexanderginika3423 Okay, got it. So I think you should watch this video on how to get the index: kzbin.info/www/bejne/fn2wq5yYiZeKo9U and then you can use the index to get the answertext corresponding to the answer

[@egbuchulamalexanderginika3423]

@@FlutterMentor thanks

[@keerthanachandrasekar8531]

How can I connect this quiz app with firebase?

[@gururaser]

Hey firstly thanks for video ) I really liked it and it helped me so much I have one problem can you help me ? While I am trying to write this code "_questions[_questionIndex]['questions']," I get this error message "The argument type 'Object?' can't be assigned to the parameter type 'String'. how can I solve it ?

[@FlutterMentor]

Hey, are you sure you did everything exactly like in the video? Try downloading my project from github and then compare the code. Let me know if you're still stuck after that

[@gururaser]

@@FlutterMentor Hey, I downloaded your project but I couldn't run it because of "dart sdk couldn't found ? " I didn't understand why ? then I decided to copy paste your codes and named everything like how you did and I took 9 total errors and still this error ( which I wrote in comment ) is continuing

[@FlutterMentor]

@@gururaser it must be something to do with different dart/flutter versions. Could you try just creating a new project and then only replacing the lib folder with the lib folder from my project? If it still doesn't work, upload your project and I'll check it out

[@gururaser]

@@FlutterMentor I did what you said( I also solved some problems like adding "required" to some places), I don't have github account where would you like I upload it ? Does it matter for you ?

[@WeirdDev69]

Easy , just add .toString infront of _questions[_questionIndex]['questions'] Like this - questions[_questionIndex]['questions'].toString()

[@rintarouokabe7237]

I am having a problem. currently I do not encounter any errors on code however answer buttons is not working, whenever I click the choices nothing's happening how to fix it?

[@faisalfotoh1909]

Spread operator & Cascade Operator What is the function of each? And when do we use each? also witch using with Map witch uing with list?

[@FlutterMentor]

Hey there! Spread operators are for spreading list elements and for Cascade operators, I advise you to read this: www.learndartprogramming.com/fundamentals/cascade-operator-in-dart/

[@faisalfotoh1909]

@@FlutterMentor thank you very much

[@AninArafath]

☺

[@ybjackycola]

hey, i know this video is old, but does someone know how to get the questions on random?

[@burner0213]

how can one add a different tipe of quiz(for example: one where the user answers typing the answer) inside this

[@FlutterMentor]

That's a very different quiz, you'd need to do it differently. I advise to try to create your own version, that's the best way to learn programming!

[@amirularif466]

Hello. how to add image in this coding?

[@user-qr9pe5hw7d]

thank you very much but now how to random questions and shuffle answer cards?????

[@FlutterMentor]

Well, to generate random numbers, please watch this video: kzbin.info/www/bejne/noWuc3mrrJKrr9E (then just apply that logic to the variable controlling the number of the question). Now for shuffling the answers, you'd have to do it differently. Have you tried finding a package for it? It very likely exists!

[@fagaabdulrahman7711]

hey sorry came accross this error "The argument type 'MaterialColor?' can't be assigned to the parameter type 'Color'."

[@FlutterMentor]

Hey, I'm sorry but I'm not able to help you with just that information. Download my project from Github and try to copy my code to your project. If it works, you made a mistake somewhere and need to find it, if it doesn't work, then maybe there was some update. But it should work!

[@3kdevelopers185]

Sir, Please make a Video on How to localize (pdf text change to user selected language text) Pdf document in flutter??? ❤️ From Pakistan

[@FlutterMentor]

What do you mean exactly?

[@pratyushagrawal7479]

Hey i am continously getting error at 12:38 saying that ' type 'null' is not a subtype of type 'string' in type cast ' Please can anyone help me solve this error.

[@crltsmrtnz]

i have same problem

[@crltsmrtnz]

the solutions for the problem: type 'Null' is not a subtype of type 'List' in type cast IS: the final _questions = const [] need be a son of class _HomeState extends State {} If the positions is in the final of the editor is conver in a partner an dont work

[@ibaadahmed5925]

HEY, GETTING ERROR LIKE OBJECT CANT BE ASSIGNED TO THE PARAMETER TYPE HELP

[@noorazhana6628]

answerColor: answerWasSelected ? answer['score'] ?? false ? Colors.green[700] : Colors.red[700] : null, i've got problem here where the description state that "The argument type 'Color?' can't be assigned to the parameter type 'Color'." how to solve this problem?

[@BadhiyaBanda]

hey noor thanks for this color code .... i wanna your help .... i am getting below error while I am declaring void _questionAnswered method so can you please help me [ FlutterError (setState() or markNeedsBuild() called during build. This Home widget cannot be marked as needing to build because the framework is already in the process of building widgets. A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building. This exception is allowed because the framework builds parent widgets before children, which means a dirty descendant will always be built. Otherwise, the framework might not visit this widget during this build phase. The widget on which setState() or markNeedsBuild() was called was: Home The widget which was currently being built when the offending call was made was: Answer) E/flutter ( 4141): #796 _rootRun (dart:async ]; thanks :)

[@hanifireffas4404]

@@BadhiyaBanda change this ) by this )

[@kayo_vinicius]

Conseguiu resolver?

[@ruwanattanayake2715]

i really don't know how to handle the error induced by NULL safety

[@jackrosso1456]

The first one is Colors.green : Colors.red : null, you should remove null and add for ex Colors.white. 2n: Add required in front of this like this: required this.answerText, required this.answerColor, required void Function()? this.answerTap. I hope these are all you need

[@actionscript3661]

please add levels

[@tncosmo4382]

Bruh you copypaste code like 100 times. This video was just you copypasting code explaining nothing of it and than saying: "yeah i don't wanna design this so imma just copy-paste 50 lines of code" then going on.