Flutter logic issue

Question

I'm building this small game , it's similar to Qix game .

I already built the first screens now i need to implement the functionality , the car should be moving using the buttons , and while moving it should draw like a container behind it until it feel all the stadium .

this is where I'm making the car moves :

class _GameScreenState extends State<GameScreen> {
  double xPosition = Random().nextInt(230).toDouble();
  double yPposition = Random().nextInt(200).toDouble();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/bg.png"),
              fit: BoxFit.cover,
            ),
          ),
          child: Column(
            children: [
              // Game play
              Expanded(
                flex: 6,
                child: Stack(
                  children: [
                    Container(
                      height: MediaQuery.of(context).size.height,
                      width: MediaQuery.of(context).size.width,
                      color: Colors.transparent,
                    ),
                    Positioned(
                      bottom: yPposition,
                      left: xPosition,
                      child: Image.asset("assets/images/car.png"),
                    )
                  ],
                ),
              ),
              // Player inputes
              Expanded(
                child: Container(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Row(
                          children: [
                            RoundIconButton(
                              onPress: () {
                                setState(() {
                                  yPposition--;
                                });
                              },
                              icon: Icons.arrow_downward,
                            ),
                            RoundIconButton(
                              onPress: () {
                                setState(() {
                                  yPposition++;
                                });
                              },
                              icon: Icons.arrow_upward,
                            ),
                          ],
                        ),
                        Row(
                          children: [
                            RoundIconButton(
                              onPress: () {
                                setState(() {
                                  xPosition--;
                                });
                              },
                              icon: Icons.arrow_back,
                            ),
                            RoundIconButton(
                              onPress: () {
                                setState(() {
                                  xPosition = xPosition + 10;
                                });
                              },
                              icon: Icons.arrow_forward,
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

I also need the car keep moving when I press the button , in my case it moves only one time

Answer 1

You can a timer how often you like to change the position.

To get tap event, GestureDetector is suitable in this case, we will use onPanStart to update the value using timer and onPanEnd to cancel the timer.

Run on dartPad.

  late Timer timer;

  final duration = const Duration(milliseconds: 100);
  void moveUp(_) {
    timer = Timer.periodic(duration, (timer) {
      setState(() {
        yPposition++;
      });
    });
  }

  void moveDown(_) {
    timer = Timer.periodic(duration, (timer) {
      setState(() {
        yPposition--;
      });
    });
  }

  void moveRight(_) {
    timer = Timer.periodic(duration, (timer) {
      setState(() {
        xPosition++;
      });
    });
  }

  void moveLeft(_) {
    timer = Timer.periodic(duration, (timer) {
      setState(() {
        xPosition--;
      });
    });
  }

  void onEnd(_) {
    timer.cancel();
  }

and method will be used

Row(
      children: [
        GestureDetector(
          onPanStart: moveDown,
          onPanEnd: onEnd,
          child: Icon(Icons.arrow_downward),
        ),
        GestureDetector(
          onPanStart: moveUp,
          onPanEnd: onEnd,
          child: Icon(Icons.arrow_upward),
        ),
      ],
    ),
    Row(
      children: [
        GestureDetector(
          onPanStart: moveRight,
          onPanEnd: onEnd,
          child: Icon(Icons.arrow_forward),
        ),
        GestureDetector(
          onPanStart: moveLeft,
          onPanEnd: onEnd,
          child: Icon(Icons.arrow_back),
        ),
      ],
    ),
  ],
),