Flutter Share Files & Text From App | Flutter Tutorial (share_plus) Whatsapp, Facebook, Instagram

in today's video I'm going to be showing you guys how you can share text as well as files from your flutter application onto any other application that the user has installed on the device we're going to be taking a look at using the share plus package to achieve this functionality and we're going to be building an application that is going to allow us to share text by clicking this green button and then we can share this text with any application that's on our mobile device I'm going to be using Discord and example and then sending a message into this Channel and as you can see the message was shared and if I show you the Discord application on my computer you can see that I got a message which says check out my website and similarly we'll also have the ability to share files as well so in this tutorial what I'll do is actually show you how you can share image files but the actual Logic for sharing files will remain the same regardless of what the extension of the file is so let's just say that I want to share a file and I click on it and it shows me our Gallery I select that I want to share this picture and as soon as I do that it's going to go ahead show me the sharing popup and then I'll be able to select Discord and send the message to wherever I want to send and this should apply to all other applications as well so with this said let's get going and let's see how we're going to be doing this so to get started the first thing that we're going to be doing is actually taking a look at the dependencies for this application so we're going to be using two different dependencies to build our application the first is going to be the share plus package which is going to allow us to basically implement the sharing functionality within our application and as always links to the resources that I mentioned within this video as well as a link to the source code can be found in the description below so feel free to take a look at it if you're confused at any point so I'll copy the share plus I'll come back and then I will come to my pop. yaml file and here under the dependency section I am going to be pasting share plus now that this is done we're also going to be using the immer piage package and this is just an optional package we're going to be using this to access the devices gallery and then extract the image from there so that we can test our file sharing capabilities so copy it come back and then I will do the same thing where I'll come to the dependency section and add it like like so and do command save now that this is done I'm just going to make sure that flutter pump gets does his magic and downloads these packages and makes them available to be within my application and once this is done then we can start debugging our application welcome back everybody so now that flutter pump gets it done this magic I'm going to start debugging my application to make sure that it runs on the simulator and if we have any errors or not and then I will resume the video Welcome Back everybody so now that the application is actually running out the simulator we can begin the actual coding process what I'm going to be doing is coming to my homeor page. Dart file where I've created a stateless widget which is our H page and for now it doesn't have anything that pertains to sharing information so what I'm going to be doing is coming to my scaffold and then to that I have added a body attribute which is a call to a function build UI within which I'm returning a sized box with a column within this column now I'm going to be creating a call to a function which is going to be responsible for rendering a button that is going to allow us to share text so to do that I will say that I'll create cre a function it's going to return a widget it's going to call share text button no parameters are going to be passed to it and I'll open up the function's body within this all I'm going to be doing for now is saying that I'm return a material button and this button is going to have the onpress call bag B an empty function for now I'm going to set the color for this to be colors. greed and that's pretty much it and let's do cand save let's take this share text butet come to our column add it do command save and there we go we can see the button so all I'm going to be doing now is adding a channel to this button with some text so that we can actually see what the button does and now that this is done we can actually take a look at how we can implement the sharing functionality so sharing text is very simple all we have to do is basically import the share plus package and then call a function on it so what I'm going to be doing is basically firstly marking my function as asynchronous because this is going to be an asynchronous operation and then we're going to be using the share class which comes from the share plus package and on that I'm basically going to be calling a function with says share with the result you can also do share and what basically that does is that it shares without giving you a result on whether the share operation was successful or not but the logic Remains the Same but I'm going to be doing share with result and here we can just provide the text which we want to share so what I'm going to be doing is basically saying that the text is going to be the following which is check out my website and then the link to my website like so and then to command save what I'm going to be doing now is actually basically just shaving the return value that I get from the share with result function within a variable so I'll do final result is equals to and then await share. share with result and then finally we can do print result to actually see on the console what gets printed with this I'll open up the terminal and I will navigate to my debug console and let's see if the sharing functionality actually works if I click on share text it's going to open up the share pop and here I can select whatever application I want to so I'll do Discord uh but you you can do whatever application that you want to test this out with select the place where I want to send it send it and there we have it the message was shared as you can see at 1158 so now we can go back to our application and as you can see it says instance of share result so basically we got the result given to us and I can do result. status and that should pretty much show me the status so the reason I'm showing you this is because if you wanted to reward the user for sharing something from the application then this is how you could have gone about that but that's pretty much all we are going to be doing in terms of actually taking a look at how to share text from within our application to other applications that the user has installed on their app so now let's take a look at how we can share files to share files I'm going to be doing the same thing I'm going to have a function and this function is going through a turtle widget it's going to be called share file button within this all I'm going to do is say that I'm going to return a material button and it's going to have a color of red and then for the onpressed property I'm going to do an empty function for now then what we can do is add a child to this which is going to be basically just share file and I'm going to mark this as const that I'll take the share file button I'll come to the top and I'll come to my column and add this after the share text button and there we have we have our share file Button as well so the share files what we basically have to do is firstly determine where our file is located that we want to share the logic for that is completely going to depend on what type of file you're trying to share so what I'm going to be showing you guys is how you can pick an image from the gallery and then share but you could do it in any way that you want whether that's sharing a PDF file sharing an MP3 file from within your application or from the user's actual storage this depends on you we need to somehow get access to the path of that file so to do that what I'm going to be doing is marking my function as a snc and then I'm going to do final and I'm going to do image picker and this class is going to come from the image picker package that we've imported I'm going to call it picker and I'm going to set that to a new pance of image picker once this is that I'm going to do final and then I'm going to do x file question mark and this is going to be image and it's going to be set equal to and I'm going to do await picker Dot and then I'm going to do pick image and here I'm going to set the source to be image source. gallery like so do command save and that's pretty much all we have to do so now that this is that we can actually test if we are able to pick an image so for that let's come back to our adro application Click Share file and there we have it we can see the gallery popping up so that pretty much means that this code is working as intended then I'm going to check if the image is not equals to dull so that we actually selected an image and didn't cancel the operation and then all I'm going to be doing is basically calling a function which is await share Dot and then it's going to be share x file and here what I'm going to be doing is basically passing an x file or a list of files so what I'm going to do is create a list and within this I'm going to create a new instance of an x file like so and then the path here is going to be the image path like so and that's pretty much all we had to do and then I'll add the remaining trailing Comas just to make sure that my code formats nicely and there we have it that's pretty much it while we are sharing files we can also add an additional text and a subject to it so what I'm going to be doing is just adding a text to it and the text is going to be gr picture like so and that's pretty much all we're going to be doing so now I'll do command save and we can actually test if this works so to test I'll click on share file it's going to open up the gallery I'll select this image now it's going to open up the share prompt for me with the actual text being shown as well as well as the image I can share to a printer but what I'm going to be doing is just doing Discord for now as well so click on Discord I'm it's going to open the Discord application for me and then I can select the location where I want to share my image so I'll just do the channel That I selected previously send it and there you go the image was sent as you can see and if I open up Discord on my actual local computer you can see that there I can see that the message was sent to me like so so that's pretty much it for today's tutorial the mechanisms that I've showed you for sharing text and files are going to rep the same regardless of the type of stuff you want to share from within your application as always I hope that you enjoyed the video and if you did please don't forget to leave a like on the video and subscribe to my channel so that you get notified every time I release a new video as always stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 1,346

Keywords: flutter share, share_plus flutter, flutter share text, flutter share file, flutter share plugin, flutte share, google share, share ios, share cross platform, share intent android, share data with other apps, share data mobile, advanced share in flutter, whatsapp share flutter, share in flutter, share, share image, flutter share image, sharing, share plugin, social media, social media share for flutter, share data with app, share_plus, share plus, share files, share mail

Id: _7gjq9MFD0I

Length: 9min 23sec (563 seconds)

Published: Sun Mar 24 2024