for example if user want to swipe left in specific area but the real detect action went to other area , i have image here
in other word : user swipe left to container 2
in real finger , but flutter consider Container 1
is the one area which the finger swipe through ..
is it possible ?
Column(
children[
Container( // real detection
heigh:200,
child: Text('Container1')
),
GestureDetector(
onHorizontalDragUpdate: (details) {
int sensitivity = 8;
if(details.delta.dx < -sensitivity){
// Left Swipe
}
}
child :Container(//real finger swipe
heigh:200,
child: Text('Container2')
)
]
)
CodePudding user response:
Here is one example of how you can use the data from a GuestureDetector to modify another widget that is not a direct child of the GuestureDetector.
The example below uses the provider package so run flutter pub add provider
in the terminal or manually add it to your pubspec.yaml
file.
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
// This ViewModel will contain data used in the widget that should
// be affected by the GuestureDetector.
class ActionViewModel extends ChangeNotifier {
double xPosition = 0;
updateXPosition(double value) {
xPosition = value;
notifyListeners();
}
}
// This widget uses the GestureDetector to update the xPosition
// variable in the ViewModel.
class ActionElsewhereWidget extends StatelessWidget {
const ActionElsewhereWidget({Key? key, required this.model})
: super(key: key);
final ActionViewModel model;
@override
Widget build(BuildContext context) {
return GestureDetector(
onHorizontalDragUpdate: (details) {
model.updateXPosition(details.delta.dx);
},
child: Container(
height: 200,
width: MediaQuery.of(context).size.width,
color: Colors.green,
),
);
}
}
// This widget listens to updates in the ViewModel. The notifyListener
// method used in the ViewModel's updateXPosition method triggers an
// rebuild for the Consumer widget.
class ActionWidget extends StatelessWidget {
const ActionWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Consumer<ActionViewModel>(
builder: (context, model, child) {
return Transform.translate(
offset: Offset(model.xPosition, 0),
child: Container(
padding: const EdgeInsets.all(8),
height: 200,
width: MediaQuery.of(context).size.width / 2,
color: Colors.red,
),
);
},
);
}
}
// A screen utilizing the widgets we just made.
class ActionScreen extends StatefulWidget {
const ActionScreen({Key? key}) : super(key: key);
@override
State<ActionScreen> createState() => _ActionScreenState();
}
class _ActionScreenState extends State<ActionScreen> {
ActionViewModel model = ActionViewModel();
@override
Widget build(BuildContext context) {
return Scaffold(
body: ChangeNotifierProvider<ActionViewModel>(
create: (context) => model,
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
const Spacer(),
const ActionWidget(),
const Spacer(),
ActionElsewhereWidget(model: model),
],
),
),
);
}
}
// Some code to run the above example.
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) => const MaterialApp(home: ActionScreen());
}
void main() => runApp(const App());