Quick Interact

Quick Interact is a Flutter package inspired by the Instagram quick send feature. It provides a simple and intuitive API to create interactive widgets with ease, allowing you to show quick interactions for any widget with various configurations.

Screen Recording 2023-09-25 at 20 59 36 Screen Recording 2023-09-25 at 20 58 54 Screen Recording 2023-09-25 at 20 59 16 Screen Recording 2023-09-25 at 21 00 45 Screen Recording 2023-09-25 at 21 00 34 Screen Recording 2023-09-25 at 21 00 16

Features

  • Display quick interactions for any widget
  • Customize the interaction with various configurations
  • Easy to use and integrate into any Flutter project

Installation

To use this package, add quick_interact as a dependency in your pubspec.yaml file.

dependencies:
  quick_interact: ^latest_version

Or you can install it from the command line:

bash

flutter pub add quick_interact

Usage

Here is a basic example of using Quick Interact:

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),
    ),
  );
}

Example User Avatar Usage

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

API

QuickInteractions

QuickInteractions is a widget that provides quick interaction functionality. It uses long press gesture to trigger a set of quick interaction widgets.

Attributes:

  • quickInteractionWidgets: The list of widgets for quick interactions.
  • config: The configuration model for QuickInteractBuilder and QuickInteract classes.
  • onQuickInteractCompleted: The callback function when a quick interaction is completed.
  • child: The child widget.
  • onTap: The callback function when the widget is tapped.
  • toolTip: The tooltip widget.
  • disable: A flag to disable the quick interactions.
  • animate: A flag to enable animation for the quick interactions.
  • showToolTipDelay: The delay before showing the tooltip.

QuickInteractConfig

QuickInteractConfig is a configuration model for QuickInteractBuilder and QuickInteract classes. It allows you to customize the behavior and appearance of the quick interaction widgets. Parameters

  • widgetSize: Size of the quick interaction widgets container. Default is 35.

  • widgetPadding: Padding between quick interaction widgets. Default is 4.

  • transitionAnimationEndOffset: Offset animations end value. Default is Offset(0, -1).

  • scaleAnimationEndScale: Scale animations end value. Default is 1.5.

  • cursorAnimationDuration: Duration of the cursor animation. Default is Duration(milliseconds: 300).

  • containerColor: Color of the quick interaction container. No default value.

  • containerHeight: Height of the quick interaction container. Default is 40.

  • containerBorderRadius: Border radius of the quick interaction container. Default is BorderRadius.all( Radius.circular(30)).

  • containerAnimationDuration: Duration of the container animation. Default is Duration(milliseconds: 300).

  • containerAnimationCurve: Curve of the container animation. Default is Curves.linearToEaseOut.

  • widgetAnimationCurve: Curve of the widget animation. Default is Curves.linearToEaseOut.

  • elevation: Elevation of the quick interaction container. Default is 5. Named Constructors

  • QuickInteractConfig(): Creates a new instance of QuickInteractConfig with default values.

  • QuickInteractConfig.onlyTransition(): Creates a new instance of QuickInteractConfig with only transition offset -2. The default elevation is set to 5.

  • QuickInteractConfig.onlyScale(): Creates a new instance of QuickInteractConfig with only scale 2. The default elevation is set to 5.

Examples

You can find more examples and different usages in the example main.dart.

Upcoming Features

  • Displaying quick interaction in a safe area
  • Providing a builder constructor to change state when active with boolean
  • For more information, please refer to the API documentation.

GitHub

View Github