Flutter NumberPicker in AlertDialog doesnt work properly

Question

When I pick a new value with the NumberPicker, it always jumps back to the previous value and not to the current chosen value.

I am using the NumberPicker within AlertDialog and I call the NumberPicker with the pickValue() function.

  void pickValue() {
    showDialog<int>(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text("Wähle eine Aufgabenanzahl"),
            content: NumberPicker(
              selectedTextStyle: TextStyle(color: Colors.red),
              value: currentValue,
              minValue: 1,
              maxValue: 10,
              onChanged: (value) => setState(() => currentValue = value),
            ),
            actions: [
              TextButton(
                child: Text("OK", style: TextStyles.body),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              )
            ],
          );
        });
  }

score 4 · Accepted Answer · answered Oct 17 '21 at 22:56

In This widget tree(using separate demo) you can see the showDialog() separated from the current context.

The use StatefulBuilder inside showDialog() or showModalBottomSheet()+... is these widgets are separated from current context tree.

We use StatefulBuilder when we like to show changes on dialogs. StatefulBuilder has its own state⇾ builder: (BuildContext context, setState) and calling setState is using StatefulBuilder's setstate.

Now let's say you want to change both UI, to do that you need to simply rename StatefulBuilder's state to something like SBsetState inside builder.

to update the _WidgetState use setState((){})
to update on dialog UI, use StatefulBuilder's state like SBsetState((){})

For more,

  showDialog<int>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text("Wähle eine Aufgabenanzahl"),
        content:StatefulBuilder(
          builder: (context, SBsetState) {
            return NumberPicker(
                selectedTextStyle: TextStyle(color: Colors.red),
                value: currentValue,
                minValue: 1,
                maxValue: 10,
                onChanged: (value) { 
                setState(() => currentValue = value);// to change on widget level state 
                SBsetState(() => currentValue = value); //* to change on dialog state
                }
              );
          }
        ),
         
        actions: [
          TextButton(
            child: Text("OK", style: TextStyles.body),
            onPressed: () {
              Navigator.of(context).pop();
            },
          )
        ],
      );
    });

I can't scroll with mouse drag. when I move the vertical scroll bar, the numbers go too high and exceed the maxValue. — Rony Tesler, Mar 07 '22 at 18:40
@Rony Tesler Can you provide [minimal-reproducible-example](https://stackoverflow.com/help/minimal-reproducible-example) and you can find [answer about mouse drag behavior.](https://stackoverflow.com/q/69232764/10157127) — Md. Yeasin Sheikh, Mar 07 '22 at 18:46
@YeasinSheikh Seems to work now, maybe it was a problem with the hot reload, not sure. Thanks! — Rony Tesler, Mar 07 '22 at 18:50

score 1 · Answer 2 · answered Oct 17 '21 at 20:55

Wrap the content of the alert dialog in a StatefulBuilder. It will provide a new context and a setState function to rebuild the widget.

void pickValue() {
showDialog<int>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text("Wähle eine Aufgabenanzahl"),
        content:StatefulBuilder(
          builder: (context, setState) {
            return NumberPicker(
                selectedTextStyle: TextStyle(color: Colors.red),
                value: currentValue,
                minValue: 1,
                maxValue: 10,
                onChanged: (value) => setState(() => currentValue = value),
              );
          }
        ),
         
        actions: [
          TextButton(
            child: Text("OK", style: TextStyles.body),
            onPressed: () {
              Navigator.of(context).pop();
            },
          )
        ],
      );
    });
}

Flutter NumberPicker in AlertDialog doesnt work properly

2 Answers2

Linked