HomeTutorialsSocial Media Buttons in Flutter Web

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. 
  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



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.


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(
                             mini: true,
                             onPressed: () {
  • 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 : 

Related Articles

Latest news

How To Fix Snapchat Support Code SS06

Every Snapchat user cherishes the joy of sharing moments, using filters, and connecting with friends. However, this joy can be interrupted by various glitches...

Can You Refund Fortnite Accounts?

Fortnite, the battle royale game developed by Epic Games, has taken the gaming world by storm since its inception. With its captivating gameplay, interactive...

Fortnite Battle Pass: Unlocking the Secrets of the Season

With millions of players worldwide, Fortnite is a game that has taken the world by storm. One of the game's most captivating elements is...

The Best Mario Kart 8 setup for 150cc in 2023

Mario Kart 8 has been a fan favorite for years, and with the release of new tracks and updates in 2023, it's more exciting...

AMD Radeon R9 M270X Review: A Powerful Graphics Card for Your Laptop

In the ever-evolving world of technology, having a powerful graphics card in your laptop can significantly enhance your computing experience. One such graphics card...

Stay in the Loop

Get the weekly email from Android Hire that makes reading the news actually enjoyable. Join our mailing list to stay in the loop to stay informed, for free.