Scratch Cards in Flutter | Flutter Tutorial

welcome everyone to another video in this video I'm gonna be talking about a really cool dependency called scratcher which helps us in implementing scratch cards in flatter and I also want to demonstrate the usage of stateful Builder widget so if you ever feel that your downloads are too low just implement this dependency in the right way and you shall see the difference all right so without any further ado let's get started [Music] take a look at pops back mo so here i've provided the necessary dependency and along with that i have also mentioned this acid which is nothing but a black and white diamond image now inside of the main door dart i've imported this christ your file and inside of the build method we have material app and scaffold now for the body of the scaffold I'll write a body a body would be a stateless widget what I plan on doing is that I'll have a single button at the center of the screen and then you click on it an alert dialog will pop up and it will contain the scratch card so I'm gonna start off by giving some alignment to this container and set its alignment to alignment art center then for the child I'll write fly button give it a symmetric pairing of 20 vertically and 35 horizontally then I'll set its shape to outline input bottle and set the border radius to 35 and bought a site to water side dot none and for the color I'll write color colors dark blue now for the child will need a text say get a scratch card for the style I'll write textile color colors rod white set the bond weight to font-weight:bold and so the font size to 25 moving on for the on press trial right scratch card dialog and pass in the context then just so here I'll create a function called scratch card dialog which accepts a context and it will return on a show dialog now a show dialog is a function of type future so it will be more informative if we specify the return type of this method which is going to be future void so the show dialogue method takes a context here will pass the context which we received and then it takes a builder which returns with the context of its own now we'll finally return alert dialog give it a shape using the rounded rectangle border and set its pore radius to border radius draw a circular 30 for the title I'll pass in a text widget and write you a scratch card and then I'll simply give it some style moving on to the content parameter this is the content of your alert dialog so I'll pass in the widget that we've been waiting for which is the scratch a widget this is what basically defines a scratch well rectangle now it has several parameters such as accuracy threshold brush size on change on threshold and so on the first thing the real target is going to be accuracy this basically defines how accurate every drag has to be I'm just gonna use the scratch accuracy enum and set it to low then set the brush size to 50 and that's about it now I'm just gonna provide a budget for the child so right container and I'll set its height and width to 300 300 set the alignment to a Langman dot Center and just paste this text widget as a child for the container so every time you scratch you in $200 by default the color of the scratch card is black so if you wanted to change that you can simply pass the desired color in here and reload the app but in some cases even colors are not enough fortunately this dependency allows us to show an image instead of a simple color using image path and you can use this image fit to define how your image should be inscribed in a box so for image are right assets slash diamond BW dot PNG and there you go our scratch card looks much more attractive now there's also possibility that you might want to build up some suspense before revealing the price or disappointment to your users and in order to do that we can define a threshold limit which means that we can specify an upper limit up to which the user would have to scratch the card and as soon as the upper limit is crossed we trigger some action I'm going to start off by defining a threshold by writing threshold and setting it to 25 and then to trigger the action upon crossing the threshold I write on threshold and leave it empty all we want to do here is fade in the price amount as soon as the Thresher is crossed so at the top of this class a right double opacity and set it to zero now I'll wrap this container with another widget called animated opacity and provided with the duration so I'll set its duration to 250 milliseconds and opacity to opacity great but this won't work because we have not defined a way by which we could rebuild this visit now Angele you would make this a body widget as a stateful widget and then place the scratchcard dialogue method inside of the build method and then finally set the value of opacity to 1 and call us at state method inside the on threshold callback well we'll do the same thing but just a little differently the a body visit over here is a stateless widget and you want to keep it that fair we don't want to build that entire widget just for a simple animation in that case we can simply wrap this crash a widget with another widget called stateful builder stateful builder allows you to change the state of a visit by redrawing it without redrawing the entire widget tree thus improving the performance so we need to make use of a builder parameter which returns with the context and another parameter of type state setter then this builder would return a scratcher widget so now we are going to be able to call a set state method instead of the on threshold callback so I'll do that and then I'll simply set the value of opacity to one all right let's check it out so I've launched the app and now I'm going to tap on this button and there we go the dialog box pops up and now when I start scratching it notice that I've reached the center how the text slowly fades in great now since we have not introduced any method by which this animation could be reversed therefore I'll simply hot restart the app again and again everything works fine but there's just one little problem which is that for some reason the on threshold callback is triggered much later after I cross the threshold mark maybe that's because this fresh card is being rendered in sort of an alert box and there are some problem with proportions and stuff but still it's quite strange for example I'm going to set the threshold to 75 and restart the app then I stab the button and now I start scratching notice that after a while I scratched 100% of the visible area but the required text does not appears but it does appears after I keep doing it for a while although I know that the widget works fine it's just behaving strangely after I put it inside of an alert box anyways I hope you enjoyed this video if you knew then check out some more videos on the channel and subscribe to receive more awesome content also make sure to hit that Bell icon to receive more awesome content at the earliest the code for this video is linked in the description below thanks for watching and I'll see you soon you

Channel: The CS Guy

Views: 10,632

Keywords: flutter, flutter tutorials, flutter tutorials for beginners, statefulbuilder widget in flutter, scratch cards, scratch card in flutter, ui design in flutter, ux design in flutter, making beautiful ui in flutter

Id: EM4D1pUpadA

Length: 8min 22sec (502 seconds)

Published: Sat Oct 12 2019