How to Implement Share Buttons in Flutter

Flutter Knowledge Sharing #46

Image: Flutter Share Buttons

Share buttons we often use in our applications. Therefore this topic is essential to know as a Flutter developer. Here you do not need more knowledge because you have used this sharing option in other applications frequently. This article is another step in Flutter’s knowledge-sharing journey. I have discussed 45 topics in Flutter.

You can use the url_launcher package to share the data with other applications. Flutter url_launcher plugin for launching a URL. Supports iOS, Android, web, Windows, macOS, and Linux.

Here I implemented three buttons for sharing an URL with Facebook, Twitter, LinkedIn.

body: Center(
        child: Card(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              buildSocialButton(
                icon : FontAwesomeIcons.facebookSquare,
                color : Color(0xFF0075FC),
                onClicked: () => share(SocialMedia.facebook),
              ),
              buildSocialButton(
                icon : FontAwesomeIcons.twitter,
                color : Color(0xFF1da1f2),
                onClicked: () => share(SocialMedia.twitter),
              ),
              buildSocialButton(
                icon : FontAwesomeIcons.linkedin,
                color : Color(0xFF0072b1),
                onClicked: () => share(SocialMedia.linkedln),
              )
            ],
          ),
        ),
      ),

When you click on a button, you can see it launch the sharable link. However, you have to find and edit these sharable links before you use them. Here I did not add the URLs. share method will execute when you click on a button.

Future share(SocialMedia platform) async {

  final urls = {
      SocialMedia.facebook : ('face book shareable link')
      ,SocialMedia.twitter : ('twitter shareable link')
      ,SocialMedia.linkedln : ('face book linkedln link')
  };
  final url = urls[platform]!;
  await launch(url);
}

You can see here in the share method, The relevant URL will launch. You can see the full code as follows.

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:url_launcher/url_launcher.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Share Buttons'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Card(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              buildSocialButton(
                icon : FontAwesomeIcons.facebookSquare,
                color : Color(0xFF0075FC),
                onClicked: () => share(SocialMedia.facebook),
              ),
              buildSocialButton(
                icon : FontAwesomeIcons.twitter,
                color : Color(0xFF1da1f2),
                onClicked: () => share(SocialMedia.twitter),
              ),
              buildSocialButton(
                icon : FontAwesomeIcons.linkedin,
                color : Color(0xFF0072b1),
                onClicked: () => share(SocialMedia.linkedln),
              )
            ],
          ),
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Future share(SocialMedia platform) async {

  final urls = {
      SocialMedia.facebook : ('face book shareable link')
      ,SocialMedia.twitter : ('twitter shareable link')
      ,SocialMedia.linkedln : ('face book linkedln link')
  };
  final url = urls[platform]!;
  await launch(url);
}


enum SocialMedia { facebook, twitter, linkedln}

Widget buildSocialButton({required IconData icon, Color? color, required Function() onClicked})
  => InkWell(
  child: Container(
    width : 60,
    height : 60,
    child:  Center(
      child: FaIcon(icon, color:color,size: 40)
    ),
),
    onTap: onClicked,
);

Image: Flutter Share Buttons

Conclusion

I hope you have got the knowledge that how to implement share buttons in Flutter. Please feel free to ask any question you will face in the response section below.
Happy Coding !!!!
Found this post useful? Kindly tap the 👏 button below! :)