Make Anything in Flutter using RenderObjects

being able to control anything that is surrendered on the screen is one of the biggest selling points of flutter and we can do this mostly with the widgets that is already built in and using things like the custom painter if we want to take things a bit further so let's say the widget doesn't really exist and custom painter doesn't really fit our use case well one thing is that widgets doesn't actually paint anything on the screen that is what render objects does so a lot of those widgets that you are using is already behind the scenes using render objects instead so now it's time to deep dive into how we can use a render object now to create render objects we have access to three different ones to make it a bit easier we have the single child render object widget the multi-child render object widget as well as the leaf render object widget now in this video we're going to use the leaf render object widget to create this design now if you really want to dive deep into this kind of things i recommend this video by creative creator or maybe not he has a very deep knowledge of this kind of things and has created some amazing videos i also got this specific video inspiration from this medium post so if you want to learn more about this as well you can check out that post and before we begin make sure to smash that like button and subscribe as well as checking out the full written guide over at robertprinthogger.com so here we have a normal application where i've just deleted the counter example we'll start off by having a container in a center and giving it some width i will also have a background call of brown as well as creating the progress bar now this one requires a dot color thumb color and as well as the thumb size now to create this class we have to extend the leaf render object widget so here we just have the variables and the constructor for that this will help us configure a render object without any children so we have some methods we have to override the first one being the create render object the purpose of this one is to return our real progress bar which will define with prefixing it by render and the same as before we just pass the dot color thumb color and font size now that will handle creating the actual render object but now we also have to handle when values are updated so we override the update render object and set the type to render progress bar here we just make sure to change those actual values in the render object we will also add debug field properties with our different variables and this will help in the tooling when we want to see the different values now we can go ahead and create our render progress bar class now for this one we'll extend the render box which will render a object in a 2d cartesian coordinate system so in simple terms just rendering something that we want to paint now we're going to use private variables for the dot color the thumb color as well as the thumb size the reason for this is that we actually want a setter for these values so in case if we set the value which is already is we don't do anything but if it is different we will assign it and then mark needs paint and this is marks that we need to repaint this actual render box to not take too long of that time here i will just copy this one and change out the variable names to represent the different variables we actually have so now anytime we actually change these values we will repaint this render box which is crucial for actually being able to change values and it will re-render now another crucial part is that we have to override the perform layout this one will determine the size of this render box the parent well the container had a constraint of 500 pixels to the width we are going to say that this child should take the full width of the parent which means that this render box will always try to be the same with as the parent for the desired height we're going to use take the thumb size and take that as a height now when we have the height and weave we're going to create a size variable so when instantiate the a size we pass the desired width as well as this desired height now the reason we do this is because we can set the size coming from the render box and now we can use set the constraints to this desired height and width which is now the sized variable and this is actually key part of the explanation of constraints go down sizes go up and parents sets position i will put a link to the documentation regarding this getting a good understanding of this will pretty much handle all of the design and layout issues that you will have in the future now the next overriding method we have to set is the paint method so first off we just create a variable for the canvas and the next part is a bit more tricky but what we have to do is first save the canvas the reason for this is that we can later on restore the canvas and the canvas is everything on the screen that we are going to paint and to start off this is actually the full window but what we want to do is actually translate it and making it the width and height of the parent widget which means the width of 500 pixels and the height of the actual thumb size so we're just going to pass the offset.the as well as the offset.dy and right now we don't actually get any compile warnings or exceptions anymore and we can see our widget or parent painted so right off now we haven't actually painted anything that's why we only have the parent shown so before we actually paint we have to create the paint we're going to start off with the paint we're going to use for the dots to do that we instantiate a paint object and set the color to our dot color after that we set the stroke cap to round as well as the stroke width to 4. we will go ahead and copy that and do the same for the actual bar paint but we will change the color to red instead so now we can actually go ahead and do the most exciting part which is painting so what we're going to do first is that we want to have some spacing between the paints that we are going to add so to do this we just take the width of the full container and then just divide that by 10. now we can go ahead and loop 11 times the reason for this is because we actually want to paint 11 times so for every dot or line that we are going to paint we are going to define a upper and a lower paint this is going to define where we start painting meaning the upper point down to the lower point we do this by defining a offset and then adding spacing times i and then we can set the height and we want it to paint pretty far down so we're going to take size.height and do it times 0.75 if we add 0 that is going to be on the top of the container now we go ahead and define the lower point which is also going to be a offset this is going to be almost identical to the upper point the only difference is that we are going to take the full size dot height meaning that we will paint to the bottom of the container and now we can just start by drawing the actual line that we want to draw to do this you can call the canvas object and then call draw line there we pass in the upper point and the lower point meaning in point 1 and point 2. the only thing left now is actually passing the paint that we want to use for painting and we're going to use the dot paint we created here we can see the container and now we'll see all of the dots that we have painted out so the next part is that we want to make the first point middle point and the last point be a bit taller and this is probably easier than you think so let's head back to the code so before we actually start drawing each line or dot we're going to add a if case and we're going to make it so that if i of modulus of 5 is equal to 0 meaning the first one the middle one and the last one so if we are in any of those iterations we're going to change the upper point to be a bit higher up and as the upper point of this one is zero we're just going to take size dot height times 0.25 meaning from the top and then 25 down now all of these points are now taller up so we can go ahead and start with the actual thumb that we're going to create so by scrolling up we can define a new double let's call it current from value and we're going to default it to 0.5 now we can go down to the bottom of the paint method again and start pasting that thumb now this thumb is just a name for it it's actually used a circle so first off we define the paint for it and this is just going to be paint where we set the color to the thumb color now in the horizontal plane meaning to the left or right we have to define where in that spectrum it's going to be so we're going to define a from the x value and we are going to take our value which is from the value 0 to 1 and just times that with the size dot wieff that means that this thumb dx will represent the pixels from the left to right where it's going to contain in the parent so now we have the horizontal view of where this paint or thumb is going to be now we just have to define a offset for the vertical and horizontal value together so the horizontal one being the thumb dot dx and the vertical one being in the middle so size dot height divided by two now we can use the awesome methods on the canvas called draw circle this used requires the offset which means the center variable the radius which you get by taking the thumb size divided by two and then in the end use passing the paint so now if you remember in the beginning we used canvas.translate so now we will use to restore that value so now looking at the website we can see those first value middle value and last value of the dots are actually taller than the other ones and when we save our changes we will also see that thumb button now we can't actually do anything with that because we don't handle any hit values for the render object but before we handle that we are going to draw one more line which is going to be from the far left to the actual dot to make it seem like a bar for the value or the percentage that we are going to drag that thumb so the first point is is going to be to the far left in the middle in the vertical axis and the point 2 is just going to be the middle of the vertical axis and then the same position as the thumb now the order of where you start drawing and when you stop drawing is important because if we switch position of the canvas draw line and draw a circle it means that the line would be above the circle which we don't want we want it to be behind it so now looking back at the website we can see that that line is drawn and now you can see why we want it to be behind that thumb or circle but now let's start by handling how we can drag that thumb we'll define a horizontal drag gesture recognizer and just calling it underscore drag we're going to override a hit test self and set it to true this just means that the render object is handling heat detection and to handle last hit detection or handle event we are going to override the handle event method now in the if case we can just set it to if we want to handle the point down event or any other kind of event we will handle the point down event and used calling the drag variable and just adding a pointer vent now we didn't actually instantiate that underscore drag variable but that is done in the constructor so let's do that here by just assigning it to a horizontal drag gesture recognizer now on this object we have two different methods that we actually care about the first one being onstart and the second one being on update both of these give a parameter that we are going to call details the first one is a drag start details and the other one is a drag update details we're going to use them in the same way so we're going to define a method to handle both of them we're going to call this update's thumb position don't be scared that it's red right now that's just because we haven't implemented the actual method we're going to pass the local position coming from the details and we're going to do the same in the on update now if we scroll to the bottom we can start by implementing that method called updatefun position we're going to take a offset which we call local position i'm going to add some comments here so you can read through it and get a better understanding if you didn't follow but we need to clamp that horizontal position so we'll define a new variable called dx we'll take the local position dot dx and just clamp it between a lower point and a upper point the lower point is far left which is zero and the upper point is to the far right which is size.width now we don't care about all of the different decimals that we will get because we want it to actually snap to those dots that we created and they are on like 10 percent and 20 or 40 percent so we'll define a variable and then parse that value that we get so the x divided by size dot with and we can now do two string as fixed and we'll get a one decimal value so now this current value will be from zero to one which is zero percent to one hundred percent for the actual slider we now need to use the call mark needs paint and marking its semantic update now looking at the website we can see our slider and now when we drag this we can see that it's snapping to all of those dots or lines that we have created so used to spice this up a bit we're going to make all of those red when we actually pass it with the slider to do that we go up to where we actually draw all of those lines and we're going to define a if case we're going to select just either the upper point or the lower point of that current iteration we're going to take the width of that offset and just say that if it's less than or equals to the current thumb value of course we have to times that with the size.width to get the pixels for it but if it's less than or equals to the value of where the thumb is we're going to use draw some more lines on top of the lines we already have and this lines we're just going to make red instead to make this simple we're just going to reduce the bar paint in this case and of course don't forget to make an else case for the other draw line or else we will use to draw over what we actually just did so before looking at the example we'll just remove the brown color for the apparent container and now we can actually see the whole implementation see here we have the slider which is snapping to all of those points and it's making them red if we pass them and blue if we haven't and now if we change the width of the pant container to 400 we can see that it scales correctly if you like this kind of videos make sure to like and subscribe to the channel and if you really liked it consider supporting me either on buy me a coffee or patreon where i have a bunch of different perks and of course if you want to see more of this kind of content make sure to click one of the videos coming up on the screen right now and i will see you in the next one you

Channel: Robert Brunhage

Views: 16,511

Keywords: Flutter, flutter renderobject, flutter paint, flutter custom design, Flutter custompaint, flutter widgets, flutter expert, flutter deep dive, flutter tutorial, flutter custom widget, flutter renderbox, flutter renderbox example

Id: uC3sL5SmizM

Length: 16min 10sec (970 seconds)

Published: Sat Feb 27 2021