Painting with Pixels using Flutter | Flutter Tutorial

foreign [Music] right and I'll be trying to do this in Florida in 15 minutes because of this I have downloaded this image this image of this very cute card so yeah if I get carried away this image is very cute but I'll be using it for this painting with pixels um okay so to start I'm going to start this timer and once this time timer starts I will start coding let's see if I can get it to get this done in 15 minutes or if I am going to take longer it doesn't matter uh it doesn't matter how long I take as long as I get done well yeah it's good to challenge myself and it's the best um so I will go ahead and start this time now so answer this project it's just um an up bar here same painting with big cells and then I have I have the cast image here in my assets folder which I have imported here in my top spec and uh so let's let's get started then we have to do is to actually try loading the image on our canvas so I mean let's try let's create your canvas first uh let's kind of remove this and have custom paints with a child of a size box size box should have a final size close to the media query size and then price size.s Heights and reads size which we so we have this and they would have to create our painter as College pixel painter extends custom games custom paints are and then the variety of methods should remains let's make sure to paint true for now at least and we will it means things soon so you can make this we can make this our painter so the next thing would be to try to load image here so to do that we need to canvas dots draw image and then draw image fixing image offsets and paint so we can do pins which would be drastic paints and then offsets can be let's say offsets zero starting from um from the top of the screen now image we need to create an image an image [Music] of this well but first we need to think of a way to load this image from the asset if you are just to display an image an image of the screen using image of assets widgets that would have been easier but here we won't kind of visit on the canvas so it's going to be a little bit more complex and for that we need to let's do image image and then this kind of make a Constructor for that's uh required image it says image the image is flashing the image here is from Material body image we need this from that UI this one that UI so let's kind of hide image here then we Imports UIC will make it better we can see as UI so that doesn't so we don't get confused so now we have our image but now okay we need to pass image here so this is the same thing UI dot image uh let's just make it late so it should be image here so now how do we load this image well there is a way you can use Roots bundle here from Services that's you can use which bundle to load assets so that's what we're going to do so let's do we need States and then in this in these mistakes we are going to call or against creating load image and then call it in any states so let's call log image those image is going to be an asynchronous asynchronous on a synchronous function and you can do this so how do we load assets responding okay because the let's say as opposed to at least that's the C respond to dot note we have load profile new string oh let's just use loading since you just want to borrow data so load assets slash the name of the images class dot jpeg okay so that's for stats then we get the buffer data.buffer and now we need to kind of convert this to um you you ain't kind of thing so um rights yeah right so offer dots okay second one I believe the fixings with things I think the offsets invites and the length so it's a lot of offsets offsets bytes and it's a listening device okay that is good now we can do image is close to avoids the code image from lists so this is the code image from the list is going to kind of decode the image from this bytes of its means already oh this is impossible I can't I don't think it was possible literally not possible anyways uh now let's try this I think over yeah okay it's working but we're getting in late initialization it refers to us kind of creative Boolean and this is old school uh loading Solutions should be equals to false here and I'll set this thank you yeah so that is good uh let's kind of make a body exploding it's it's still loading then let's do this size box dot shrink right this is good now let's try it again so our images are carrying meaning that we've been able to successfully load you know to Canvas the draw image load it on our canvas um now the next thing to do is kind of you know something big complicated parts and wow six minutes is not good to be enough but I'll keep going uh let's do let's do this so what we need to do now is to kind of get color get the color for each of these pixels on this image and paint it on our canvas I don't know if that makes sense that's the exact thing I want to do and to do that there is a package called um image there's a packet called image of fog this package it allows it to basically you can see this Dax image Library provides ability to load save and manipulate images in their favorites in a variety of image file formats um so okay what we need to do here now is to create another image type from this is AMG from the package image dots image let's call it we can't call this image also call it image pixels right and then we'll make it required here also use those image pixels and then how so how do we get image pixels let's make its dates here also and then we can do do here so um I think somewhere here you can change I think you can probably change this image convert this image to image pixels okay let's see let's do something like image pixels close to image that's the code the code uh JPEG file okay good so you can use the bytes I think we should delete this um nope something is definitely wrong so it's saying the value of image knowledgeable can be assigned to okay so it was just about this so image pixels to be added here also four minutes left I already feel this challenge I already figured there was no other way about it so anyways let's comment this out and try to paint this with the pixels so let's look through all the pixels we have here uh let's do let's do something like integer X is equals to zero X Y X why am I using X are not I well because you know it's a position on the um it's a position for the pixel so we need X and Y if x is less than imagepixels Dot then X Plus let's copy this uh too lazy so I have to do a lot of copying y if Y is less than Heights thing y plus goes right so now that we have this this is this is good this is pretty good we have each pixels we are accessing each pixel on the uh at the canvas so let's remove the image the image out now let's draw this pixels ourselves um the way to do this would be to release it gets a color of each pixel and how do we do that I think we can use image pixel dots get yourself safe so this gets detailsafe becomes a pixel type for us I believe you have to pixel so let's do pixel I think image pixel code so here's a pixel and this pixel or so now let's do Canvas dots drop let's draw a circle and then the offsets would definitely be the X and Y that we have X dots to double because X is an integer or offset requires double and Y that's the double radios let's have a three for example and in paints you can just things this kind of runs it sounds similar we have [Music] we have black everything is black hold on pixels are black because we didn't assign color to the paints uh so let's do color is equals to [Music] color dots from argba our a which is an alpha should be one now RGB how do we get RGB from the pixel so let's do pixel dot to lists so let's have a this solid color list goes to pixel dot the list so let me print out this corner list just to kind of show something uh just 45 seconds left I think I won't be against the challenge again because I hope you come up soon possibly task for the challenge uh right so you can see here we have at least when we paint out is all of this this list is the first one is actually this is actually RGB the first one is the artist the second one is the B and the last one uh second one is the G and the last one is the B RGB so let's start printing out this um instead let's have um let's have let's print this track and then we have this one is not changing myself bonus time I think I deserve it let me give myself some point of style uh let's see I think 10 minutes is straight five minutes is still basically impossible uh yeah let me just let me just give you 10 minutes for those time yeah um so could you colonists the first one is the r the second one which is the G and the last one which is the um B so when we do this uh okay sometimes let me just kind of is going on support it's the very so where we run this we should probably get the image painted on our our canvas um okay now I'm using the tank for wasting time that's that's good oh I'm just see something try it okay okay okay okay think everything is looking good fingers crossed oh the the image should appear on our canvas fingers first think that's the best yes it's appearing but nothing weird oh okay that's because of the alpha this one which means to be 255. yes so now we have our EVS but this is not what we want to do this is a good we have our image everything drawn by ourselves using circles so everything you see here a circles if I could zoom for it for you to see it better I would but I'm not going to show how to do that so now that we have we've been able to you know paint the pixel ourselves now the next thing for us to do is to to create a list of pixels a list of offsets sorry list of offsets that's called offsets and let's make it an instant list let's dots in C group who should be true for sure and then we need to pass this list of offsets into our custom paints are um let's do required instead of six so here we can look through our offsets for offsets foreign so now that we have an offset we need to kind of get back to this game basically I wanted to do is to where we have the offsets once you kind of get the pizza off or the offsets then draw on the offsets you know we get the pixel get color then we draw a circle using that color of that particular pixel so now let's do oh six let's go with the X I think it says and obsess dot divide and then here we just need to put our offsets here offsets then this is good or okay and then um next thing will be to kind of randomly at least randomly generates offsets like we just need to pick out we need to pick out a position a random position on the canvas and then paint it randomize points let's let's call it that so this randomize points you need to create a random random is close to random right and then all we need to do is to do X because random dots next integer so image pixels that's um with okay it's X so it's me and then why that's Heights so this now we need to kind of um process dots at of sets uh which should be X dots to double and then write dots double okay so now we need to kind of call this random randomized points every frame so first let's call it when we get the image and then now we secreted ticker singles let's make the same and there's click the leads I know ticker thicker 10 minutes is almost over also wow I really underestimated this great Seeker and here we can have randomize points and States so this kind of is that this still happens it's so weird of sales percent of such rights and they kind of they're not replaced the officers to see if it's actually presented okay okay I've not started my teacher just imagine so let's start the sticker so now uh there are some there was an error just now makes sense so we need to make sure it's not loading for foreground online spines let's try that again oh nice nice nice nice nice so what's happening here is that every frame we choose a random pixel on our screen and then we paint it using the appropriate color and so you know it's like how many minutes you are going to going on I think one piece of buffering is it beats slow so let's do this like um pretty pixels covering and now each time to restart this it should be faster but more than I want to do is I also make sure I don't add the pixel that I already have so if if offsets those kind of things offsets and this change if if the offsets does not contain the current the offset that we have and we can add it else let's just kind of call the randomize again so now you can check this out you can see the customers but it's still so so let's kind of do different pictures perfect okay it's way faster now way faster uh the foreign so what if I do 100 to accept the friend so it's way faster that's right oh China is over again well I give up give up anyways so uh after a while after a while after a few frames after a few things you see that it cuts is fully displayed uh yeah so that's kind of that's kind of completes my concludes my uh my video thanks for watching if you have any questions you can ask in the comment section also don't forget to like share to your friends at subscribe to the channel so thanks for watching the source code for this video is right in the description if you notice thank you kind of see you in the next video bye but

Channel: JideGuru

Views: 1,867

Keywords: flutter, flutter pixels, flutter custom paint, flutter pixel painting

Id: 0xyLan2MwwE

Length: 27min 39sec (1659 seconds)

Published: Tue Mar 07 2023