Saving Image in Finger Painting Flutter App

hi friends welcome back to my channel on flutter a while ago we built a cross-platform finger painting app with bunch of options to be able to paint on this background image so i've been asked by some friends out there how to save this image in the for example in the image gallery so in today's uh video we'll be seeing how to save this image uh into the gallery or in the on our device so here the first thing is we will work on adding the save icon here and once i like printed uh painted this thing with my um with some colors that i chose here and clicking on this will save this into the my device so this is a files app view on my device on my android device here and i'm taking the android device example to demonstrate this code recipe and what's in the middle is here is the permission handler on android so here i will be using two plugins first plugin to request the permissions that you see here and another another plugin to save uh my this image into the my device and another one important thing i will be doing is how to save this image like how to take this screenshot and convert into the png to be able to eventually save into here in this file so there will be three things in this code recipe one thing is how to convert this whole canvas which i see here into an image into a png image how to handle the permissions and the third thing is how to save using a plugin into my device all right so let's dive into the code okay so first thing first the dependencies so as i said we'll be using two plugins one is for permission handler for android and second thing is image gallery saver plugin to save the as it the name says the save the image into the image gallery and at the ios side we will need to add this key the ns photo library add usage description key uh as a pro as a privacy policy for ios platform which explains like why you need this permission or this functionality to save to access the photo library to add something to it so these are the two things you have to make changes and now back to our code so this is the same file that we had in our first video about before tutorial where we built the whole app and what uh with the change we are doing here the first change we are doing here the stack we are wrapping into the repaint boundary widget so repeat boundary widget it may keep this list of the uh display list of these children um and so this helps us to take the screenshot of the whole um and the whole screen what we are looking at and the another thing is the global key as you see so that so we can have a global key here so why we need global key is to be able to access our uh repaint boundary widget to be able to get a reference to it and to be able to save whatever the children list underneath is so that's why we need the global key okay so first thing is taken ah care like we have a mechanism to take a reference like what we want to save so we have a heart image and then we paint on it which we did last time like in custom paint and now we want to save it so first thing is we add in the fab options we will add a uh save button fab here as as we had for another save and in the on pressed of this fab option we have save method underscore save which is a private method to this particular file so what we do in here so first thing we get the render repaint boundary uh so the we get the render object the what as uh as we just saw in the global key the reference um the screenshot uh the screen that we have ah stack or our images and what we have painted it and we get the current context and get the render object the current existing uh list of children and then what we do next is we convert into the image using this library ui so you can see this one what this ui is is nothing but it's the inbuilt code dot ui which we are referencing as a ui all right so okay so okay so we are back here so we are converting into image now the next thing what we are doing we are converting in this image into the byte data using and also you are seeing some await and async and as i said we don't want it to be blocking operation so everything is future and our asynchronous and unblocking request so that it doesn't block our ui thread and we convert into byte data we convert into byte and we can we that's where we tell it to convert into png format and we get the png bytes so now we converted our whole this image right here in pictures to is referenced by global key as a png bytes now what we do is we request the permissions to be able to write to our device to be able to store it so in android this is important so what we are doing here we are checking if the storage status is granted or not and if it's granted then if you're sorry if it's not granted then ask for the storage permission so and once if it's granted then it goes here and this is where we are using our plugin to store to the image image gallery saver dot save image and we are storing these files the png bytes to our file name canvas image you can also create a unique name for each image but here i am just using canvas image and it will get overridden every time we do it so that's all we do here so what we did three things we did we have a global key and the permission handler and the last thing is is the to be able to save that image into our uh on our device so let's see so let's run the code on our emulator here okay so we are in our flutter cookbook app and the canvas example is right here so we can click on it and can come to our canvas example we can also choose to run it from here by uh uncommenting this block okay so here is our image and say i want to paint it like this i just did couple of strokes here right and now i hit my save and it asks me permission and i allow and it's prints right now i'm just printing my file path right here so it's saving into storage emulated into canvas image so how would i look at how will i verify it in here i will go in my files app on my emulator so you can type files this is okay so this is my files um app and here that my image got updated from the last time so every time you save it there it will be updated here all right and there is one more thing that you may want to remember the and permission in the android folder so in here you go inside android and you go in the android manifest and make sure you have the read and these permissions up there to be able to save it to the uh your your device uh the read external storage and write external storage all right so that that's how we that's how we can save our images to our devices and i hope you like this video and please feel free to share

Channel: Lead Forward

Views: 5,986

Keywords: #Software Development, #Tutorial, #Dart, #dart-vocab, #Flutter, #Mobile App Development, #Android App Development, #iOS App Development, #Web App Development, #Programming, Dart, Flutter, Mobile App Development, Android App Development, iOS App Development, Web App Development

Id: GFS-6XhX-oc

Length: 9min 1sec (541 seconds)

Published: Mon Aug 17 2020