iOS & Android Quick Actions

Quick actions are a great way to provide your users fast access to your app’s common functionality within the home screen. iOS 13 introduced the concept of quick actions, where a user can touch and hold an app icon to display a set of shortcuts or actions to perform right from the home screen.

Many of the most commonly used apps consume App Shortcuts to provide users with easy access to its most important features. For example, Instagram provides shortcuts to Camera, New Post, View Activity, and Direct messages, while WhatsApp on Android provides Camera and four conversations.

iOS: Instagram
Android: WhatsApp
iOS: WhatsApp

Developers can also provide their own quick actions to provide users with powerful shortcuts to common app functionality. The iOS Camera app has actions to take different types of photos or to record a video. A shopping app might let you jump directly to your orders or wishlist, and a messaging app might show your favorite contacts so you can easily access them.

I’m sure you can think of ways that quick actions would benefit your users:

  • Static quick actions, which are always available for your app.
  • Dynamic quick actions, which your app can define at runtime.

Static vs. Dynamic Quick Actions

There are two types of quick actions available to you: static and dynamic.

You use static actions for actions that never change in your app, like the Mail app’s New Message action.

Use dynamic actions if your actions might change under certain conditions or depend on specific data or state. For example, the Messages app will add quick actions for all of your pinned conversations.

In both cases, you add code to handle a specific action that gets triggered. 

Native Android and iOS both have their specific ways implement these shortcuts. In Android, the term used is App Shortcut whereas iOS calls it as Home Screen Quick Actions.

Apple Developer Documentation: Home Screen Quick Actions

Android Developer Documentation: App Shortcuts Overview

To achieve this functionality in Flutter you can use a plugin called quick_actions. This Flutter plugin allows you to manage and interact with the application’s home screen quick actions

How to use Flutter’s Quick_Actions Plugin

1. Open pubspec.yaml file and add quick_actions plugin dependency under dependencies and hit the Flutter command package get.

name: quick_action
description: A new Flutter application which demonstrates use of quick actions.
version: 1.0.0+1
  sdk: ">=2.1.0 <3.0.0"
  quick_actions: ^0.3.0+1
    sdk: flutter
    sdk: flutter
  uses-material-design: true

2. Inside your lib folder open main.dart and add
import ‘package:quick_actions/quick_actions.dart’;

3. Initialize the library early in your application’s life-cycle by providing a callback, which will then be called whenever the user launches the app via a quick action.

final QuickActions quickActions = const QuickActions();
    quickActions.initialize((String shortcutType) {
      if (shortcutType == 'action_cart') {
        print('The user tapped on the "cart" action.');
      } else {
        print('The user tapped on the "wishlist" action.');

4. Finally, manage the app’s quick actions

      const ShortcutItem(
          type: 'action_cart', localizedTitle: 'cart', icon: 'cart-icon'),
      const ShortcutItem(
          type: 'action_wishlist', localizedTitle: 'wishlist', icon: 'wishlist-icon')

Please note, that the type argument should be unique within your application (among all the registered shortcut items). The optional icon should be the name of the native resource (xcassets on iOS or drawable on Android) that the app will display for the quick action.

What other cool uses of quick actions can you think of? Leave your implementations and ideas in the comments below.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: