Shutter: action feedback

Write it at the front

stay Android or iOS On the device , The system will provide feedback of sound or vibration to help us make users operate , It plays a role of informing the user that this operation is effective . This article is mainly summarized in Flutter On , How to use these functions .

Content

Feedback

Generally we use GestureDetector Will use it onTap or onLongTap Method , Now we can use FeedBack Class to help us add platform specific feedback .

class WidgetWithWrappedHandler extends StatelessWidget {
  const WidgetWithWrappedHandler({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: Feedback.wrapForTap(_onTapHandler, context),
      onLongPress: Feedback.wrapForLongPress(_onLongPressHandler, context),
      child: const Text('X'),
    );
  }

  void _onTapHandler() {
    // Respond to tap.
  }

  void _onLongPressHandler() {
    // Respond to long press.
  }
}

According to the current official documents Feedback Introduction of methods , stay Android On , Click to play the click system sound , Long press, there will be vibration feedback . And in the iOS There will be no feedback , because iOS There is usually no response to these two operations .

Feedback Two other methods are also provided forTap and forLongPress, To further help us do more work on feedback , For example, judge whether there are other conditions for this operation , To implement feedback .

class WidgetWithExplicitCall extends StatelessWidget {
  const WidgetWithExplicitCall({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // Do some work (e.g. check if the tap is valid)
        Feedback.forTap(context);
        // Do more work (e.g. respond to the tap)
      },
      onLongPress: () {
        // Do some work (e.g. check if the long press is valid)
        Feedback.forLongPress(context);
        // Do more work (e.g. respond to the long press)
      },
      child: const Text('X'),
    );
  }
}

HapticFeedback

stay Flutter Of services In the bag , There is one HapticFeedback class , There are several static methods , Used to provide vibration feedback ：

class HapticFeedback {
  static Future<void> vibrate();
  static Future<void> lightImpact();
  static Future<void> mediumImpact();
  static Future<void> heavyImpact();
  static Future<void> selectionClick();
}

These methods are also Flutter Used in some official components of , For example, pull-down refresh , Adjust the time in the time selector .

Reference resources

Feedback class
HapticFeedback class
【Flutter Little knowledge 】 Vibration feedback HapticFeedback