Instagram Super React in Flutter with Quick Interact

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:

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

• User Avatar Quick Interaction:

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

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