Bringing Instagram’s Super React Feature to Your Flutter Apps with Quick Interact

onat çipli

Published in

Flutter Community

5 min readNov 27, 2023

quick_interact | Flutter Package

A flutter package for showing quick interactions for any widget

pub.dev

Introduction:

You know how you’re scrolling through Instagram, and you come across those reels that reveal your best friends? And then, there’s this nifty feature, officially called “Quick Send” or “Super React” looks pretty much similar to me

I don’t know the correct name btw if you do please let me know in the comments!!

Anyway, this feature let you swiftly send any post, reel, or story with a long press. Plus, it enables you to react to any message with the same long press — pretty cool, isn’t it? 😄

This feature caught my eye, and I thought, “Why not bring this cool functionality into our projects?” We were already using something similar for one of our client projects for sending reactions, and it proved to be a hit! So, I decided to craft a widget to let everyone access this feature — introducing “Quick Interact”, a Flutter package inspired by Instagram’s Super React!

I just want to say it Quick Intreact since as I was liked the Flutter Interact event a lot on that days..

Motivation:

Remember the excitement when you first discovered Instagram’s Super React? That’s the feeling I wanted to replicate in other projects! The idea was to bring that engaging, user-friendly experience that Instagram offers into the Flutter world. Quick Interact was born out of a desire to make such versatile and familiar interactions accessible to developers and users alike.

Key Features:

Crafting Quick Interact was like assembling a puzzle — each piece, a feature, adding value to the whole picture. The goal was to create a package that wasn’t just a replication but a tool that offered interactive widgets for all, customizable to every unique need.

Installation & Usage:

Switching gears to developer mode, let’s dive into the installation and usage of Quick Interact. Installing the package is a breeze, whether you prefer updating the pubspec.yaml file or using the command line:

dependencies:
  quick_interact: ^latest_version

Or via the command line:

flutter pub add quick_interact

Now, let’s explore some usage examples:

Icon Quick Interaction:

Widget iconQuickReaction({required QuickInteractConfig config}) {
  return Center(
    child: QuickInteractions(
      quickInteractionWidgets: const [
        Icon(Icons.thumb_up),
        Icon(Icons.thumb_down),
        Icon(Icons.favorite),
        Icon(Icons.bookmark),
      ],
      onQuickInteractCompleted: (index) {
        print('Quick interaction selected: $index');
      },
      config: config,
      child: const Icon(Icons.send),
    ),
  );
}

This example demonstrates how to create quick interactions with different icons, using the QuickInteractConfig for customization.

User Avatar Quick Interaction:

Widget userAvatarQuickReaction({required QuickInteractConfig config}) {
  return Center(
    child: QuickInteractions(
      quickInteractionWidgets: const [
        CircleAvatar(
          radius: 15,
          backgroundImage:
          NetworkImage('https://randomuser.me/api/portraits/men/1.jpg'),
        ),
        // ... other avatars ...
      ],
      onQuickInteractCompleted: (index) {
        print('Quick interaction selected: $index');
      },
      animate: true,
      config: QuickInteractConfig(),
      showToolTipDelay: const Duration(milliseconds: 300),
      child: const Icon(Icons.send),
    ),
  );
}

Here, we’re using CircleAvatar widgets for user avatar quick reactions, showcasing the versatility of Quick Interact.

Since in Flutter that all widgets.. You can use for anything maybe emojis??

Customization with QuickInteractConfig:

The QuickInteractConfig API is your palette for crafting unique interactions. Whether you’re aiming for different styles or animations, this API has you covered. Currently, transition and scale animations are supported, and you can adjust the duration for smoother animations. You can have look to default constructor and also other named ones QuickInteractConfig.onlyTransition and QuickInteractConfig.onlyScale for different animation behaviors but I feel like you can do better ones please feel free to create PR.

  /// [QuickInteractConfig] is a configuration model for QuickInteractBuilder and QuickInteract classes.
  /// Attributes:
  /// - [widgetSize]: Size of the quick interaction widgets container.
  /// - [widgetPadding]: Padding between quick interaction widgets.
  /// - [transitionAnimationEndOffset]: Offset animations end value.
  /// - [scaleAnimationEndScale]: Scale animations end value.
  /// - [containerColor]: Color of the quick interaction container.
  /// - [containerHeight]: Height of the quick interaction container.
  /// - [containerAnimationDuration]: Duration of the container animation.
  /// - [cursorAnimationDuration]: Duration of the cursor animation.
  /// - [containerAnimationCurve]: Curve of the container animation.
  /// - [widgetAnimationCurve]: Curve of the widget animation.

  /// Creates a new instance of [QuickInteractConfig].
  /// The default elevation is set to 5.
  const QuickInteractConfig({
    this.widgetSize = 35,
    this.widgetPadding = 4,
    this.cursorAnimationDuration = const Duration(milliseconds: 300),
    this.containerColor,
    this.containerHeight = 40,
    this.containerBorderRadius = const BorderRadius.all(
      Radius.circular(30),
    ),
    this.containerAnimationDuration = const Duration(milliseconds: 300),
    this.containerAnimationCurve = Curves.linearToEaseOut,
    this.widgetAnimationCurve = Curves.linearToEaseOut,
    this.transitionAnimationEndOffset = const Offset(0, -1),
    this.scaleAnimationEndScale = 1.5,
    this.elevation = 5,
  }) : assert(widgetSize <= containerHeight,
            'Widget size cannot be less than container height');

Best Use Cases:

Quick Interact shines in scenarios like sending messages or reactions, much like Instagram’s Super React. Imagine the possibilities — from quick sends to instant reactions, the package adapts to various use cases. And for the developers wondering where to make endpoint calls, the onQuickInteractCompleted callback is your go-to:

onQuickInteractCompleted: (index) {
  print('Quick interaction selected: $index');
},

Upcoming Features & Conclusion:

The journey with Quick Interact is just beginning. With upcoming features like safe area display and state change with a builder constructor, the adventure continues. Reflecting on the inspiration from Instagram’s Super React to the creation of this package, it’s exciting to see where it will go next.

Call to Action:

Now, it’s your turn to join the adventure! Dive into Quick Interact, experiment with its features, and let’s see the creative ways you implement it. Your feedback and insights are the compass guiding the future of this package. Explore the documentation, try out the examples, and let’s continue this story together!

Since I haven’t been here for a long time, I was but couldn’t able to create some articles for you guys feel free to follow me on twitter or X… ????? Idk what is the correct name again 😅
https://twitter.com/OnatCipli

Thanks for reading this article hope you enjoy..

Ooops I forgot the links here;
https://github.com/onatcipli/quick_interact
https://pub.dev/packages/quick_interact