Quick Actions en Flutter: 10 minutos, gran impacto

A menudo pasamos un tiempo indecente puliendo "grandes features". Y luego, a veces, una microacción escondida en un rincón te recuerda que en producto... el timing > la complejidad.

Hoy hablamos de las Quick Actions : el menú que aparece cuando haces un long press en el icono de tu app. En Flutter, con el paquete quick_actions, puedes integrarlas rápido y conectarlas a tu routing (GoRouter) sin crear una mini-arquitectura del mal. (Dart packages)

1) Por qué funciona

Las Quick Actions tienen un superpoder: te permiten añadir una acción de "alto valor" sin añadir una pantalla más en un recorrido ya cargado.

El mejor uso: reducir la fricción en el momento en que el usuario ya tiene la intención. Típicamente: quiere gestionar su suscripción, restaurar una compra, contactar al soporte... o "simplemente" acceder a una funcionalidad clave.

2) ¿Qué es una Quick Action (iOS) / App Shortcut (Android) ?

En iOS, Apple habla de Home Screen quick actions: atajos a acciones de tu app desde la pantalla de inicio. En Android, el concepto equivalente se apoya en los App Shortcuts (static / dynamic / pinned).

Y en Flutter, quick_actions te da 2 componentes :

• initialize() : un callback llamado cuando la app se lanza vía un atajo.
• setShortcutItems() : la lista de tus acciones (type, label, icono...).

3) Ejemplos que todo el mundo ya ha visto

Apple da ejemplos muy ilustrativos desde la perspectiva del usuario:

• Cámara → Selfie
• Mapas → Enviar mi ubicación
• Notas → Nueva nota

El patrón es simple: no son "features", son intenciones frecuentes. Y eso te ayuda a elegir las tuyas: una Quick Action debe ahorrar tiempo al usuario.

4) Ideas de Quick Actions

Un buen filtro: si el usuario hace clic, ¿le ayuda realmente? Si es así, puedes permitirte un pequeño impulso comercial en el camino.

Ideas orientadas a suscripción / ingresos

• "Oferta especial -30%" → abre tu paywall con una promo preseleccionada.
• "Pasar a Premium" → abre tu pantalla de upgrade (simple, clara, sin dark pattern).
• "Restaurar mis compras" → salvas usuarios iOS/Android que cambian de teléfono (y por tanto tickets de soporte).

Ideas orientadas a retención / confianza

• "Soporte / Reportar un bug" → abre un formulario corto (o un chat si tienes uno).
• "FAQ / Ayuda" → abre una página de ayuda "top 5 preguntas".
• "Dar mi opinión" → abre tu pantalla de feedback interna (y solo después empujas al store).

En Android, la doc recomienda ser comedido : aunque la API soporta hasta 15 atajos (static + dynamic), recomiendan publicar 4 para una mejor legibilidad.

5) Implementación en Flutter (con GoRouter)

Objetivo : un copiar/pegar que funcione, y un routing limpio. Haremos un ejemplo "Oferta de suscripción" accesible desde el long press.

Dependencias

dependencies:
  quick_actions: ^1.1.0 # (check la version au moment d'écrire)
  go_router: ^14.0.0

quick_actions sirve para declarar y escuchar las acciones. go_router sirve para enrutar correctamente hacia una pantalla (con parámetros si es necesario).

El router (GoRouter)

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

final GoRouter router = GoRouter(
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      builder: (context, state) => const HomeScreen(),
    ),
    GoRoute(
      path: '/paywall',
      builder: (context, state) {
        final offer = state.uri.queryParameters['offer']; // ex: discount30
        final src = state.uri.queryParameters['src'];     // ex: quick_action
        return PaywallScreen(offer: offer, source: src);
      },
    ),
    GoRoute(
      path: '/support',
      builder: (context, state) => const SupportScreen(),
    ),
  ],
);

