Social Media Buttons in Flutter Web

Social media buttons on websites are not a new thing. We all are familiar with them somehow. We can find it on every website or now even in mobile apps.

So let’s just focus on how flutter helps us creating these amazing social media buttons.

There may be many websites, videos, or even articles about this very topic. But I am just sharing whats the easiest way to implement Social Media Buttons in Flutter Web.

But before we start with the coding part. Let’s just see what happens behind when we tap or click on these buttons.

Suppose we tap on twitter button above. There will be two logics working behind.

1. Onpressed: ( ) { }: when we tap on such buttons there is a method like onpressed or ontap that will tell the system that the button has been pressed. 

2. URL launcher: There will be a Url launcher logic working behind the onpressed method. That will take you to the desired link. In this case twitter.

So now the question is where do I get these social media buttons. Well, in this case, we have two methods. Either you make your own buttons which are flexible. Another method is to use a  package: flutter_signin_button

Must Read: Current Location in Android using Kotlin

For now, we will use this really helpful package. In fact, two packages remember the URL launcher we need.

Pubsec.yaml dependices: 

1. flutter_signin_button 1.0.0  

          (link:https://pub.dev/packages/flutter_signin_button )

2. url_launcher 5.5.0

(link:https://pub.dev/packages/url_launcher)

IMPORTANT NOTE:

Also If you guys are new to Web development through Flutter. There is some prerequisites stuff you need to do. That part, I am dropping some links that might help you.

Resources: 

1: PubDev: https://pub.dev/packages/url_launcher 

2: Youtube:https://www.youtube.com/watch?v=WkWS5YAwU48

 Enough talking, time for coding:

After adding the dependencies and importing both packages.  Its time for writing the code.

• Sign-in Button method from flutter_signin_button 1.0.0  .

......///
          child: SignInButton(
                             Buttons.GitHub,
                             mini: true,
                             onPressed: () {
                               _launchURL('Github');
                             },
                           ),

• Buttons.<Any social media> // you can add any social media button available in the options.

• Mini: True // This will provide you with the mini-buttons of social media.

• onPressed: ( ) { }  // When the button is pressed what function it should perform. (In this is have called _launcherURl ( ) )

• For more buttons re-write this code block for each button.  

• URL Launch function using url_launcher 5.5.0.

.....//// 

_launchURL(String value) async {
   const url = 'https://github.com/atrishabhsharma';
   const url2 = 'http://linkedin.com/in/rishabh-sharma-1a1184160';
   const url3 = 'https://twitter.com/voyager_sage/';
   const url4 = 'https://www.atrishabh1999@gmail.com';
   if (value == 'Github') {
     if (await canLaunch(url)) {
       await launch(url);
     } else {
       throw 'Could not launch $url';
     }
   } else if (value == 'linkedin') {
     if (await canLaunch(url2)) {
       await launch(url2);
     } else {
       throw 'Could not launch $url2';
     }
   } else if (value == 'twitter') {
     if (await canLaunch(url3)) {
       await launch(url3);
     } else {
       throw 'Could not launch $url3';
     }
   } else if (value == 'email') {
     if (await canLaunch(url4)) {
       await launch(url4);
     } else {
       throw 'Could not launch $url4';
     }
   }
 }

In this logic, you can add or subtract as many numbers of buttons according to your need. Mostly we will see this buttons in Rows( ) or Columns( ). So that might give you an idea about it.

Special Thanks to : 

• Dart Packages: https://pub.dev/