Flutter: Is there an onhold option instead of oppressed once to repeat SetState

Question

I want a button which I can hold down and then Setstate is repeating, unless I stop holding it.

I am a beginner and working at my first app. I want to calculate volume. People have to put in height, width and dept. I don't want in text(form)field, because the keyboard is necessary. I found a solution with two buttons, an add and a minus button.

I have it working, but people have to push the button very often to set the value of height they want.

I thought instead of oppressed, I use something as on hold and the counter is adding quickly. But I don't know the solution.

RawMaterialButton(
child: Icon(MdiIcons.minus),
onPressed: () {
setState(() {
width--;

Try the `Gesture Detector` it has an `onLongPress` that could start your "infinite loop of setState" and an `onLongPressEnd` to end it. — Abbas.M, Jul 15 '19 at 20:40
Hi Abbas, Thank you so much for helping me. I have tried your solution, but the loop does not working. I have made an void: void _minusWidth() { setState(() { width--; print(width); }); } and then I used this in the code: GestureDetector( onLongPress: _minusWidth, I don't understand how to get the infinity en how I stop it with onLongPressEnd. I have search the documentation on Flutter, but I can not find it. Hope you can help me again! — Margriet, Jul 16 '19 at 14:29
Try putting it in a `while loop` and have a `boolean flag` that would be set to true (while holding) which would start the loop and false when you release which would stop it. I'm not sure it would work though — Abbas.M, Jul 16 '19 at 15:57

score 4 · Answer 1 · answered Apr 28 '20 at 14:54

4

If this topic is still interesting for you, you could try holding_gesture, see https://pub.dev/packages/holding_gesture

answered Apr 28 '20 at 14:54

rgisi

858
6
21

score 0 · Accepted Answer · answered Jul 17 '19 at 18:31

Ok, I didn't fix it. It was to complex for me as a beginner. I found another solution. I made a row, with three children: a minus button and a plus button for fine tuning a slider-bar for the big steps.

This is the code I used, do you have better solutions, let me know. I just place it for other beginners like me. I want to thank special @Abbas.M who tried to help me.

Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    AnimatedOpacity(
                      opacity: height == 1 ? 0.0 : 1.0,
                      duration: Duration(milliseconds: 500),
                      child: RawMaterialButton(
                        child: Icon(MdiIcons.minus),
                        onPressed: () {
                          setState(() {
                            height > 1 ? height-- : height = height;
                          });
                        },
                        constraints: BoxConstraints.tightFor(
                          width: 25.0,
                          height: 25.0,
                        ),
                        shape: CircleBorder(),
                        fillColor: white,
                      ),
                    ),
                    SliderTheme(
                      data: SliderTheme.of(context).copyWith(
                        inactiveTrackColor: cAppBottomBar,
                        activeTrackColor: white,
                        thumbColor: white,
                        overlayColor: cShadow,
                        thumbShape:
                            RoundSliderThumbShape(enabledThumbRadius: 10.0),
                        overlayShape:
                            RoundSliderOverlayShape(overlayRadius: 17.0),
                      ),
                      child: Slider(
                          value: height.toDouble(),
                          min: 1,
                          max: 300,
                          onChanged: (value) {
                            setState(() {
                              height = value.toInt();
                            });
                          }),
                    ),
                    AnimatedOpacity(
                      opacity: height == 300 ? 0.0 : 1.0,
                      duration: Duration(milliseconds: 500),
                      child: RawMaterialButton(
                        child: Icon(Icons.add),
                        onPressed: () {
                          setState(() {
                            height < 300 ? height++ : height = height;
                          });
                        },
                        constraints: BoxConstraints.tightFor(
                          width: 25.0,
                          height: 25.0,
                        ),
                        shape: CircleBorder(),
                        fillColor: white,
                      ),
                    ),

score 0 · Answer 3 · edited Apr 24 '22 at 22:10

You should use GestureDetector widget's onTapDown (for holding the button) and onTapUp (for the release user's finger) features.

GestureDetector(
                onTapDown: (details) {
                  print("Someone is touchin' me !!");
                },
                onTapUp: (details) {
                  print("I relaxed, oh.");
                },
                child: Container(
                  height: 100,
                  width: 100,
                  color: Colors.brown,
                )),

Flutter: Is there an onhold option instead of oppressed once to repeat SetState

3 Answers3