Flutter Tutorial - Create Social Share Buttons | Share Text, Link | WhatsApp, Facebook, Twitter

how to create social media share buttons for your web application and also for your mobile application in flutter on your mobile phone he is always trying first of all to open the app on your device if it is installed and on flutter web on the desktop platform he will always open then the website instead let's use the url launcher package for sharing data with other applications and websites let's start with the social media buttons directly here at the bottom so we have every time here a social media button and if we click here on one of these buttons then we call a method share and inside of this share method we get then first of all the social media platform to which we want to share and secondly we also define then all the data that we want to share so in this case a text and a link next we create then a map of key value pairs so here we have as a key always social media platform and as the value the link which is used for sharing our data with this social media platform and inside of this map you add then also all the other social media platforms that you want to support and here inside you put them every time the link inside of this specific website to share your data with and finally you can combine this urls map with the social platform on which you have clicked here at the bottom and therefore you get simply over the social platform and the urls the url of one specific platform on which you have now clicked and lastly you want to open then this url up on your phone or your browser and this is what you do with the launch method of this launcher package and you also need to check here if the url is launchable with this statement and with this i can click here on any share button and then we share our data with this specific social media platform so in this case he has opened up twitter with this url and here we have then defined the text that is here shared at the top and also the url that you see here below which is also shared with twitter and the same works also with the other share buttons so in this case we have opened here up our email program and this is what we have done then with this url and here we have then defined first of all the subject which is displayed here at the top the text which is then here also displayed with the url that is displayed at the bottom let's also look here at the whole implementation so here within our body property we create then first of all this article which is displayed at the top and within the bottom navigation bar we display then our social buttons and therefore i have created here a row with all the social buttons that are displayed here then at the bottom and to display our social buttons we use here this font awesome icons to get here first of all the specific social media button icon and within this build social button we simply create here a simple button that is then simply displaying here this icon which is then here displayed at the bottom and to make use of the social media icon you also need to go to your pops back yammel file and here under your dependencies you want to include then the font awesome flutter package for displaying the social icons and secondly also the url launcher package for opening up then the social media links for the different platforms on your phone and on your flutter web application if you also like you can make your social media share buttons also more responsive for your flutter web application so in this case we display it here on the left side if it is a large window otherwise we display it here at the bottom if it is a smaller window therefore we simply use here the media query to determine if our browser window width is here greater than 600 pixels and if this is the case then we set here this boolean flag is large to true and now depending on this is large field we show then a different scaffold and here within our body property we display then first of all the social buttons on the left side and on the right side we display here then the article and otherwise we also have here the not large window and this is then the same as before we display then our social buttons within the bottom navigation bar instead and by the way if you want to get here this whole source code of this application then you can get it with the first link in the description and with the second link you can get access to my flutter courses where i teach you how you can become a better and more efficient developer if you like this video make sure to subscribe to my youtube channel [Music] you

Channel: HeyFlutter․com

Views: 24,131

Keywords: android, flutter, flutter share, flutter share facebook, flutter share file, flutter share image, flutter share image and text, flutter share plugin, flutter share screenshot, flutter share social media, flutter share text, flutter share whatsapp, ios, share, share data with app, share data with other apps, share image, share in flutter, social media, whatsapp share flutter

Id: bWehAFTFc9o

Length: 4min 45sec (285 seconds)

Published: Sat Sep 11 2021