Drawn Signature Made Easy

Drawn signature

hey wassup guys welcome back to my YouTube channel and in this video we are going to talk about something which is very interesting guys believe me on that so you must have seen the applications like Amazon or Flipkart or any other application and you must have ordered something from those sites so when the cooler guys come to your house they ask for your signature on their application so you sign it signed there and it can be like it is not very good signature but again it's kind of authentication which you give to that particular delivery guy and that's what we are going to implement today we will see how we can implement that a signature kind of thing in our application how we can you know sign into our application using our like you can have stylus or you can using the touch so I will see about that and we will also see how to paint on this screen so that is the make a major idea behind this so we should know that how we can paint on the screen so we will use the custom painter for that so that's again a different thing so we have already with this of a dummy project you can say and let's start with implementing our signature so what I am going to do I am just scrapping all this code and let's start with the on scratch so we have this material app ok wait for a second so we have this material app here and then we have this home as well let's say new home page ok ok so now we have a stateful widget let's say and we will give it a name home page ok so now we will will have some kind of container here then everything which we which we are doing from the beginning let's also disable it's on debug banner so we are ready with this ok so rather than skip or other container let's have a scaffold and here in the scaffold it will give us a body option where we can do something like new container let's say first of all now let's make the painter first of all okay so for that what we will do we can make let's a class which we can say signature which will extend what we can say custom clipper okay and this custom clipper should be taking up part as a generic type and then we will need to our right few methods one is the CAD clip and then another one is the this should we clip and we should paint only when if if so something will change so here what we will do here we can have let's say some kind of offset offset is basically if you don't know then it's like X or Y axis point so here we can say let's say points okay which we will pass to this class and then we can have this constructor here where we can say this dot points okay everything is working fine and here we can say return if this old clipper dot points is not equal to is not equal to points okay so only in that situation we want to repaint it and now this method comes which is the gate clip method so here what we can do we can take a new path first of all okay and now we don't need actually the path right what okay so we are doing something wrong we are going with this custom clipper we should go with the custom painter first of all that's that's my mistake guys sorry for that and let's let's just delete this okay how can I do that I just forgot to right custom paint that's totally my mistake guys okay now we are fine and now rather than signature here we don't have to return any path why I I thought I was doing the clipping thing but again okay I I made a mistake and I totally accept that so here we can say if ol delegate dot points okay is not equal to points then we will if it then we will uh paint it again and now in the paint method what we gonna do we'll see what points we are getting first of all okay so basically we have these two parameters coming which is one is the canvas and another one is the size okay so what we can do we can see here that for int I squl to 0 okay we will start from the zero and then we will go to point start length minus one and we will increase the I value here okay now what we will do here in this situation we will check if the points are at position which we are drawing the points I at position if it is equal to equal if it is not equal to null okay because we don't and whenever you you can say whenever you draw a line or draw a point it always have some starting point and ending point so the starting point is this points I which is not equal which should not be equal to null and also the ending point which could be I plus 1 that also should not be equal to null okay so we can say this okay so if that is the situation then what we can do we can draw a line okay we can say canvas draw a line okay we can have points okay so we can say points and here I okay and then we can have another point so we can say points then we can have I plus one okay now it is asking for a paint okay so we need to paint it also so fourth paint what we will do we will say paint paint is equal to new paint okay then below this what we can say we can say its color so color would be let's say color start black first of all then we will change the color all as well and then we can say let's say straw cap and we can say straw cap touch round or square or whatever you want but round is good okay and then we can also give it a width so like what will be like if it is a pan then there should be a width of that pen okay so let's give it five point oh four now we can also we can always see what it is doing and how it is reflecting so we have passed this paint as well so we are done with this with this signature class we have a points which is which we are sending and then we have the scan or paint method which we are overriding we have this paint object here and then we are drawing this line using the canvas if our points are not null okay that is what we need to do only and then in this body we have this new container so what we need here we can use this new container there is not an issue and inside this container let's say we have new gesturedetector okay because we want to detect some gestures so let us do one thing let's build this application once so that we can be you know already with everything so it is building Gradle it will take few seconds to build this application and again guys you can code in dot one or dot two this code will be compatible with both of them you can use dot two you can use dot one this is totally your choice the link will be available in the description for the source code so everything will be there and again it it deployed in to somewhere as I guess no so why it changes the deployment device I don't know okay so we have this screen this week because we don't have anything so now here in the gesture detector we can use this on pan update so what is this on pan update is like when you knew your pointer is in the contact with the screen and you start moving that pointer okay let's say this is my cursor and I start doing something then this method this property is called on pan update and it takes a drag update details okay so we can say here our drag update details and let's say it is our details okay so here what we will do in this scenario we will call this at estate method because we want to update the UI okay so here what we can say we can ask for a render box okay let's say this is our render box and now we can get this render box with from this context and it should give me fine render object okay so we need to understand which is the render object so as of now this is my container which we can use to to you know have some paint on it okay so we can write on this object so this this this render object will give me currently the from the context this all all the container okay so we have this render object as of now so now what we need we need some position you can say so we can say offset may be you can say local position okay and this position you can get from this details okay this details will give you the position global position you can see okay and what it takes now okay once again so for getting this position you will say object dot okay I local to global or global to local so we will get the global position then we will convert it to the local position so here we need to give the point so we can say details dot the global position okay so this everything will give us the local position okay now we can use this local position and we can you don't draw something on it so let's say we have now this local position as well now what we want let's do one thing let's create some list of points okay so we can say here list offset and we can say points okay Oh points okay now what we need to do we need to add this local position to these points okay so what we can say we can say a point equal to new list dot from let's say points and then we can use dot dot add and then we can add the local position here okay so now we will have all the points which we can pass to our this this signature class okay so now what will happen when we will stop writing so this on pan and we'll call it okay oh wait a second we are here okay so this on pan and will be called and it will take drag and the details let's say details okay and here what we will do we will do not much thing we will say a point is equal to null because we don't want any kind of points after we will stop this our writing okay when we will stop writing then we don't want to use any point so we will say point is equal to null okay so let's say when we will start writing something then this on pan update will call and it will take all the position and it will add this position to our points list and then we will stop then we will say points fall to null okay now what we will do inside this container we also have one child property okay so one second how we have given this property to this okay that's a problem okay so inside our this gesture detector we have this child here we can Skol new custom paint which is a widget custom paint okay it takes few things like it has a custom painter so we can say painter and here we can pass our signature painter which we just made it also takes a size and we can give it a size of let's say in finite okay now we are ready so now let's try to draw something oh nothing happening oh why okay so let's see what's the issue here so this this is I guess we are done let's just try to restart the application because it may have some kind of issue with our approach so let's see if that works or not and and and it will take few seconds sorry for that it is running our application a cane okay so we are ready with this and now let's try to drag nothing is happening so we must have left something or we are doing something wrong so how we can fix it so we need to see why we are not able to draw anything and we are getting some kind of error also so let's see what kind of error we are getting first of all so you need to be you know we are with the what kind of so here it is saying how this error is not quite readable if I if you will ask me so what we can do now so we'll go through the code again and we'll see what we can find out so let's see here in our core our custom painter is looking nice we don't have any problem with the custom painter as of now as far as I can see and then we have this paint which is fine we are drawing this line which is fine I guess there should not be an issue with this now let's go to our this scaffold we have this container it is looking fine again and what's what's the problem then okay it is looking good and oh yeah everything is looking fine to me let's see what else can be the issue no no issues okay oh so on drag details we have we should have this on point start add null okay we have set it equal to null which is not correct so now it should fix this now we are not able to draw ok what's the issue then maybe our list is blank ok we need to initialize this as well so why forgot to initialize it that can also be the problem ok now if we still not able to write anything what's happening today so I guess we have done everything which we should do let's restart again maybe oh the thing is guys one more issue we are not passing here the points okay so we need to pass this points why we may make them at the first position so let's pass the points ok that's a very terrible mistake I did okay now it should work let's rip into this application again one one more time guys again trust me one more time and then it should work because other thing is that though it cannot draw until it has some kind of points okay so maybe that's this situation that's the problem should fix now let's see okay so we are ready with this okay so now let's try to draw something and guys this is working now okay so you can see I can here sign okay now let's do one more thing we need to clear it so below this body this container we can use a floating action button and let's say new floating action button here we can say the child as new icon and we can say icon start clear is something yeah so we have this and on its own pressed we can get the property of own pressed what we will do here we will clear at this point okay so that's done now let's just click on it and yeah the our screen is cleaned now now let's just do one thing which is let's draw my let's try to draw my signature which is a kind of like this and yeah it is working fine it is looking amazing okay guys and again it is looking fine and again it is looking fine okay so this looks good guys I hope you liked it now let's do one more thing last thing let's run it into our iOS device as well because you many people will ask whether it will work on iOS or not so before do you ask that let me just run on it so let's just go disable this and then we will update this code to github as well so source also and guys you can for the meantime let me just show you you can go to this I am uploading this so you can just go to my account github.com slash IM / 1 and here you can find this flooded example apps where you will have this YouTube channel link Facebook group link all the apps with their source code and the they are YouTube tutorials so I will provide the link in the description you can always visit here it also have 135 stars which is quite appreciable so thank you so much for the your contribution now let's run this project on iOS and let's see whether we are going to improve our achieve anything or not so it should work because that is the beauty of flood or it will work for both Android and iOS so let's just wait for a few more seconds and we will be ready to go because I am doing live implementation I don't edit the videos so that is why I take few seconds of yours which is I guess wasting your time but again I don't have much options because I try to you know utilize all of my time and now we are into iOS let's try ok guys this is looking good right and now let's just press this cross button now we can also change the color okay so let's give it a read okay now let's try one at once again and you can see now we can increase its width or decrease let's say we increase it to 15 what will happen oh my god this is looking like a color screen okay now let's make it to just 2 so it should be very much yeah you can see it is not that much bold ok so that is all the things you can do you can perform anything now last thing is will be the color I am again you wanna change the color and I'll make it 10 maybe okay so let's just delete it and now you can see it is working fine Lara okay so that's it guys I hope you enjoyed this video thank you so much for giving your time and learning with me some the wheels I'll see in the next video please do subscribe to the channel if you're not already subscribed and if you enjoyed the video then like the video if you did not then you can dislike the video bye bye take care and keep fluttering