New Action Triggers | FlutterFlow 5.0 | New Feature

Summary

This video introduces 50 new action triggers in Flutter Flow, categorized into Taps, Drags, and Scales. It explains how to detect gestures like Force press, horizontal and vertical drags, and two-finger scaling. The tutorial focuses on fine-tuning existing triggers, such as tap detection and gesture updates, and walks through setting up a 'swipe to unlock' pattern. The process includes adding triggers, working with gesture detectors, and creating custom actions to convert pixel values into alignment values for precise movement. The video also covers troubleshooting common issues and optimizing performance across devices.

Takeaways

• 🖱️ New action triggers include Taps, Drags, and Scales, adding more gesture detection options.
• 🖱️ Taps now support secondary and tertiary mouse buttons, as well as Force Press for supported devices.
• 👆 Drag triggers can detect horizontal, vertical drags, and pans in any direction.
• 🤏 Scale triggers detect two-finger scaling gestures, commonly used on mobile or trackpad devices.
• 🔍 Fine-grained control over gestures: Taps now support Tap down, Tap up, and Tap cancel.
• 📐 For gesture detection areas, triggers should be added to the whole container, not just specific UI elements like handles.
• 🖼️ Gesture detectors expose various properties like local and global positions, which are essential for handling movement.
• 🔄 Visual UI changes (e.g., moving a handle) require computation to transform gesture properties into alignment values.
• 🧩 Custom actions are necessary to map pixel-based gestures to UI alignment values, ensuring smooth interaction.
• 🎯 Accurate alignment requires handling edge cases like component padding and object size to ensure a perfect one-to-one match.

Q & A

What are the three categories of the new action triggers introduced in the video?

The new action triggers are grouped into three categories: Taps, Drags, and Scales.

What is the functionality of the new 'Taps' triggers?

The new Taps triggers include support for detecting taps on secondary and tertiary mouse buttons as well as Force press for supported devices.

How do the 'Drag' triggers work?

The Drag triggers support detection of horizontal and vertical drags, as well as pans, which allow dragging in any direction.

What are 'Scale' triggers used for?

Scale triggers are used when a user uses two fingers, a mouse, or a trackpad to scale in or out, commonly for zooming actions.

What additional control is provided for existing triggers?

The new update provides more fine-grained control, allowing detection of not only a tap but also tap down, tap up, and tap cancel events.

Why should the horizontal swipe trigger be added to the container rather than the handle?

The trigger should be added to the container because it defines the area where the gestures will be detected, and in this case, the swipe needs to be detected across the entire area, not just on the handle.

What happens when you add a trigger to a UI element in Flutter Flow?

After adding a trigger, Flutter Flow provides access to properties from the trigger, such as local position, global position, and delta, which can be used to update variables and control UI elements.

What are local position and global position in the context of gesture detection?

Local position refers to the number of pixels from the top-left edge of the UI element, while global position refers to the number of pixels from the top-left edge of the entire page.

Why is normalization necessary when dealing with gesture detection in Flutter Flow?

Normalization adjusts values from different scales to a common scale, allowing pixel values from drag events to be mapped to alignment values that control UI movement (from 0-1 scale to -1 to +1 for alignment).

How can you adjust the swipe handle to ensure it's perfectly aligned with the drag gesture?

By accounting for the handle's width in the draggable area calculation and adjusting for where the user touches the handle, the alignment can be locked to a one-to-one ratio, ensuring precise drag movements.