flutter - How to increase counter value if i drag up and decrease if i drag down with Gesture Detector?

Question

I have a counter where I want to increment and decrement a value while dragging up and down with a gesture detector. Everything works fine but I dont know where to call counter++ to increase and counter-- to decrease the value.

Here is how im doing it(most of the code is for spring physics animation) :

class DraggableCard extends StatefulWidget {
int count;
DraggableCard({this.count = 0});

@override
_DraggableCardState createState() => _DraggableCardState();
}

class _DraggableCardState extends State<DraggableCard>
with SingleTickerProviderStateMixin {
AnimationController _controller;

Alignment _dragAlignment = Alignment.center;
Animation<Alignment> _animation;

/// Calculates and runs a [SpringSimulation].
void _runAnimation(Offset pixelsPerSecond, Size size) {
_animation = _controller.drive(
  AlignmentTween(
    begin: _dragAlignment,
    end: Alignment.center,
  ),
);
// Calculate the velocity relative to the unit interval, [0,1],
// used by the animation controller.
final unitsPerSecondX = pixelsPerSecond.dx / size.width;
final unitsPerSecondY = pixelsPerSecond.dy / size.height;
final unitsPerSecond = Offset(unitsPerSecondX, unitsPerSecondY);
final unitVelocity = unitsPerSecond.distance;

const spring = SpringDescription(
  mass: 30,
  stiffness: 1,
  damping: 1,
);

final simulation = SpringSimulation(spring, 0, 1, -unitVelocity);

_controller.animateWith(simulation);
}

@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this);

_controller.addListener(() {
  setState(() {
    _dragAlignment = _animation.value;
  });
 });
}

@override
void dispose() {
_controller.dispose();
super.dispose();
 }

 @override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return GestureDetector(
  onVerticalDragStart: (details) {
    _controller.stop();
  },
  onVerticalDragUpdate: (details) {
    setState(() {
      _dragAlignment += Alignment(
        details.delta.dx / (size.width / 0),
        details.delta.dy / (size.height * 1),
      );
    });
    if (details.delta.dx > 0) {
      print("Dragging in +X direction");
      widget.count++;
    } else {
      print("Dragging in -X direction");
      widget.count--;
    }
  },
  onVerticalDragEnd: (details) {
    _runAnimation(details.velocity.pixelsPerSecond, size);
  },
  child: Align(
    alignment: _dragAlignment,
    child: Text(
      widget.count.toString(),
      style: TextStyle(
        fontSize: 60.0,
        color: Colors.white,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
  );
}
}

Answer 1

All you had to do was to check details.delta.dy instead of details.delta.dy. If details.delta.dy < 0 then widget.count++; else widget.count--;

Please see the code : [Note: I had to comment out some of the code to make it work.]

import 'package:flutter/material.dart';

final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: DraggableCard(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!', style: Theme.of(context).textTheme.headline4);
  }
}

class DraggableCard extends StatefulWidget {
  int count;
  DraggableCard({this.count = 0});

  @override
  _DraggableCardState createState() => _DraggableCardState();
}

class _DraggableCardState extends State<DraggableCard>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  Alignment _dragAlignment = Alignment.center;
  Animation<Alignment> _animation;

  /// Calculates and runs a [SpringSimulation].
  void _runAnimation(Offset pixelsPerSecond, Size size) {
    _animation = _controller.drive(
      AlignmentTween(
        begin: _dragAlignment,
        end: Alignment.center,
      ),
    );
// Calculate the velocity relative to the unit interval, [0,1],
// used by the animation controller.
    final unitsPerSecondX = pixelsPerSecond.dx / size.width;
    final unitsPerSecondY = pixelsPerSecond.dy / size.height;
    final unitsPerSecond = Offset(unitsPerSecondX, unitsPerSecondY);
    final unitVelocity = unitsPerSecond.distance;

//     const spring = SpringDescription(
//       mass: 30,
//       stiffness: 1,
//       damping: 1,
//     );

//     final simulation = SpringSimulation(spring, 0, 1, -unitVelocity);

//    _controller.animateWith(simulation);
  }

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);

    _controller.addListener(() {
      setState(() {
        _dragAlignment = _animation.value;
      });
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return GestureDetector(
      onVerticalDragStart: (details) {
        _controller.stop();
      },
      onVerticalDragUpdate: (details) {
        print("${details.delta.dx} ${details.delta.dy}");
        setState(() {
          _dragAlignment += Alignment(
            details.delta.dx / (size.width / 0),
            details.delta.dy / (size.height * 1),
          );
        });
        if (details.delta.dy < 0) {
          print("Dragging in +X direction");
          widget.count++;
        } else {
          print("Dragging in -X direction");
          widget.count--;
        }
      },
      onVerticalDragEnd: (details) {
        _runAnimation(details.velocity.pixelsPerSecond, size);
      },
      child: Align(
        alignment: _dragAlignment,
        child: Text(
          widget.count.toString(),
          style: const TextStyle(
            fontSize: 60.0,
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}