GoRouter maneja rutas, query params, deep links, etc.

Conectar las Quick Actions + navegación

import 'package:flutter/material.dart';
import 'package:quick_actions/quick_actions.dart';

class AppBootstrap extends StatefulWidget {
  const AppBootstrap({super.key});

  @override
  State<AppBootstrap> createState() => _AppBootstrapState();
}

class _AppBootstrapState extends State<AppBootstrap> {
  final QuickActions _quickActions = const QuickActions();

  @override
  void initState() {
    super.initState();

    // 1) Écoute des actions (à init le plus tôt possible)
    _quickActions.initialize((String shortcutType) {
      // Évite de naviguer "au mauvais moment" (app pas encore rendue)
      WidgetsBinding.instance.addPostFrameCallback((_) {
        _handleQuickAction(shortcutType);
      });
    });

    // 2) Déclaration des actions
    _quickActions.setShortcutItems(const <ShortcutItem>[
      ShortcutItem(
        type: 'offer_discount',
        localizedTitle: 'Offre -30%',
        icon: 'ic_discount', // ressource native (iOS xcassets / Android drawable)
      ),
      ShortcutItem(
        type: 'support',
        localizedTitle: 'Support',
        icon: 'ic_support',
      ),
    ]);
  }

  void _handleQuickAction(String type) {
    switch (type) {
      case 'offer_discount':
        router.go('/paywall?offer=discount30&src=quick_action');
        break;
      case 'support':
        router.go('/support?src=quick_action');
        break;
      default:
        // no-op
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: router,
    );
  }
}

El paquete recomienda inicializar temprano, y recuerda que :

• type debe ser único.
• icon debe ser el nombre de un recurso nativo (xcassets iOS / drawable Android).

Si quieres ver un ejemplo mínimo "oficial", el ejemplo del paquete muestra exactamente este dúo initialize() + setShortcutItems().

6) Errores comunes (y cómo no pasarte la noche)

Android: compila en SDK 16+, pero...

El plugin funciona en Android SDK 16+, pero los atajos son un no-op por debajo de Android 7.1 (SDK 25). Por lo tanto: no bases un flujo crítico en eso, y prevé una solución alternativa (botón en la app, menú de perfil, etc.).

Los iconos que desaparecen en release

Si tus drawables Android solo están referenciados "que" en Dart, el shrinker puede eliminarlos. El README del paquete lo menciona y remite a la doc de Android para "mantener" explícitamente estos recursos.

Navegación demasiado pronto (cold start)

Cuando la app se lanza via Quick Action, puedes recibir el callback muy rápido. El addPostFrameCallback en el ejemplo evita los casos en que navegas antes de que el router esté listo.

7) Medir el impacto (si no, es solo "agradable")

Si quieres saber si tu Quick Action "Oferta -30%" sirve para algo, ve a lo simple :

• quick_action_triggered (type)
• paywall_viewed (source=quick_action, offer=discount30)
• purchase_completed (source=quick_action)

Luego comparas :

• tasa de conversión del paywall con src=quick_action
• tasa de uso de la Quick Action (por semana)
• impacto en soporte (si añades un atajo "Support")

8) Checklist y conclusión

Si tuvieras que retener una regla : 4 acciones máximo, y cada una debe poder justificarse en una frase. Tus labels deben ser cortos, y tus acciones deben llevar a una página que "haga el trabajo" directo.

Checklist :

• 2 a 4 Quick Actions máximo
• iconos nativos OK (iOS + Android)
• navegación segura (post-frame)
• tracking mínimo (3 eventos)
• acción "business" solo si también aporta valor (si no, se nota)

Enlaces útiles

• quick_actions
• Adopting 3D Touch on iPhone: 3D Touch APIs
• App shortcuts overview
• Perform quick actions on iPhone
• Best practices for shortcuts
• go_router
• quick_actions example
• Flutter Tutorial - Quick Actions for iOS & Android