 Hello guys, so in my previous provider video, I wrote a comment from one user That is just in I'm trying to make a dice rolling game Could you please create a video to show how to roll a dice? So I plan to create a app for rolling the dice and I will just add animation So that the dice should look rolling and I will add some audio as well for the same So let's go to the project and start for the same So first of all, we need to add some dependencies. So one dependency I need only that is for in order to play the audio. So that is just audio. So I just copy this go to project Under dependencies you can add this study and We need to do a couple of settings over there and This is for your Android specific settings. So just go to your manifest and copy this code. So I just go to Android app source main and Android manifest So here you have to go to here after this manifest paste this line Then we need to use this line as well. So this is required I think if you're using more than 28 API level, so I'm using 31. That's why I need to add it Otherwise, it's why default over there Okay, so I just removed this Because I'm already inside this application to save this I Think we don't need to do anything else. Yes Okay, so if you are working with the iOS you can go ahead and follow these instructions Same way for Mac OS. They have provided for Windows. They have provided what are the settings we need to do? Okay, so we don't need it now. I just close it now. I need The images as well. So I already have some folders that will just close it So I have audio folder that is having one die-soling Music, I just show you Okay, so I have the images as well. So what I did I just collected These images for different values of dice. I Just close it and We need to keep these two things inside the asset. So I just copy it Go inside this asset folder. So if it is not there, you can create the one just reveal and Inside the assets you can paste it Okay, that's fine. Okay assets are fine. Now what we need? Let me just set it up. So let's go to pubspec and Dependency is added. So let's set up the assets as well It's and we need to add this Assets and we have this folder images yep images And we have the second one for audios Okay, just save this and Close this pubspec Close this manifest Okay, so let's design the UI first. So let's just cut this and Create a column so that I can add Children and I can add this Let me just remove the const and go here. So here first of all, we need the image so image you can take simply image start asset and Here we need to specify name. That's fine. And the second we need some button that is Aliated button Which would have on press where we will be Rolling the dice and The child we can just paste that text that is Roll That's fine. And this one we need asset image. So for that, we just go here up Let's create a list of Strings so we are going to keep Images like this and Here you need to specify that path and you need to look for the name of Defiles so we have this I just copied from here Paste it. So I just quickly add the images Okay, so these images basically should be changed as per the value of index So for that, let's create one variable. Let's say Int current image index So basically we can keep it zero initiative Okay, so this we will be using here and we will be changing the index again and again So how do you get images? Then index and if you want you can give some height as well Let's keep it under so you can choose accordingly save it So let's quickly just use one property of this column that is main exercise Main exercise dot min and save this Okay, so this is fine. We just add one sized box here. So we can give more space. I think 30 and let's do it Ready, so you can add little padding around this so that it should look little nice and just use this cost over here and Remove this so all it done. So this is how the design would look You can just decrease the space Now what I want I just want to roll the dice and I want to play some sound as well So what to do first of all, I just create one Random variable over here of random class and with this random whenever user click on this button it should say random dot next Tint so which would have max six value Okay, that's fine So what we need to do this value we need to assign to current image index and Once it is done. You can simply set the state Or you can just take it inside this Save this and let's try to see if it works first of all You can see the value is change Now what we want this should be changed so What happened? Okay, so we are just loading it to simply that's fine. So what we want we can just use this a Sync here Save this and just quickly reload it. Okay, so what we want we want It should mimic the behavior that dies is being rolled for some time. So for that we need to use timer Okay, so this code I need to put it inside timer. Let's write the code here timer dot periodic So this will keep on executing your code. So we have to give the interval over here So let's do what let's use const duration and Let's try with some milliseconds Let's give it 80 and once this 80 milliseconds are over what to do You need to stop it as well. So for that, let's take one counter variable So that we can track how many times the state of this dies has been changed So let's say counter is equal to one And just say it and this counter we can increment inside this timer so that we can track how many times the value of dies has been changed and The code we have we have removed actually So we use set state and we were doing what current image index is equal to The serve a random dot Next int and we were giving six save this and One more thing we need to do this counter is incremented, but we are not stopping this timer anywhere So what to do so simply do what let's add one condition over here if this counter is Let's say greater than equal to 12 or Let's give it 13 Because I have starter from one. So you need to cancel your timer. We have timer assess. Yes, we have cancelled. Yes So we did timer to cancel then you can reset your counter to one and What else we need nothing we just need set state And if you want you can cut this and take it away Okay, so let's try to check this if the logic works let's roll and We got some problem. What it says? Load a sink. Okay, so let me cross check. I have named everything is fine Stice one it's here is the wrong dice s. So let's give it two So that was my mistake. So let's quickly reload it and check it out. Okay So loaded. Let's roll And you can see the animation And if you want to give it a more realistic effect Let's first of all add Audio over here. So for that we need this audio player class Let's give it player is equal to audio Okay, so we got this audio player instance, so let's go inside this logic bar so Rolling the dice. So this one is sound and Here we need to write logic that say player dot so we need to set asset and that would be your assets and Audio's and Then you need to specify the name that you can get it from here And just copy this Paste it here Fine. So this method you can cross check this gives us future. So let's use a weight over here And we have already used a sink over here. That's fine And once it is loaded, you can simply just play this with player yep, so this gonna play the sound and The below one gonna roll the dice Let's save this and see so we just need to stop it and We just run it again. So we got some error over here So let's take a look what it is So single decks error, okay, so we missed one thing we just go here into this Android and Just go to your app and you have a build out radar and check for your multi desk sport is not here So for that we need to add Multi decks Enabled and Just use the property true And you are the IBX enabled. Yeah, fine so we just save this and Close this and we can simply run it again. It should work now. Okay, so let's go here and roll this So you can see Roll Okay, that's fine. Now to make it more realistic. What you can do. I can just go to my image First of all This logic is clear this timer gonna give us a Repetitive tick that means after 80 milliseconds this gonna execute the score so what we are doing we are just incrementing the counter and Updating the index of the image which is used over here and We are also checking for this counter once that ice has changed its state 13 times then we are just canceling this timer and resetting the counter Okay, and just to make it more realistic. I am going to just wrap this with another widget. We have Trans Dot rotate Where we can just give it some angle. So angle we can just again use that random dot Next double and you can just multiply it with 180 degree angle Let's save this and check this now you can see what if I roll seems better see so We are just getting different values because we have used random We have seen the logic. We have a testy audio as well And that's all for this video if you have any doubt do commenting the comment section Otherwise like share and subscribe. Thank you