Flutter Tutorial: Drawing App (CustomPaint)

foreign [Music] ships like triangle I'm sorry rectangle and circle then the Eraser so yeah so let's let's get down to the code to successfully follow this tutorial you need to have a basic knowledge of custom paints if you don't have a business owner you have custom paints I recorded a video previously on that custom paint physics I will be linking that in the description below please make sure you check those before you continue with this first things first I have created a UI basically like a UI for this uh I should probably run it so you can see what we have so originally a bunch of code already for the UI um you can see the material Hub that's the own page the training page the training page basically the hook widgets I'm using the hook so I can access all new States and um this is car fold your scaffold in this car forward we have a stack the houses the house is three things basically first of all the canvas which is this then the sidebar so the canvas the canvas the sidebar and the up bar um so as you can see from the UI that I've created already this is the up bar right here then the sidebar this that is coming from the side and then we have the canvas which is basically this smoke white background that basically does nothing for now um so what our Focus here would be the canvas so this this account versus right now it's just a container that will be written will be basically building out very soon uh so to start this let's start by um recently custom paints widgets the custom pins that's a prediction a painter um and come here completely paints are called a sketch painter extends custom painter then create the override um sorry the overwrites uh here we can return true and here so here we can put a sketch painter here so for now sketch painter does nothing so custom paints which is still still basically blank everything is still blank um what we need to do we need to capture the coordinate so let's say we want to do like a script on the screen now really the user is maybe putting their finger on the screen or like here raising a cursor and it starts moving the cursor around we need to record every single coordinate that the cost of pass through and save it somewhere this is how we are going to you know draw whatever we need to draw we use the code needs to basically draw the canvas so to do this we need to use we can either use a gesture detector or a listener I personally prefer to go The Listener for this tutorial but before that let's wrap our our custom Pinter with the size box okay um so the height and the width is coming from the drawing page which is basically media query dots size.vid and media product size those Heights I think we all know what that means going back to the canvas uh foreign we can use a listener so there are three major there are three major functions that we need here on pointer on pointer down [Music] on points are moving on pointer up so you might be asking though what's to this what do these things do what do these components are down or points are move and I'm going to enter up to so first like I said we need to record every single coordinate as we are moving the cursor maybe the cursor over here on on a desktop using the web or your your phone using your finger on the tablet isn't it you know like a pencil a stylus so what this this thing is do on point set down is when the um whatever let's call this course or this style of this finger that's called The Pointer whenever they call the pointer is down so let's say you want to start control you want to start driving immediately you put let's say you click that is going to point that down so the cursor is basically down there and the pointer is down then the on points and move is after you put the you know you click you put the pointer down and then you start moving around that doesn't move and immediately you release when you release you let go of the pointer that's the one pointer up so we need to know this three to get the coordinates and then maybe store and then store them somewhere so yeah let's do this so points it down details um so to get the position of of um you know the points are basically needs to go through a bunch of things like uh find the render objects then kids um when we get doing their object as a render box we can then get the position from the so find under objects in that box and Global local so now we have this here we have our offsets we can copy this exact same thing and close here the point set down on the points are moves sorry and the points are up sometimes similar don't be needing the offset for the points are up we get we'll get to that later so now that we have our offsets here and whatever offset we have our offset so how do we store it how do we store it so personally um what I did was to create a model called sketch so here I have a class it's an empty class for now uh we need to you know we need to make it a a model so we need a bunch of things in this model first of all is a list of a list of top sets so each each scribble each sketch is going to have a bunch of offsets a bunch of points a bunch of positions in it and also let's say color for example color and size my Constructor okay so we have those there I have a model sets list of points um color and the size so we start with that and here so what we need to do here someone is doing on the canvas is to have two different things first of all we need to have a variable for the current the current sketch so as the user is moving yeah cursor around they are pointer around we need a variable for that that stores that and then we need to have another variable that stores all other sketches so when I draw let's say I draw a triangle now it's going to get stored in all sketches when I draw a circle is going to get stored but as I'm drawing a rectangle this can store in the current sketch I don't know if I hope that is make that's making sense um so I already created most of these variables um in the drawing page uh the host the current sketch and the whole sketch so they are basically you state value notifiers for sketch current sketch is a sketch knowledgeable and then all sketch is a list of sketches so start by we just start by populating the current sketch alone for now so what we'll do for that is current sketch dot value that's value because it's a value Notifier sketch so now we need to add all this the size points and all so um for the size I think we should default our size to let's say 10 and then the color for now we can default it to uh black so that means we don't necessarily have to put those two just need to focus on the points so for these points what we just need to do is to create a list and then dump this offset into it very very very easy very very easy so now that we have this our our canvas is still not showing anything when you would remove our points around that's because we need to we still need to implement the paints in the uh in the coastal painter so to do this we need to teaching a list of sketch it's called sketches which should be required so now we need to now act using this sketch this sketch is how we are passing to our custom paints are so here let's put sketches uh should be basically current sketch dot value oh that's not gonna work okay um I guess we can do something like sketch those values equals to null um but I think that should work yes yay it's working um so now the scene is Implement our pins which is basically the major aspect of this the custom paints is the major aspects so first of all the first time we need to do since we are passing the list of a list of sketch we need to look through it sketches uh final once you get the points in this case we should be sketch Auto coins right for now one one of the things we need to do we need to go to our path and of course path that's moved to which is always the first time you do so the first points the x of the first points I'm going to do y of the first of the first points foreign points next thing we actually need to move the points around move the path around probably using line two or quadratic bezier to or something so uh but this we need to it will look through the points also so first of all we'll look for the sketch sketches then now we need to look for the points okay foreign [Music] X because P1 was the X divided by two oh zero not the old P0 5 that's one okay P0 that's the Y mp1 plus the Y so now that we have this we are basically almost good to go but now now all we just need to do is to just install canvas dots control which is the most important part paints so call law should be since we're already having colored for broadcasting in our sketch we can use that and also stroke width uh sketch the size then stroke cup yesterday Brown stroke cut most of the time foreign path and hopefully you will have something on our screen so after saving after reloading us reloading uh nothing is happening that is very very weird um let's do a little bit of the plugin oh okay it seems we didn't supplement the own pointer move oh my God okay um so to do this we just need to do a list of points should be equal to [Music] um current sketch dots of value dot points yep no other current offsets so what we are doing here is once it gets the current sketch the all the points in the current sketch and add the current offsets to it so I guess you know the points of the current sketch here you know and then we're adding the offsets that we're getting when we're moving to it foreign doesn't look good but I know the reason why so we need to have a our style to be painting Sprout of stroke so now before we move around yeah getting something on our screen well after withdrawing this we tried drawing something else the previous one leaves that's because we still need to implement all the paths remember I said something like oh we're going to have some we have um the old the current sketch and the old sketches so for now we've only implemented the current sketch so now let's go ahead and do the uh all sketches first we need to move this and so let's see [Music] um widgets currents let's call it computes occurrence path pictured on the widgets we have so now we need to quickly start here so build current path will be here for sure I guess an error here oh there is no context so oh well that's been okay uh just in the past the context yet and it's a panic okay great um yeah so that's the stuff for the currents so now to build all path that is kind of like the easier the easier thing to do or we just need to do let's also do some lighting widgets build all paths return this time around we don't need a listener or if no we need is just this part of the code repeats boundary the size blocks and the custom paints of course and what we need to have well we just what we just have here is this time around this whole sketches of the value okay so did our path should oh think there's a typo somewhere now we just need to populate values into the old path so to do that we need to do that we need to do it in the um on pointer up here but just to explain what I'm doing currently so what I'm doing is I'm getting everything that is currently in the all sketches lists and then adding the current path the current sketch to it so this way every time you do a sketch it gets added to you know the list of all the sketches and now the free throw everything stays withdraw everything stays everything stays everything stays so the next part after this we've done uh we just need to add let's experiment around adding size and color to our scribble so for this I have the sidebar sidebar has um it has all this that we need the okay where is the color so the color there's a color palette that I built already which is this right here the color section here so I'm already I already have um a hook for the Colo which is this here select the color that is coming from this sidebar so from this color palettes immediately anything is selected so the color gets updated at once so all we need to do is just access this selected color and um here you can have color selected color dots value same thing goes for 1.7 move so now let's let's test what we have so now I will just just choose the blue the material blue color right here and try to move it around now we have the blue shade to Red it goes same thing um green we have green so if you want to choose a let's say a custom color you can come here maybe put in RGB here or something just move around and voila we have this column for that we have this follow um yeah that's the above for the color for the size also there is this slider here for the stroke size so this stroke size everything is already down here um I have a stroke side that's coming from the canvas um the sidebar the canvas sidebar stroke size the slider stroke size of value is equals to new value and they haven't changed and then here you can just have just the same way we did the color we're going to start with size struct size of the value same thing they'll move so here you can try using the material blue draw something now increase the size throw it's bigger increase the size again true now we have something really nice foreign our canvas we also need to erase right so for the Eraser it's actually pretty simple what I did was um I used a regular scribble right so this is a scribble it's called the scribble so I used a regular scribble but I just set the color to be the color of the canvas so when we have let's say we set the color oh okay so we have a we already have a session for the tools here and the Eraser so is something like drawing mode that's that's eraser so try model series so what we can do here is to come to this color uh which is something like I think it's already passed here which is drawing mode so if this drawing mode was valued it's supposed to train mode that's eraser then we need to set it to the countless color so the canvas color is coming from the main file already defined it here so of course we need to do the same thing for the unmove so we have okay it's loading some scribble here stroke size to this and reduce and now we need to erase all we basically need to do is to just select the user too and erase it out so like I said the Eraser is basically a scribble also but using the color of the canvas so it blends with canvas makes it look as if the oh the previous sketch that is gone also we have the Eraser size oh can you implement that also it's basically there is a size is here it's just the same thing like the color so if the drawing mode is equals to count is equals to eraser in a razor size that's value or is it something for the um let me find that down so now we have we have the easy things ironed out we have a we have our um we have our uh scribble and color scribble with color scribble with size different colors different sizes and then the eraser also the Eraser size now the next thing would be to draw the line so we have to do the shapes we start from the line and go to the circle and then we go to the rectangle foreign if you made it this far into the tutorial please comment below on the things on the topics you want me to create videos on next thank you so to draw the line all we need is our first point and our last point because we know a line is just the distance between the starting points and the ending points um so to do this uh we need to actually we actually need a variable here a value here that tells us the kind of sketch we are doing so since we are now having scribble we are having line we're having rectangle and we have in circles so I think it makes sense for us to have like an enum let's call it a sketch type people line rectangle and circle right so now we can have us final sketch type let's call it type so by default it should be a scribble by default okay um so let's go back to our account let's a painter so now that we have different um different types of sketch scribble line rectangle and circle we ought to we also have a condition to handle every single thing so we can use an if statements or we can also use a switch foreign I think I think an if would do pretty good right now so if the sketch the type is equals to scribble then this is exactly what we need to put in there right else let's say Lane all we need here is canvas to draw line so console draw line we need um the first points and last points so let's just throw it sets first points first point is uh definitely sketch those points those firsts it's that simple and then we have we also need last points sketch those points that's last basically so put our first points here the last points here oh my God okay so now we need to let the sketch know that it's a line not a scribble here so we have um the drawing mode already here or we can just have thank you inside right [Music] so switch drawing mode case I'm trying mode dots line for example you want to returns sketch type this line case train mode dots so let's see Circle return Circle maybe the same thing for square and then we do it private defaults so defaults would be of course scribble so we have to copy those code also for the arm move sadly because Canada and this can be cleaner than this for sure but for now I'll just leave it at this so now I will select line and move around we get lines another dot lines change the scribble it gets screwable we change it to rectangle nothing happens because we've not implemented that Circle if nothing happens so now that let's implement the circle and then the rectangle uh so now Circle so for Circle um I think this should be fairly easy dot draw overall draw overall so draw vertex and directs your breaks so we can just basically just put our rates put our rates from points [Music] um basically first points I lost points and I'll try this we have our our circuits are working already custom paints custom painter is not oh that's scary I mean it is quite complex but not all that's scary everyone should try once in a while and then we have the last thing which is the rectangle um draw Reds I believe foreign [Music] it's perfect and also we can apply colors to these and apply colors and apply colors also change the size same thing goes for the circle glycolors five colors and this series let me give the erase everything we have on the canvas okay so this is that's that for this tutorial thanks for watching if you enjoyed this wherever lens one or two things for me that list please comment below let me know what you want me what you want me to to record it around next thank you thanks for watching stay tuned for the next one bye

Channel: JideGuru

Views: 14,769

Keywords: flutter, flutter tutorial, flutter custom paint, flutter drawing app

Id: SmqttvYdkHI

Length: 38min 2sec (2282 seconds)

Published: Wed Nov 16 2022