long press for incrementing value

Arnob 0
Viewed 29

I have an increment button with a callback function:

class IncrementButton extends StatelessWidget {
  final VoidCallback callback;
  const IncrementButton({
    Key? key,
    required this.callback,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        callback();
      },
      onLongPressStart: ((details) {
        callback();
      }),
      ......
    );
  }
}

And using it as:

 IncrementButton(
   callback: _increment,
 ),

The _increment function is as:

  _increment() {
    value += 1;
  }

What I want is when the user taps once, the _increment function will be called. But when the user keeps a long press on the button, the same increment function should be called. But that doesn't happen. The _increment method is getting called only once for long Press

flutter
2 Answers

I guess you want the number to be incremented continually while long pressing the button/container. You need a timer which starts when onLongPress gets called. The timer stops when ´onLongPressEnd` gets called.

Try this:

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  String action = "START";
  Timer? timer;
  int number = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Material App Bar'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(action),
              SizedBox(height: 50),
              Material(
                borderRadius: BorderRadius.circular(20),
                elevation: 20,
                child: GestureDetector(
                  onTap: () => setState(() {
                    action = "Tap";
                    number++;
                  }),
                  onLongPress: () => setState(() {
                    timer = Timer.periodic(Duration(milliseconds: 50), (timer) {
                      setState(() {
                        action = "Longpress started";
                        number++;
                      });
                    });
                  }),
                  onLongPressEnd: (_) => setState(() {
                    action = "Longpress stopped";
                    timer?.cancel();
                  }),
                  child: Container(
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: Colors.red[50],
                      borderRadius: BorderRadius.circular(20)
                    ),
                    width: 100,
                    height: 100,
                    child: Text('Tap')
                  ),
                ),
              ),
              SizedBox(height: 50,),
              Text(number.toString())
            ],
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    timer?.cancel();
    super.dispose();
  }
}

Proof: Proof

TripleNine0

Change your onlongpressStart.

do{
 callback();
} while(btnPressed);

And on onlongpressEnd

setState(() => btnPressed = false);
Sergio Clemente0
Related