separate function inside same class is not working

Question

I try to decrease and increase the number and it works well. Here the question is, when i create a separate function for my onTapDown function, the number decrement is not working. Did i have made any mistake over here? But when i place this inside my onTap function it works well just like the funtion in add incon.

import 'dart:async';
import 'package:flutter/material.dart';

class Container1 extends StatefulWidget {
  @override
  _Container1State createState() => _Container1State();
}

class _Container1State extends State<Container1> {
  int num = 20;
  Timer timer;
  void minusOnTapDown(int parameter) {
    timer = Timer.periodic(Duration(milliseconds: 100), (timer) {
      setState(() {
        parameter--;
        if (parameter <= 1) {
          timer.cancel();
          parameter = 1;
        }
      });
    });
  }

  void plusOnTapDown(int parameter) {
    timer = Timer.periodic(Duration(milliseconds: 100), (timer) {
      setState(() {
        parameter--;
        if (parameter <= 0) {
          timer.cancel();
        }
      });
    });
  }

  void cancelTimer(int parameter) {
    setState(() {
      timer.cancel();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            '$num',
            style: TextStyle(fontSize: 30.0),
          ),
          SizedBox(
            height: 50.0,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              GestureDetector(
                onTapDown: (TapDownDetails details) {
                  minusOnTapDown(num);
                },
                onTapUp: (TapUpDetails details) {
                  cancelTimer(num);
                },
                onTapCancel: () {
                  cancelTimer(num);
                },
                child: Container(
                  height: 50.0,
                  width: 50.0,
                  color: Colors.grey,
                  child: Icon(Icons.minimize),
                ),
              ),
              SizedBox(
                width: 50.0,
              ),
              GestureDetector(
                onTapDown: (TapDownDetails details) {
                  print('Down');
                  timer = Timer.periodic(Duration(milliseconds: 100), (timer) {
                    setState(() {
                      num++;
                    });
                  });
                },
                onTapUp: (TapUpDetails details) {
                  setState(() {
                    print('Up');
                    timer.cancel();
                  });
                },
                onTapCancel: () {
                  print('Cancel');
                  timer.cancel();
                },
                child: Container(
                  height: 50.0,
                  width: 50.0,
                  color: Colors.grey,
                  child: Icon(Icons.add),
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}

Answer 1

I think the error occurs because you are trying to decrease the parameter instead of the actual num. parameter-- wont reflect on num.

Call it like this:

onTapDown: (TapDownDetails details) {
              minusOnTapDown();
            },
onTapUp: (TapUpDetails details) {
              cancelTimer();

and make change in the function:

void minusOnTapDown() {
timer = Timer.periodic(Duration(milliseconds: 100), (timer) {
  setState(() {
    num--;
    if (num<= 1) {
      timer.cancel();
      num= 1;
    }
  });
});
}

Hope this works!

Answer 2

This is because when you create separate method you are passing a parameter named parameter and increasing or decreasing that. While the num variable which is the variable reflecting in the UI is totally unaffected. So in the separate method too, you need to increase or decrease the num variable directly. And there is no need to pass the parameter.

  void minusOnTapDown() {
    timer = Timer.periodic(Duration(milliseconds: 100), (timer) {
      setState(() {
        num--;
        if (num <= 1) {
          timer.cancel();
          num = 1;
        }
      });
    });
  }

And call it in the onTapDown callback.

onTapDown: (TapDownDetails details) {
                  minusOnTapDown();
                },