How to Add an Instagram-Like Button in Flutter with the InstaLikeButton Package

Flutter is an amazing framework that allows developers to create beautiful, high-performance applications for multiple platforms with a single codebase. One of the coolest features in social media apps like Instagram’s the animated “like” button. If you are building a Flutter app and want to implement a similar feature, the insta_like_button package is here to help.

In this tutorial, we will explore how to integrate the Instagram-like button into the Flutter application. We will cover everything from installing the package to customizing the button’s properties and seeing it in action.

For a more in-depth walkthrough, check out the full video tutorial on YouTube:

Why Use the InstaLikeButton Package?

The insta_like_button package is a powerful tool that replicates the popular Instagram-like button animation. It is easy to integrate, highly customizable and provides a great user experience.

Key Features:

• Easy Integration: Quickly add the button to your app with minimal setup.
• Customizable: Adjust properties like animation duration, curve, and the icon itself.
• Cross-Platform Support: Works on all platforms supported by Flutter.

dependencies:
  flutter:
    sdk: flutter
  insta_like_button: ^0.1.1  # Check for the latest version on pub.dev

Then, run flutter pub get to install the package.

Add InstaLikeButton Widget

Now that we have the package installed, let’s start by adding the InstaLikeButton widget to our app.

Open your main.dart file and import the below package.

import 'package:insta_like_button/insta_like_button.dart';

Next, add the InstaLikeButton widget within a Container widget.

Container(
          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 20),
          child: InstaLikeButton(
            image: NetworkImage("https://via.placeholder.com/150"),
            onChanged: () {
              print("Like button is clicked");
            },
          ),
        )

We’ve enclosed the InstaLikeButton within a Container widget to apply padding and control its layout.

InstaLikeButton is the core widget that powers the like button. This widget has 2 mandatory properties.

• image: The image property allows you to specify an image using various ImageProvider implementations, such as NetworkImage, AssetImage, or FileImage. This image will be used as the background for the like button. Here, we will use the NetworkImage provider to load an image from the internet. 
• onChange: This is a callback function that gets triggered when the button’s state changes. Here, we’re simply printing a message to the console, but you can update your UI or perform other actions.

Customizing the Button

The insta_like_button package offers several optional properties that you can customize to make the button fit your app’s style.

By default, the icon used for the like button is Icons.favorite. However, you can change it to any other icon.

InstaLikeButton(
            image: NetworkImage("https://via.placeholder.com/150"),
            icon: Icons.favorite_border,
            onChanged: () {
              print("Like button is clicked");
            },
          )

Similarly, we can adjust the icon’s size and color using the iconSize and iconColor properties. By default, the icon size is set to 120, but in the following example, we’ll increase it to 200. Likewise, the default icon color is Colors.grey, which we’ll change to Colors.red.

InstaLikeButton(
            image: NetworkImage("https://via.placeholder.com/150"),
            icon: Icons.favorite_border,
            iconSize: 200,
            iconColor: Colors.red,
            onChanged: () {
              print("Like button is clicked");
            },
          )

Further Customization

In addition to the key properties we’ve discussed, the InstaLikeButton widget offers several other customizable options. Let’s explore a few of them.

The animation of the like button can be customized using the duration and curve properties. These properties control how long the animation takes and the style of the animation.

duration: Duration(milliseconds: 500),
curve: Curves.easeInOut,

• duration: Sets how long the animation takes. Here, we’ve set it to 500 milliseconds.
• curve: Controls the style of the animation, such as Curves.easeInOut for a smooth, natural feel.

Running the App

So far, we’ve explored various ways to customize the like button. Now, let’s see it in action by running our app.

You can run the application using the flutter run command in your terminal, or simply run it directly from your IDE.

Click here to access the complete source code for this project on GitHub.

Conclusion

Integrating an Instagram-like button into your Flutter app is both simple and enjoyable with the insta_like_button package. In this tutorial, we’ve explored how to seamlessly add the button and customize its properties to suit your app’s design.

For a more in-depth walkthrough, check out the full video tutorial on YouTube: