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.

Social Media Buttons in Flutter Web 1

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. 
  1. 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 )
  1. 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 : 

Avatar
Rishabh Sharma
You can find me on Github & LinkedIn

Latest news

Everything about Android Latest Version

When Google launched the Google Android-powered Nexus One telephone on January 5, 2010, Jobs, Apple Chief executive officer responded to that development in a...

Use of “Services.dart” Package in the Flutter

We often come at a point where we need some flexibility, in our app UI. so in this blog, I want to...

One Plus 8T: All you need to know!

One Plus unveiled its 2020 flagship in a virtual event named One Plus 8T. In this post we would go through its...

Twitter may launch new features to simplify direct messages.

Twitter is said to be working on a couple of new features that could make it easier to manage direct messages...

Related news

Everything about Android Latest Version

When Google launched the Google Android-powered Nexus One telephone on January 5, 2010, Jobs, Apple Chief executive officer responded to that development in a...

Use of “Services.dart” Package in the Flutter

We often come at a point where we need some flexibility, in our app UI. so in this blog, I want to...

One Plus 8T: All you need to know!

One Plus unveiled its 2020 flagship in a virtual event named One Plus 8T. In this post we would go through its...

Twitter may launch new features to simplify direct messages.

Twitter is said to be working on a couple of new features that could make it easier to manage direct messages...