Fluxy
Fluxy Plugins

Haptic Feedback

Premium sensory UX with centralized haptic vibration control.

Haptic Feedback

Fluxy's Haptic Engine provides a semantic API for digital touch confirmation, abstracting away raw platform vibration calls.

[GUIDE] Industrial Step-by-Step

1. Installation (via CLI)

Add the haptics module using the Fluxy CLI to maintain architectural integrity.

fluxy module add haptics

2. Managed Boot Sequence

Ensure your main.dart is configured with the mandatory three-step boot sequence.

import 'package:fluxy/fluxy.dart';
import 'core/registry/fluxy_registry.dart'; 

void main() async {
  await Fluxy.init();
  Fluxy.registerRegistry(() => registerFluxyPlugins()); 
  Fluxy.autoRegister(); // Boots sensory core
  runApp(MyApp());
}

3. Usage (Unified API)

Access the module through the direct Fx.haptic helper.

void onButtonTap() {
  Fx.haptic.light(); // Light confirmation tap
}

void onError() {
  Fx.haptic.error(); // Triple-pulse alarm
}

Semantic Levels

1. Interactions

Use for standard button clicks or scroll ticks.

Fx.haptic.light();
Fx.haptic.selection();

2. Physical Impact

Use for drag-and-drop snaps or UI physics.

Fx.haptic.medium();
Fx.haptic.heavy();

The Wrong Way vs. The Right Way

Feature[WRONG] The Outdated Way[RIGHT] The Fluxy Standard
Plugin AccessHapticFeedback.vibrate()Fx.haptic.light()
LogicManual duration vibrationSemantic level API (success, error)
ControlNo way to disable globallyFx.platform.haptic.enabled.value = false

Pitfalls & Troubleshooting

1. "Haptics are not working on Android"

  • The Cause: "Touch feedback" disabled in system settings or Battery Saver is on.
  • The Fix: Direct the user to enable haptics. Fx.haptic fails gracefully (silent) if disabled.

2. "App feels 'noisy'"

  • The Cause: Using heavy() on every interaction.
  • The Fix: Use light() for 90% of interactions. Reserve heavy() for destructive actions.

Best Practices

  1. Never Overuse: Haptics should be subtle. Trigger on explicit user actions only.
  2. Success/Error Pairing: Pair Fx.haptic.success() with success toasts for a premium experience.
  3. Accessibility: Use haptics to reinforce critical UI state changes for users with visual impairments.

The Master Sensory Feedback Implementation

In a professional application, haptics are orchestrated alongside UI state changes and sounds to provide a premium UX. Here is a complex "Submission Sequence" demonstrating best practices for sensory feedback.

class SubmissionController extends FluxController {
  final isLoading = flux(false);
  
  Future<void> submitForm(Map<String, dynamic> data) async {
    // 1. Light confirmation (User action)
    Fx.haptic.light();
    
    isLoading.value = true;
    try {
      // 2. Perform submission logic
      await Fx.http.post('/api/submit', body: data);
      
      // 3. Success state - Heavy confirmation & visual
      Fx.haptic.success();
      Fx.toast.success("Form Submitted!");
      
      // 4. Reset or Navigate
      Fx.toNamed('/home');
    } catch (e) {
      // 5. Error state - Warning vibrations & Alert
      Fx.haptic.error();
      Fx.toast.error("Form Submission Failed!");
    } finally {
      isLoading.value = false;
    }
  }

  // Example of using selection haptics for sliders or pickers
  void onValueSelected(double val) {
    // Selection haptics are specifically tuned for rapid scroll/tick events
    Fx.haptic.selection(); 
    print("Selected value: $val");
  }
}

By centralizing all sensory calls under the Fx namespace, you ensure that your haptics are consistent across the entire app and can be globally disabled or adjusted via the registry if needed.

On this page