🚀🔥 Master Flutter & Firebase: Build an Epic Quiz App + Admin Panel (Step-by-Step Tutorial)

hello guys it is Shivam here Welcome to our new video of awesome flutter Firebase quiz app where we are developing the complete app from scratch with admin panel this video will cover setting up Firebase as our backand designing stunning user interface quiz categories quiz creation and many more do not forget to hit that like And subscribe button so that you won't miss out on any of the amazing content we upload on this channel let's get started but before moving to the code let me show you what all things we will learn on today's video and how your app will look alike at the end of this video so here you can see the homepage of our quiz app where I have shown the username with the user image and just below of it you can see the image of play and win with a text play quiz by guessing the image so we gave a small hint about the app where the user have to play the quiz by guessing the image and here after the container you can see the Top Quiz categories where I have shown all the categories related to our quiz app so here you can see the place animals fruits objects ports and random so let me give you a small hint about the quiz app how it will really work so in our quiz app there will be a image at the top with the four options at the bottom of the image at the user has to guess the correct answer for that respective image that have been shown on the screen by clicking in any of the options below the image now when I'll click to the place category here then it will redirect me to a place quiz page and here you can see the image at the top with a four options now I have to guess a correct answer for this image so here you can see the AIL Tower so I will click to the aill tower option here and you can see that after clicking the correct answer it changes the container color to green and other two red indicating that the answer that I have just clicked is a right one and the other is wrong after guessing the image you can see the forward Arrow so so by clicking to the forward Arrow we can directly move to the next Quiz of our place category so by forward Arrow we can play as many quiz we want for the specific category so when I click to the forward Arrow then we'll directly move to the second quiz and here you can see the image and the four options so here you can see the heels so I'll click to the correct answer heels here and again it shows the correct answer by marking it with a green color so you can see that how brilliantly our quiz app is working and we can play as many quiz we want for that specific category now in the beginning I have told you that there will be also admin panel in the app so here you can see the admin login page the reason for creating the admin login page is because I want to make the admin page highly secure so that the admin can have their own username and the password which makes the admin panel highly secure so that any random user can't enter in the admin panel so in the username I have kept the username Shivam here and the password 1 2 3 4 5 6 so you need to use exact this username and the password to login in the admin panel now when I click to the login button then it will directly take me to the add quiz page from where I can add as many quiz I want for that add respective category so here you can see the upload picture so now I'll click to the camera icon here and it will directly opens my phone gallery from where I can pick the image now here you can see the image now in the option one I will write the option that I want to show in the option one option two option three and option four so I will write some random option here so second one is lion third one is tree and fourth one is water now I need to write a correct answer here so that I can show the user the correct answer after he press any of the options in the quiz app so in the correct answer I will write leave and you can see that in the select category we can add the quiz for any respective category by selecting any of the options from our drop- down button now I'll click a random here now I'll click to the add button so as you can see the quiz has been added successfully now let's move to the homepage and let's check in the random category if the quiz has been uploaded to our quiz app or not so after clicking to the random category you can see the quiz that we have just uploaded from our admin panel so here you can see the image and the four option leave lion tree and water now I'll click to the correct answer leave here where we have wrote leave text in the correct answer text field so by this way through the admin panel we can upload as much quiz we want for that respective category and user can enjoy the quiz app by guessing the different images and the different categories but I have a small request from you please do not skip any process or part from this video because because each and every process or part is necessary to make this quiz app from the scratch so if you miss any of the part or process from this video then you might not get the result that I have just shown you now I will also show you how to connect the Firebase for both Android and iOS and I will tell you each and every step that I'm writing in the vs code so now let's get started now let's move to the Le folder and I will create a new folder name pages here and inside the pages folder I will create a new file name home do do and inside the home do do file I will create a stateful wiet name home here now scaffold body container child column children so as you can see when I writing widgets in the home do do file there blue lines come at the bottom of each widget which doesn't look good when you write on the vs code so to remove the blue lines from this widgets I will go to the analysis options. EML file and in the rules I will add a two line here which will help us to remove the blue lines from each widget now I will just write prefer const Constructor and will make it to false now we'll write one more line prefer const literals to create immutables and we'll also assign it to false now we'll save the code that we have just stored in the analysis options. EML file and let's move to the home. file again and here you can see the blue lines has been almost disappear from the widgets now it look good now I will write a container child row children and inside the row vet I will first show the image of the user and then the name of that specific user but before that we'll write decoration box decoration and in the color I will pass the customized color code for the container many of the old viewers might know that why I have used a ZX FF at the starting of the color code I have wrote here but and if you are new viewer and and you are watching my first video from this channel then I want to say that if you directly write a color code inside the color function then it will not assign the color code that you have just mentioned so make sure it should be start with a 0x FF here now I will copy the same image that I have saved in the images folder which will be the random pick of the user now to assign the image from the images folder that you have just saved then you need to go to the perspect EML file and you need to go to the asset and assign the images folder where you have saved all the image and you want to use in the app now we'll use image. asset images and we'll write a exact image file name which will be boy. jpg and will give the fixed height and WID to the image and we'll fit box fit. cover so that it can cover the complete height and width of the image that we have just assigned here now let's move to the main do do file and here you can see the debug Banner here so to remove the debug Banner from here we need to go to the main do do file and we'll write debug so check Banner to false and as you can see the debug Banner has been removed now let's move and call the home page here so here you can see the container that I have just wrote now we'll give the padding from the above so I will write padding as inser dot only from left top 50.0 and from the right now I'll give the specific height to The Container so we'll write 300 so 300 is too much now let's change it to 250 or 220 okay now it's look good now in the row I want to move the image and the name of the user at the top so I will write cross cross axis alignment do start here now I want to give the Border radius to the image so I will use a clip react wiet and we'll pass a border radius border radius do circular and we'll give the border radius 60 here so it is done now I'll need to pass the username just beside his image so I will write a text widget here and inside the text widget I will write a username though I'm writing shivang Gupta here and we'll give the style to the text wiet by using a text style here and in the color I'll pass a colors. white and font size 20.0 and font weight font weight do B so here you can see the usern name now I need to move the image to the center so I will again give the padding to the text widget here so we'll wrap up the text widget with a padding here and we'll give the padding from the top position now we'll give the width between the image and the name so I will use a size box here so it is done now I want to provide the Border radius from the bottom left and bottom right position of the container so I will write border radius border radius dot only and will write bottom left and we'll write radius do Circle circular 30 and we'll pass same for the bottom right so here you can see the circular radius from the bottom left and bottom right position so 30 is too much so we'll make it to 20 okay so it is done now I want to overlap a container over the container so I will use a stack widget here basically stack widget help us to overlap a two widgets one upon the another so I will wrap up the container widget with a stack widget here now I'll pass one more container in the stack vdet so I will write container now child and in the row we'll pass a children so in the row I will pass this image that I have just saved in the images folder and we'll use image. asset function again to get the image from the images folder so here you can see the image that I've just shown by image. asset function now I want to give the margin from the top position so I will write Edge insert. only top 120 and also from the left now decoration box decoration and in the Box decoration will first pass the color of the container so it will be black now we'll give the with media query do of context. size. width the reason for using the media query inside the width is because media query help us to make the app highly responsive so if you use a media query inside the container and giving the withd in the form of media query then it will suggest the container to use a complete width of the screen according to the device size though each device has their own height and width then it can help us to make the app highly responsive now we'll give the Border radius to The Container first so I will write border radius border radius do circular 20 now I will wrap up the image again with a clip react which to give a border radius to the image here and we'll write border radius do circular sorry border radius do only because I want to provide the radius from the top left position so I will write radius do circular 20 and from bottom left position so radius dot circular again 20 so now it's look good now I will use a text widget again because I want to show a text play and win here so I'll copy the same text wiet and we paste it here and we'll pass the text play and win and we'll also increase the font size to 26 to 35 or 30 now we'll give the size box because I want to give the width between the image and the text wiet so I will I will pass a with 30.0 now I'll wrap up the text wiet with a column wiet here because just below of play and win text I want to pass one more text suggesting that play quiz by guessing the image we'll also pass a customized color code again so we need to decrease the font size so we'll write 15.0 now I want to move all the text to the left position so I will write cross cross axis alignment do start the reason for writing sln in the text widget is because I want to change the line of the specific text so I will use a SL and command to suggest the text to change the line and show the text from the another line so whenever you want to change a line then you can use a/n in the text widget so I will write a text widget here and inside the text widget I will write Top Quiz categories where I will show all the categories like sports animals fruits object Etc that I I have just shown you in the starting of the video so let me add all the images for the specific category and then I will use the container to show all the specific image with their name but before that let me provide the padding from the left position so that there will be a clear space between the text wiet so I will write Ed insert. only left 20.0 so as you can see I have saved all the images for the specific category now I will first pass a background color to a scaffold widget so I can give the complete background color to my app screen and we pass a customized color code here so it is done now we'll write row children and inside the children we'll write image. asset and and we'll get the image from the images folder so I will write images and will paste the exact image file name so I will write place. PNG and we give the specific height and width to the image and we'll use fit box fit. cover so that image can cover the complete height and width of the image now we'll wrap up with a container and we'll write decoration box decoration and we'll pass a color colors. white and padding Edge insert. all 10 we'll use a text widget inside the column widget and we name the text place here and we'll pass the font size 22.0 and font WID do w500 and we'll give the height between the image and the text widget so I'm writing size box height 20.0 now I'll wrap up a row vet with a padding wiet Ed insert dot only left 20.0 right 20.0 and we'll give the width 150 to The Container here one more thing I want to say you that I am giving the specific height and width of the container according to my choice so if you have any better idea or want to give a specific width and height to The Container here then you can go in your way too because it will also help us to customize the code easily and make more changes in your app and can make it more attractive also one more thing please do not copy the complete code from the source code and paste it here because each and everything is necessary to here I am explaining why I have used all this widgets in the code here so if you understand each and everything about the widgets then it will also help you to customize the code easily so now let's move we'll give the size box height 20.0 because I want to provide the height from the top now we'll give the Border radius to The Container so I'll write border radius do circular 20 now we'll wrap up a container with a material wiet here and we'll first give the border to the material with it then will give the elevation 5.0 so here you can see that we have just created our our first category which is place now I'll create some more categories like animals Sports objects Etc now I want to give some even space between the two container here so in the row I will write main main access. alignment. space evenly now we'll copy the same container now I will change the images name to dog.png and we'll also change the text name to animals here so let me add all the categories one by one now as you can see that there is a bottom overflow error because we didn't wrap up a container with a single child scroll view so that we can scroll the our home screen easily so now let's move to the container and we'll wrap up with a single child scroll view which it now as you can see that we can easily scroll our home screen here so image. asset and we'll write sports. PNG and we'll also pass the text name Sports and save for the random now as you can see that we can't see any space from the bottom so that it can help us to see all the categories easily so I will go to The Container again and will write margin Ed insert do only and will provide the space from the bottom so I will write Bottom 30.0 now you can see that we can see all the categories Clearly Now user can select select any of the categories and can play the quiz according to his choice so I have created the complete UI for our homepage and as I have explained you before the basic idea of our quiz app is that whenever the user will click on the animals category then it will show them all the quiz related to the animals first they will show the image of the specific animal with a for name of the specific animals and user have to select the specific image of that animal that they can see on the screen so like this they can get to know more about the animals and can learn many more things from this quiz app so in the pages folder I'll first create a new file name question dot dot where we'll show the specific question of our quiz and we'll create a stateful name question here so now scaffold body container child column children now first I will give the background color to the complete question screen so we'll first pass the customize color code to the background color now we'll write row children and we'll first pass the icon icons. Arrow back iOS because I want that whenever the user will move to the questions file of that specific category then they can click on this icon and can directly move to the homepage again so we'll give the color colors. white which will be the icon color here now we'll wrap up with a container and in the decoration boss decoration we'll first pass the customized color code to the icon here so I will again use a ZX FF here now let's move to the main do do file and I'll first call a question file so here you can see the screen now I will give the margin from the top now we'll wrap up a icon with a center widget here and we'll give the padding to The Container so I will write Ed insert do all 6 now I will give the Border radius to The Container so I write border radius do circular 60 now I want to show a text here because I want to suggest the user that for part specific category they are playing a quiz here so I will use a text pidget and we write a sports style text style and we'll first pass the color colors. white font size 18.0 and font WID dot Bolder so let me increase the size of the text here so I will assign assign it to 22 now we'll give the width between the icon and the text so I will write size box. width 120.0 so let make it to 100 so now it's look good and also increase the size of the text now we'll write container decoration box decoration colors colors do white here though I can't give the complete margin to The Container here so I will remove the margin from here and we specifically wrap up the row wiet with a padding wiet and we'll pass a specific padding from the top and left position now now inside the container I will write child column children and in the children and in the container I will use a withd again media query to use a complete width of the screen so I will write media query do off context. size. width and in the decoration I will write border radius and as I want to provide the Border radius from the top left position so radius do circular 30 and from the top right position which will be the radius do circular 32 so image do asset and we'll use the images from the images folder again and I will write a Ronaldo do jpg I want to show the Ronaldo image here and let the user guess the image with the option that we will just provide below the image so I'll give the height 300 and we'll give the withd media query. off context. size. width and fit box fit. cover now will also give the height to The Container so I will write media query do of context do size do height but as you can see that if you write a media query inside the container then it will show the Overflow error because we have already covered the some part of the screen from the top so if you again use a divide 1.2 then also you can't get the specific height of the screen so it may not be highly responsive when you will test the app on the different devices so to make it highly responsive I will wrap up a container with a expanded widget here so as you can see after wrapping up a container with a expanded witchet then it covers the complete height of the screen because expanded visits suggest the container to complete use the height of the container and make it highly responsive so that we can test it on the multiple devices now we'll wrap up a image with a padding wiet and we'll give the padding from the left right and top 40.0 now let me provide the space from the top so I will again use a size box widget here now we'll wrap up the image widget with a clip react vet now I'll write border radius border radius. circular 20 now I'll write container with media query dot off context. size. width and we'll write decoration box decoration and we'll pass a border border.all and we'll pass a customized color code to the Border here now child text and we'll pass a text wiget here and we will write a one by one footballer name so I will first write Cristiano Ronaldo and we'll give the Style by using the text style widget here and we'll write colors. black and font size 18.0 and font weight do W5 00 so we have pasted the container outside the column so we'll cut it from here and we'll paste it inside the column wiet now we'll give the Border radius to The Container so we'll write 20 and we'll give the padding as insert do all 10 so now I'll customize the container according to my way so if you have any better idea to customize the container then you can also customize the code easily now we'll write a withd 1.5 so that I can give the width to the Border here so it is done now I'll copy the same container and I will write some other footballer name so that user can guess the correct footballer name of the image that we have just shown above so let me give the height between the image and the text wit it now I'll change the footballer name to Leonel Messi so I've added two more footballer name here so when the user will click on the correct footballer name then will make the container to Green so that user can guess that they have selected the correct name of the image that have just shown here and directly they will move to the next screen of the sports category and can play the quiz together let's move to the Firebase and we need to add our quiz app with a Firebase so we need to write the app name here so I'm writing quiz app now click on continue again on continue now use default account for Firebase click on create project so as you can see Firebase is creating our project so wait for a few seconds now click on continue and we'll directly move to the Firebase so here you can see that we can connect the iOS Android and web app through Firebase so first I will connect the IOS app here then we will move to the Android app now we need a apple bundle ID so now let's move to the X code and we'll cop the bundle ID from there and we'll paste it here now let's move to the runner signing and capabilities now copy the bundle identifier from here and paste it inside the Apple bundle ID now click on register app now download the Google service Das info. P list file from here and we need to paste it inside the xcode and make sure it should be Google service- info.plist file if anything is written rather than this then make sure you edit them now paste it below the info now click on finish so it is done now let's move to the Firebase again click on next again on next next continue to the console so as you can see that we have successfully added the IOS app here now let's move to the Android app so we need an Android package name so we go to the Android App build. G file and here we'll copy the application ID and we'll paste it inside the Android package name now click on register app now download the Google Das service. Json file and we need to paste it in the Android app folder and it should be also in Google Das service. Json file so it is done now let's move to the Firebase again click on next now we need to copy this plugin and we'll go to the Android build. gal file and we need to paste it in the class path so we'll paste it here and we'll change some line of the code I will strongly suggest you that please do not skip any of the process while setting up the fire base because if you miss any of the process or step from this video then you might not connect the Firebase with your Android or iOS app so it is done now let's move to the Firebase again and we'll copy the ID from here and we'll go to the Android build. GLE file and we'll paste in apply plug-in and we'll again change sum of the line of the code now copy the dependencies from here and we'll paste inside the dependencies so we'll paste a two lines that we copy from the Firebase now click on next continue to the console so as you can see we have successfully added the IOS app and Android app with a Firebase now let's move to the puv dev because from the Pu Dev we need to copy the some flutter packages and we need to paste it inside the ppec ml file so our first package name is Firebase score so go to the installing copy the dependency from here and let's move to the ppec ml file and we'll paste it below the dependencies now let's move to the PO Dev again and we need to add our second package name cloudfire store so go to the installing again and we'll copy the dependencies and we'll paste it in the ppec ml file now let's run the packages that I just pasted inside the ppec ml file basically Cloud file store package help us to connect with a fir store database and we can successfully update or write or read the data from the fir store database now let's move to the main. do file and we need to enable the fire base from our flutter app so we'll write a two lines here in the void main function so we'll write widgets flutter binding do insure initialized now await Firebase do initialize app so it is done and we have successfully connected the Firebase with our flutter app now let's move and we'll create a new folder name admin here and inside the admin folder I will create a new file name admin login do do now we'll create a stateful widget name admin login now scaffold and we'll pass a background color to the scaffold so we'll write color 0x FF and we'll pass a customized color code now body container child stack children container so in the starting of the video I have shown you that there is a cured container at the bottom in the admin panel so we'll create that Cur container by using the stack widget and a container widget here so stack widget is because there is a two container which overlap one over the another so whenever you want to Stack Up the widgets or overlap the widgets one over the another always use a stack wiet here now we'll pass a margin padding and height to The Container now with media query do off context. size do width decoration box decoration now gradient linear gradient colors and we'll pass a two color in our linear gradient now if you are a new viewer in this channel then you might not get why I have used a linear gradient color here and what really does linear gradient color do as if you are following my channel then you know that what really linear gradient color does here because I have used many times in our previous apps so I want to repeat it again what really does linear credent color do so so if you want to mix one or more color together in the container then you can use a gradient linear gradient color here so linear gradient color can also suggest from where you want to start the first color and end the last color which help us to mix a two or more color together and give a perfect color to The Container so first I will pass a customized color code now color colors do black so these are the two colors that I have been passed on the linear gradient now begin alignment do top left which suggest that the first color will be start from the top left position and will end at the bottom right position now border radius border radius do vertical top radius do eliptical now if you want to provide the Border radius from the X and Y AIS of the container then you can use a radius. elliptical here now media query. off context do size. width now in the y- AIS I will write 110 but you might be thinking that what all things I have wrote inside the container now let's check by calling a admin login. do file here so let's move to the main do Dot and here I will write admin login and we restarted again so here you can see the cup container that I have just made by using a stack widget so here you can see the two color have been mixed you can see at the top left position there is a lighter black color and at the bottom right position you can see that there is a dark black color so we have mixed two colors by using a linear gradient color here now we'll write container margin Edge insert do only left 30.0 right 30.0 and top 60.0 now child and we'll use a form wiet the reason for using the form widget in our container is because form widget help us to check if the user have entered the text on the text field that I will just write in the column wiet so by using the form widget I can check all the cases regarding the text field so I will wrap up a column widget with a form widget now we'll write text widget here and in the text widget I'll write let's start with admin and we'll use a style text style to give a text style to the text widget here and we'll write color colors. black font size 25.0 and font with dobard so here you can see the text vet now we'll write size box height 30.0 now material and first I will create a container here then inside the container I will pass a two text field where the admin can enter the username and the password so border border radius do circular 20 Child container height media query do off context do size do height divide by 2.2 now decoration box decoration color colors dot White we'll give the Border radius to The Container here so we'll write border radius do circular 20 now we'll write child column children and we'll write size box height 50.0 and we'll pass one more container and we'll give the padding as inser dot only left 20.0 and top 5.0 and same for the Bottom now margin H insert dot symmetric horizontal 20.0 and decoration box decoration border border. all color and we give the color to the border so we'll write color colors Dot from a RGB which will be the customize color code now border radius border radius do circular 10 now again child and in the child I will write Center child text form field controller and we'll pass a controller so that we can control the usern name so we'll write text editing controller user username controller equals to new text editing controller the reason for creating the username controller is because I want to get the text what the user will enter on this text field so that we can check if the admin has entered the correct username for the admin panel or not so in the validator I will write value and we'll check if the value is null or empty then we'll suggest the admin to enter the username here and if we enter the username then will pass null now decoration input decoration and we'll write border input border. none now we'll pass a hint text to our text form field with s suggest that to enter the username on this text field then in the hint style we'll give the styling to the hint text now we'll H reload so here you can see the text field and the container that I have just created by using the container widget here now we'll copy the same text field and paste it in below the username where we will suggest the admin to enter the password so we'll give a space between the username and the password so I will write size box height 40.0 and we'll create one more text Ting controller for the password so that we can get the password from this text feed now we'll write please enter password and in the hint text we'll write password now size box height 40.0 padding Ed insert do symmetric vertical 20.0 sorry 12.0 now margin Ed insert do symmetric we are writing container again because I want to create a customized login button so that after entering the username and the password admin can directly click to the login button and can directly move to the add quiz page from there they can add the quiz according to the select Ed category he wants now we'll write color colors. black now child Center and we'll Center the text vdet here so we'll write text login and we'll pass a style to the text vet here by using the text style now color colors dot white and font size 20.0 and font weight dot bold so here you can see the customer smice button so now let's move and add the username to the text field so for an instance I'm writing the username Shivam here so it uses as exact that I wrote in the username because there is a same controller that I passed in the password so I will write user password controller in the password text field now I can pass a separate password for our password text field now when I click to the login button then if I have entered the correct username and the password in this two text field then we can successfully log in in our add quiz page and can directly add the quiz related to the specific category now but before that let's move to the fire store database and we need to create the database here because as I've told you that the password and the username that the admin will enter in the admin login page will be unique and it will be only known by the Admin so we'll get that username and the password from the fir to database and we check if it match by the details that admin have been provided in the login page and if it is then we can directly move inside the app now one of the main thing to get the cloud fire store in our flutter app is that don't forget to change the rules from here because if you forget to change the rules to true then you might not upload the data to the cloud file store and it will be very difficult you to understand why I'm facing this problem so that's why I keep on saying that please follow along with me do not copy the complete code from the source code and directly paste it in the source file rather than follow along with me because I always teach you each and every step I have used in the flutter app so that you can also customize the app in your way and can make the app perfect for you to add in your app bucket list now in the collection ID I will write admin and will click on next now in the field I will write ID and the ID for our admin will be Shivam and the password 1 2 3 4 5 6 now click on save so as you can see the collection name admin with a random doc ID and the ID and the password for our admin login page now let's move and we'll create a function name login admin here which will be called whenever the user will press on the login button now we'll write Firebase firet do instance. collection and we'll get the collection name admin that I have just shown you now in the cloud fire store now we'll get the details from our admin collection now snapshot Dot docs for each so it will check the first document that we have uploaded in our admin collection here and in the if case we pass if result. data I mean that our ID does not matches with a username controller. text where the admin have entered the usern name then we'll use a so snack bar to show that the username that admin have just entered on this text field is not correct so we'll write your ID is not correct and we'll create our second case for the password where we'll check that if the password matches with a password that we have just entered in our fir store database and if it not then we'll write your password is not correct in our so snack bar if both the case is false then we'll directly move to the else case here and we'll directly push the user to the add quiz page but let's move and create the add quiz. do file here and will create a stateful widget name add quiz now Navigator do push replacement and we'll pass a root where we want to directly push the admin so we'll write add quiz root now we'll write scaffold body container in our add qu. do file so we have wrote a complete code for our admin login page now let's check if our admin really work Bo what we have just wrote here so now let's hot restart the complete app so our app has launched successfully now I will write username Shivam and 1 2 3 4 5 6 now I'll click to the login button here nothing happens because I forgot to wrap up a login button with a just director and forgot to pass a login admin function so that it it can checks all the case regarding the username and the password and directly push the admin to the add quiz page now we have called the login admin function here now let's click to the login button so as you can see we have successfully moved to the ad quiz do. page and our admin login page is working brilliantly so now let's move to the add quiz. file and and here I will first make the UI for our add quiz page from where the admin can directly add the quiz by selecting any of the category in the scaold I will first create the appar so I will write appar bar title text and in the text I will write add quiz style text style colors colors do black font size 20.0 and font WID bold let me increase the font size so we'll make it to 30 in the column which it I will write text upload the quiz picture so here the admin has to upload the quiz picture from where they can also write a four option like option one option two option three and option four of that specific quiz picture that will be shown here and there will be the one right answer in that four options and we'll also also write that correct answer in one of our text field now we'll give the margin Edge insert dot only left 20.0 right 20.0 and top 20.0 so it is done now let's show the container here now in the container there will be a camera icon at the center from where the user can click to that camera and the app will directly opens the phone gallery from where the admin can directly upload the quiz picture for their specific quiz they want to add now we'll write Center child material and will'll give the elevation 4.0 and Border radius border radius do circular 20 now now child and we'll write container now with 150 and height 150 now decoration box decoration border border do all color colors dot black and we'll give the width 1.5 now we also give the Border radius to The Container so we'll write border radius border radius. circular 20 now inside the container I will first create the icon which will be the icons DOT camera LT rounded and we'll also give the color to our icon so here you can see the container where the user will up load the image of that specific quiz now I want to move the text to the left side so I'll write cross Croc xess alignment do start in our column widget now here comes our four option so as I have shown you in the question do do file there is the image of that specific quiz and a four option from where the user has to guess the correct answer for that specific image that have been shown in that quiz so we need to add all the four option that admin want to show for that specific image so I will create a text field for each option here so our first option will be option one so we'll write a text here option one and we'll give the color font size and font WID and we'll give the spacing by using the size box height 20.0 now let's create a text field so that admin can add the option one here so container padding Ed insert. symmetric horizontal 20.0 and we'll give the with media query do off context. size dowith I think so you know that why I'm using a media query here because at some of the place I am using a media query in the form of a numeric digit like 150 200 but at some of the case I am using a media query to give the width to The Container basically if you write a numeric digit then your app will not be highly responsive and if you use a media query then your app will be very responsive when you test the app on the different devices though I know that I have told this thousands time if you are a old viewer in my channel but I keep on saying that because I always suggest you to use a media query when you are giving a with to to The Container or height to The Container Now text editing controller Option One controller equals to new text editing controller now we'll create some more controller for option two option three and option four now we'll pass Option One controller here now decoration input decoration border input border. none now you might be thinking that why I used a border input border. nun when I'm writing any of the text field here basically when you run the code without writing a border input border do none in the text field you will get a underline in each text field which not looks good when you want to provide a container with a border radius so to remove that underline from the text field you can use a border input border do none here now we'll give the hint style so we'll use our text style to give the style to our hint text so here you can see the text field now we'll give the size box height 20.0 so we have created the option one here now let's move and create option two option three and option [Music] [Music] four [Music] so we have created all the options now as I've told you there will be one more text field to indicate the correct answer between these four option so that we can show the correct answer when the user will press on any of the option from this quiz so we'll paste one more text field here but you can see the Overflow error because we have not WRA up a container with a single child scroll view wiet so we'll wrap up our container with a single child scroll view so now it is done let give the margin from the bottom so we'll write bottom and we'll give the margin from the bottom 40.0 now we'll write on the text correct answer and in the hint text we'll also write correct answer now we'll create one more text editing controller for our correct answer so we'll write correct controller and we'll pass that in the text field so we have created four options and the correct answer now we need to upload all these detail in our specific category so to upload all the details in our specific category I need to create a button name add so that we can directly press that button and can upload the data to our fir store database so here I will create a a customized button name add by using a container wiet and will give the elevation by using a material [Music] [Music] [Music] wiet [Music] so here you can see the customized button add here but I have forgot to specify a category here because I want that the admin can upload the quiz for the specific category like animal Sports objects Etc what I have shown you in the home screen so here I need to create a drop- down button so that user can select a specific category if you have followed the food delivery app series then you know that how to create a drop- down button and can get all the options in the drop down button so that user can select any of the category and can upload the quiz for the specific category so if you haven't followed the food delivery app series then you can go to my channel and in the playlist section you will get a complete food delivery app Series where we have done the complete food delivery app from the scratch now here I will create a container so we'll give the padding with and the customized color code in our decoration box decoration now border radius do circular 10 now child and we'll create a drop down button underline and in the child we'll write drop- down button now items in the items I will pass a final list of that category that I have shown you in the homepage so I will write food items equals to our first category is animal second is sports third is random fourth one is fruits objects and our last category is place so we'll pass that items in our food items now we need to create a string value so that we can store all the value that we have just mentioned in our food items whenever the admin will select any of the specific category so in the items I will write food items sorry why have wrote a food items in our list think so I am still making a food delivery app here because that was a very long series it will take some time to get out of a food delivery app series here because I have worked nearly 6 to 7 hours in our food delivery app Series so sorry I need to change a food items to a quiz items here now in the items I I will write quiz items do map and in the map I will pass item now drop down menu item and in the child we'll pass the text item basically text item is something that the user will select from the specific map or the list that I just mentioned above which will show that admin which of the specific category he have been selected while using a drop down menu item now I will give the style to our text by using a text style now we'll write dot to list so I'm getting a error here I think so I have forgot to add some function in our drop- down button so let me check okay I got the error what I've done I forgot to mention the value in our drop- down item so I will write value and in the value I will pass a item so here it is done now we need to also mention the on change method because as soon as the admin select any of the category from our drop- down then we need to specify that selected category in our container so that it can hint what that specific category the admin has been selected so we'll use a set State method in our own change now we'll write this dot value is equals to value so it is done now let's save the file and here you can see the drop down button let me give the space between the text field and the container so we'll use size box height 20.0 let's also pass the hint text hint style and the icon to our drop- down button so here it is done now we'll pass a value is equals to value now after clicking to the drop down button you can see all the categories that I've just mentioned in our quiz item list let's move to the Pu Dev and we need to call copy some of the packages from there and we paste it inside the ppec ml file to so that we can upload the image to the Firebase storage and the fire store database now in the Pu Dev we need to search image picker here basically image picker help us to pick the image from our phone gallery or we can also pick the image by clicking the image from our phone camera so we'll copy the dependency from here and we'll paste it inside the ppml file now our second package name would be Firebase storage basically Firebase storage help us to upload the image to the Firebase storage so we'll copy the dependency from here and we'll again paste it inside the ppec ml file so we also need to add our third package name random string now you might be thinking that why we need this package in our flutter app basically random string will help us to give the specific ID to each image we are uploading to the Firebase storage do not need to worry I will show you where we will use a random string in our flutter code so we'll copy the same dependency from here and we'll paste it inside the ppec ml file now run all the packages that we have just pasted in the ppml file now if you are using a iOS device and want to run the app in your iPhone then you need to add some of the code in the info. pist file because to enable the image picker in our flutter app for the iOS you need to copy the sum lines of the code and pasted inside the info. pist file so go to the read me section and you can see that here are the three section you need to add in your Runner info. pist file so let's move to the info. pist file and I will add this lines here basically these are the some verification that we need in our iOS device so that we can use a camera microphone and photo library easily in our iPhone if you won't add this three commands in your info. pist file then you can't access the image do picker package and can't pick the image from your phone gallery this is just for the iOS now let's move to the add quiz. file and here I will write final image picker picker equals to image picker so we are assigning the image picker in our picker text and we are using a file selected image the reason for using a file because the image we will be selecting from our phone gallery will be in the form of the file so we need a file and give a specific name selected image here so that we can store the specific file in our selected image now we'll write future and we'll create a get image function here which will be called whenever the user will press on the camera icon so we'll write VAR image is equals to await picker do pick image and we need to provide the source image source Dot so you can also pick the image from your camera and the gallery so I want to pick the image from the gallery so I will select Gallery here now we'll store the selected image which we have picked from our phone gallery so we'll write file image path now we'll use a set State because as soon as we stored a selected image then I want to assign the selected image as soon as the user pick the image from their phone gallery now if selected image is equals equals to null then will show a camera icon here and if the user have picked the image then we'll show the image by using image. file here so we'll wrap up with a Gest director and we'll call a get image function here and if the image is already picked I mean if the selected image is not equals to null then we'll show the image by using image do file here now if you want to show the image from your file location of your phone gallery then you need to use a image. file here and fit boxfit do cover so that it can use a complete height and width of the image that I've just provided in the container now we have wrote all the text editing controller so we need to pass a specific controller for each option here so for option three we need to pass option three controller and for option four option four controller now we'll create a function name upload item so that we can directly upload our quiz to a specific category now if selected image is not equals to null I mean that if the user didn't pick any image from their phone gallery and directly press the add button then we can't execute a function here because I want that image to be picked first then we can add the quiz to that specific category and I also want that user to enter a enter all the text field here so we'll write option to controller. text should not be equals to to null and option three and option four controllers. text should not be equals to null this is necessary part because if you don't write if Case here and directly upload the image to the Firebase then you might face a error in your app now string add ID so here we are going to use a random Alpha numeric 10 basically the random string that I have used is because as I told I need to assign a random ID so we'll use random alpha numeric 10 here now reference and we going to upload the image to the Firebase storage now so we'll write Firebase storage RF equals to Firebase storage do instance. RF and we pass a child blog images will be the folder of our storage and we passing a ad ID child here so let me show how it will create a folder blog images in the Firebase storage so let's move to the Firebase and and we'll go to the storage section and we'll first enable a storage from here click on next now click on done so as you can see Firebase is setting up some security rules here so wait for a few seconds now let's move to the rules and we need to change it to true if you forgot to change your rules from false to true then you can't upload your image to the Firebase storage so this is one of the main step whenever you are uploading the image to the Firebase storage so do not forget to change your security rules from the Firebase storage after changing it to True here it will create a blog images folder and in the blog image folder it will keep on uploading one by one the image that will upload through the upload item function now we'll write final upload task task equals to Firebase storage RF dot put file basically put file function will help us to upload the selected image which is our file location of the selected image now V download URL so basically download URL will help us to get the URL of the image that we will upload on the Firebase and we can use that URL in our fire store database to show the image now I will create a map string Dynamic method here basically map string Dynamic method itself says that first we need to upload a string and then Dynamic method in the dynamic you can upload many things like integer bullet character string Etc so it is better to use a map string Dynamic here now let me show you how we will upload a quiz for the each specific category now many of the developers might do that there will be a six category in our app so they will create a six function for uh each category and they will upload one by one quiz for that specific category but I will do a some smart work here which will take a less time and less code and will directly upload the quiz for the each specific category so I will use only one function and one map string Dynamic function to upload a quiz for the each specific category now it will automatically create a collection name objects Place Etc and it will automatically uploads the quiz for the each specific category from the admin panel rather than creating a six function for each category I will just create a one function for all the categories now don't be get confused let me show you how I will do that then you will get to know what I am explaining you here so this is one of the easiest step that I'm going to do here so do not get confused because I will tell you each and every step what I'm writing in a fir store database and how we'll upload a data to the fire store database and can also upload the image to the Firebase storage now map string Dynamic here I've already explained you the reason for using a map string Dynamic now we'll write a map name add quiz now we'll pass a image of that specific quiz that will be the link of our image that I have already explained you and in the option one there will be the text that the user have written in the option one field and we'll get that by using option one controller. text and same for the option two option three and option four and we'll also upload the correct answer of that specific quiz so we need to create a correct string here and correct controller. text so that we can get a text from our each text field so if you had followed my old videos related to a chat app food delivery app Todo app or news app then you know that what really option one controller. next do here if not you can follow that complete app that I have developed from the scratch and it will be very easy for the beginner to understand the complete code that I have just wrote there so if you are new in this channel then let me explain you what really option controller. text do here so if the user will enter a text in the option one text field so to get the text from the option one textt field we'll write option one controller. text so that we can get the text from the option one text field and can directly upload in our map string method now we'll create a new folder name in the lib which will be the service and the new file database do do and in the database do do file will create a function which will help us to upload the data to the fire to database now we'll create a class name database methods and we'll write future add quiz category and we'll pass a map string Dynamic here and we'll give a name to our map user quiz category now string category the reason for using a string category is because as I have told you I will use only a single function to upload the quiz for the all six categories so in the string category we'll get a specific category like random objects place and will upload a each quiz for that specific category by creating a collection in that category now Firebase fire. instance. collection and will pass a collection name category and in the ad we'll upload a user info map now so this all categories what I am talking about like animal Sports randoms fruits objects place it will automatically create a collection for each category and upload the quiz for that specific category in the fir store database now let's move to the ad quiz do. file again and here we'll write await database methods add quiz category and we get the category that the user will select from drop down button which will be stored in the value so we'll write a value here now we'll use a DOT then method because after uploading the category we want to show a hint that the quiz has been uploaded to the fir store database so we'll use a so snack bar here and snack bar and in the content will pass pass a text quiz has been added successfully and we'll give the style to our text so we'll use a text style and we'll pass a font size 18.0 now we'll also pass a background color colors dot orange asent now we'll wrap up our Center widget with a G detector and in the on tap method we'll call a upload item function so it is done now let's move to the terminal and we'll write first flutter cling command and then flutter run to run the app in our emulator so our app has laun successfully now when I click to the camera icon then it is suggesting us to pick the image from our phone gallery so I will pick some random pick from my emulator and here you can see the image that I've just picked from our phone gallery now it doesn't give a border radius to the image because we didn't wrap up a image do file with a clip react so let's move and wrap up a image. file with a clip react widget so there is a small tips from me when whenever you want to give a border radius to your image then always use a clip react wiet here so we'll now wrap up with a clip react and will give the Border radius do circular 20 so here you can see the image now let's move and we'll pass a option one Hills option to plane though I'm passing a random option here Cricket in option three and in the option four I will write football now in the correct answer I will write Hills and will select a category place here and we'll click in the add button so wait for a few seconds so as you can see quiz has been add add did successfully and let's move to the Firebase and check that our data has been uploaded to the fir store data base so here you can see the category place that have been created automatically by a one function that I have told you and here the option one option two option three and option four and here is the image link that I have just used by using a download URL now let's open the URL link here and here you can see the image that we have just uploaded from the our emulator so our ad Quiz part is working brilliantly and we can successfully upload the quiz for the each specific category here now let's move to the storage and here you can see the block images folder and here the image that we have uploaded from our emulator now let's move and we'll H restarted again and we'll upload one more quiz to our category so here I will select some random category and we'll fill option one option two option three and four and we'll select a category random here now click on ADD so here it is our second category so let's move and we'll see that if the fire store create a second collection name random here so here you can see see that it automatically creates a second collection name random and in the random we have uploaded the first document here and this is the image that we have just uploaded from the our emulator so let's move and upload for the objects and here we create our third category name objects and this all data we have just uploaded from the fir store database now let's move and upload one more document to our same category objects here so quiz has been added successfully and here you can see that we have just uploaded a two documents in our same category name objects here so you can see that by using a single category we can upload a quiz for all the category and our our art quiz page is also working brilliantly I have a small request from you if you enjoying our videos and the apps related to the flutter and want to show some love and support consider buying us a virtual coffee every sip fuels our coding adventures and keep the flutter magic alive you can find the link in the description box now let's move now let's move to the homepage because we are going to now show all the quiz for that specific category that we have just uploaded in the fire base through the admin panel so in the database method I will create a future stream queries snapshot basically query snapshot help us to get all the data from the fire store database and will'll create a function name get category quiz and we'll pass a string category here now a sync return return a weight Firebase fire store do instance do collection and in the collection we'll get a category name from our string category and do snapshot so that we can get all the things that we upload on the each category like objects place and random so it is done now let's move to the home. do page and we'll create a stream here basically we'll use a stream Builder to get all the documents and the details in our quiz app because stream Builder help us to get all the documents in the one flow and if we are making any changes then we can also see them in the few seconds by using a stream Builder so I will suggest that whenever you want to show the data from the fire store database then always use a stream Builder here now we'll create a all quiz function here so we'll write vet all quiz return stream Builder and in the Builder we'll write context a sync snapshot snapshot and we'll write stream quid stream now in the return I will write snapshot. hasd data so it will check in the fire store database that if the data is present in the specific collection or not and if then it will show all the data by using a page view Builder Or List view Builder so here we are going to use a page view Builder basically page view. builder will help us to show the first quiz and through the page we Builder we can directly move to the second quiz and so on so that user can start guessing the image for that specific category he wants and he can play a lots of quiz for that specific category and can use the app in many ways so it is better to use a page view Builder here now in the item Builder I will write context and through the index we'll get a each document here that we have stored in the each collection category so if the snapshot has the data then we'll show up P Page view. Builder and if not then we'll just show a container suggesting that there is no document present in that specific category and in the item count we'll count all the data length that present in the specific collection through the snapshot. dat. do. length now we'll write page controller. controller so we are keep on using a text editing controller to control the text field and here we need to use a page controller to control each page of our document or the quiz that we want to show so for the page view. builder we need to create a page controller here and in the controller will pass a controller now document snapshot DS equals to snapshot. data. docs and we'll write index so this is not the first time I am using a stream builder in our quiz app as I've told you before we have already developed many of the apps in in our channel so you might to know many things about a stream builder in that apps to so you can follow that complete apps playlist or I will paste that playlist Link in our comment box in the return we need to show the we need to show a quiz page here I think so I have made a small mistake here we don't need a quiz stream in our home. do file rather than we need need in a question do page because we are showing our quiz question in our question do file so I will remove this function all quiz from here and will paste it in the question do. file so let's move and we'll copy the quiz here and we'll paste it in our return return so that we can show all the quiz for that specific collection in the form of the quiz now image. Network because as I have told you our image is in the form of the link and here is the image so we will write DS image so that we can get that specific image from that document and and here the option one so that we can get option one text and same for the option two 3 and four now let's move to the home do Dot and we'll wrap up a our first category place here with a gesture director and we will push the user to the question or dot file so that he can start playing the quiz for that category and will write Navigator dopus context and we'll write material page root context now we'll write question and in the question do do file we'll pass a string category here so that we can get a specific category that the user have choose from the homepage now let's move to the home and in the question we'll pass a string name place which will be our category name now we'll copy the same Navigator function from here and we'll do same for the animals fruits objects Sports random the reason for passing the category name is because as I have told you we'll get the quiz for that specific category in our question do. file so we need to get what the user has really clicked on a specific category and we can show that specific quiz in our app and user can start guessing the image also one more thing I want to tell you that whenever you passing a category name here then make sure it should be the exact name what collection have you created in the Firebase if you don't pass the exact word what you wrote in the collection of Firebase then you won't get the result because it can't get a result from the Firebase and it can't show the quiz for that specific category in the app now let's move to the question. do file and we'll create get on the load function so that we can get all the quiz for that respective category that we are passing from our homepage now we'll write quiz stream equals to await and through the snapshot method that we have just passed in the database do do file we'll call a get category quiz function here so we'll write database methods dot get category quiz and here we'll pass a category so we'll write widget. category Now set State and we'll write in it State the reason for using the init state is because as you know that init State function is the first function that usually calls when the app launches or the page you want to open quickly call a get on the load function and it will store all the documents from that respective collection and can show that in our app through the page view. builder now do one more thing in our question do file is that wrap up a all quid function with a expanded widget so that it can covers a complete height of the screen now we'll hot restart it again and we'll click to the random category here so as you can see that here I got a image and the quiz that we have just uploaded from the admin panel now let's move to the Firebase and here you can see the random category and this document that have been shown in our r random quiz and here you can see the option one option two option three and option four so we are successfully calling all the quiz from our fire base and showing in our category here now now I want that when I will tap to the correct answer which is a flower then its border radius will change to Green so that it can suggest the user that the answer he tapped is correct and will show all the rest options in a red color which suggest the user that the rest answers are not correct so to show the correct answer we need to wrap up a option one with a justor and in the set State we need to pass a uh Boolean character here so let's create a bull so equals to false now in the on type function we'll write so equals to true the reason for writing so here because after tapping I want to show the correct and wrong answer so to get that if the user have tapped any of the option from our four option then we need to change the so to True here don't get confused let me show how I'll do that it is one of the easiest function that I'm using here because it will also help a beginner to understand each line of the code I'm writing here and you can see if so will be true it means it will suggest that I want to show the answers right now or not so if so will be true means if the user have tapped any of the option then will show the correct or wrong answer so to show the correct and wrong answer will match with the answer that the user have been tapped so we'll write DS correct which is our correct answer and if it matches with a answer that the user tapped then will show a container with a green color and if not then we show a container with a red color so we'll write DS correct is equals equals to DS option one then we'll pass colors. green if the answer is true and if not then we'll show colors. red now let's pass this case for all the options so it is done now let hot restart it again and we'll click to the random category here now we'll press the correct answer which is flower here so when I press the correct answer you can see that our container changes to a green color which suggests the user that you have tapped a right answer for this image and other container is on the red color which suggest that it is a wrong option for this image so it is working brilliantly and we can also show the correct answer in our quiz now let's move to the play section and here you can see the correct answer is heels now when I'll tap the correct answer then it will change it to green and rest to the red so now let's move and we'll click to the place category here so here you can see the first quiz of our place category But Here Comes our second thing is that when the user will press the correct answer and he want to move to the next Quiz to of the same category place here then how we'll do that so let me show it is a very easy process and by using a single line of code we can directly move to the next Quiz so here first I will create a icon icons. forward iOS which will suggest the user that by pressing this icon he can directly move to the next Quiz will provide some random color code to the icon now here you can see the icon now we'll wrap up with a container so that user can clearly see the forward icon here now we'll give the padding decoration border border.all and Border radius to our icon and we'll provide the height from the top by using a size box height 5.0 now I want to move the icon to the right side of the screen so I will wrap up a container with a row wiet and we write main main AIS alignment do end so that it can directly move our icon to the right side of the screen now we'll wrap up our row with our justest detector and in the on TP function I will create a function controller. next page you already know that we have created a controller for our page view so here it comes a reason why I have created a controller for our page view now to move the quiz to the next page we need a controller here so that we can control the page view Builder accordingly now in the on type function I will write controller dot next page and will pass a duration basically duration will suggest how much time you want to take to move the page from one page to the another and in the curve you can provide many cures like bounce in is in ETC so I will write is in because I don't want any animation here you can provide animation according to your choice and can make it more attractive now let's move and we'll click to the place category here so here our first quiz now I'll click to the correct answer heals here so it shows a correct answer here now in the place category you can see that there is a second document which is our second quiz now when I click to the forward icon then it will directly move to the next Quiz of that same category but here you can see that it is already telling us the correct answer so to remove the correct answer we need to make our so bullant character two fals again now let hot restart it again and we'll click to the place category again now here is the first quiz now let's click the correct answer now let's move to the next Quiz so here you can see the next Quiz and it is Dam which is our uh correct answer now when I'll click to the correct answer then it will change that correct two green and other two red so we can successfully move to the next Quiz and can play unlimited quiz for that specific category and through the admin panel we can upload as much quiz we want so we have successfully made a quiz app with the admin panel from scratch and you have added one more app to your app bucket list if you are new to the channel then we have already made a chat app news app food delivery app Todo app from scratch I will recommend you to to follow that videos that will help to learn lots of things regarding the flutter and Firebase though I'm planning to bring some more app series to this channel I have a small request from you please do not forget to share our videos to the different flutter Community groups so that we can connect with some more fellow developers also do not forget to hit that like And subscribe button so that you won't miss out on any of the amazing content we upload on this channel until then keep coding keep having fun I will see you next time thanks for watching

Channel: Shivam Gupta

Views: 9,767

Keywords: flutter tutorial, flutter firebase, flutter, flutter tutorial for beginners, flutter firebase app, flutter firebase tutorial, food delivery app flutter firebase, firebase, flutter food delivery app tutorial, flutter firebase ecommerce app, flutter tutorial firebase, firebase cloud messaging flutter, flutter firebase push notification, firebase messaging flutter, flutter firebase messaging, flutter firebase notification, flutter firebase crud

Id: W2CQ9f7N3BA

Length: 124min 26sec (7466 seconds)

Published: Sun Dec 31 2023