Tapping Moves Entire Content

[jtkeyva]

When I set enableRevert & enableSensorRevert to false,

How to reproduce run the example app

Steps to reproduce the behavior:

1. set enableRevert & enableSensorRevert to false
   2. tap on counter widget or FAB
   3. see the content tilt and the FAB gets moved away from your finger

Expected behavior I want the FAB to be able to move around and be tappable without moving or moving the content. so it can move independently and still interact. i do want to be able to move the counter widget by panning around. maybe have a "disable" control option or something?

maybe this is just a limitation of the example. perhaps some other use case examples would be beneficial. there are a ton of use cases such as revealing hidden content, panning content around, and dropping a ball into a hole (target)

iPhone 12

[AmosHuKe]

Hi~ @jtkeyva, Thanks for the suggestion.

Is this the effect you need?

1. Tapping when enableRevert or enableSensorRevert is false will not cause tilt.
2. FAB can be moved around and the rest of the content doesn't tilt with it (hypothetical example, mainly showing the competition of gestures).

https://github.com/AmosHuKe/flutter_tilt/assets/32262985/4053d6c5-5e6a-49a4-8d52-a74c6c225bcd

[jtkeyva]

Hi thanks. Yes and when tapping on the "container" was causing it to tilt was well. Is there a feature to set tap to false?

That is a cool example. It also shows a feature that i wanted to try... have content off screen that becomes visible when you tilt or swipe to reveal. So in your instance, how would the FAB be off screen upon load? Then you can tilt to reveal it?

Very cool!

[AmosHuKe]

@jtkeyva

Yes and when tapping on the "container" was causing it to tilt was well. Is there a feature to set tap to false?

Currently, Quick Tap cannot gracefully handle gesture competition. Tilt can only be triggered by moving and long-pressing.

So in your instance, how would the FAB be off screen upon load? Then you can tilt to reveal it?

Upgrading to version 2.0.4 You can try this sample:

Code sample

``` dart import 'package:flutter/material.dart'; import 'package:flutter_tilt/flutter_tilt.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Tilt Demo', theme: ThemeData( primarySwatch: Colors.brown, ), home: const TiltDemo(), ); } } class TiltDemo extends StatefulWidget { const TiltDemo({super.key}); @override State createState() => _TiltDemoState(); } class _TiltDemoState extends State { int _counter = 0; bool enableGestureTouch = true; bool enableGestureHover = true; bool enableGestureSensors = true; Offset position = const Offset(-25, -25); void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: const Color(0xFFFFFFFF), body: Center( child: Tilt( borderRadius: BorderRadius.circular(24), tiltConfig: TiltConfig( angle: 20, enableRevert: false, enableSensorRevert: false, enableGestureSensors: enableGestureSensors, enableGestureHover: enableGestureHover, enableGestureTouch: enableGestureTouch, ), lightConfig: const LightConfig( minIntensity: 0.1, ), shadowConfig: const ShadowConfig( minIntensity: 0.05, maxIntensity: 0.4, offsetFactor: 0.08, minBlurRadius: 10, maxBlurRadius: 15, ), childLayout: ChildLayout( inner: [ Positioned( top: 200, child: TiltParallax( size: const Offset(-20, -20), child: Text( '$_counter', style: const TextStyle(fontSize: 20), ), ), ), Positioned( bottom: position.dy, right: position.dx, child: TiltParallax( size: const Offset(35, 35), child: Listener( onPointerDown: (e) { setState(() { enableGestureTouch = false; enableGestureHover = false; enableGestureSensors = false; }); }, onPointerMove: (event) { setState(() { position -= event.delta; }); }, onPointerUp: (event) { setState(() { enableGestureTouch = true; enableGestureHover = true; enableGestureSensors = true; }); }, child: SizedBox( width: 50, height: 50, child: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: const Icon(Icons.add), ), ), ), ), ), ], ), // onGestureMove: // (TiltDataModel tiltDataModel, GesturesType gesturesType) { // print('--- onGestureMove ---'); // print(tiltDataModel.areaProgress); // print(gesturesType.name); // }, // onGestureLeave: // (TiltDataModel tiltDataModel, GesturesType gesturesType) { // print('--- onGestureLeave ---'); // print(tiltDataModel.areaProgress); // print(gesturesType.name); // }, child: const MyHomePage(title: 'Flutter Tilt Demo'), ), ), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); final String title; @override State createState() => _MyHomePageState(); } class _MyHomePageState extends State { @override Widget build(BuildContext context) { return SizedBox( width: 250, height: 450, child: Scaffold( backgroundColor: const Color(0x206D6E6F), appBar: AppBar( title: Text( widget.title, style: const TextStyle(fontSize: 18), ), ), body: const Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'You have pushed the button this many times', style: TextStyle(fontSize: 10), ), ], ), ), ), ); } } ```

[jtkeyva]

@AmosHuKe thank you! that gives me a good head start :) and yes, tapping bug is now fixed :)