MarcinusX / NumberPicker

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Too fast value changes lead to not enough rebuilds?

jlnrrg opened this issue · comments

I noticed the inclution of additional tap buttons leads to an interesting behaviour.
When tapping those multiple times per seconds, the NumberPicker widget can not cope with the rapid changes and does not increase the values equally.
This might be a general flutter issue, so please close the issue if that is the case.
(This here is just to raise awareness)

example widget
class NumberSelectDialog extends StatefulWidget {
  const NumberSelectDialog({Key? key, required this.initialValue, this.label})
      : super(key: key);

  final String? label;
  final int? initialValue;

  @override
  _NumberSelectDialogState createState() =>
      _NumberSelectDialogState(value: initialValue ?? 0);
}

class _NumberSelectDialogState extends State<NumberSelectDialog> {
  _NumberSelectDialogState({required this.value});
  int value;

  ButtonStyle get buttonStyle => OutlinedButton.styleFrom(
        minimumSize: const Size(40, 40),
        padding: EdgeInsets.zero,
        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
        // shape: RoundedRectangleBorder(
        //     borderRadius: BorderRadius.circular(15)),
      );

  @override
  Widget build(BuildContext context) {
    return SimpleDialog(
        title: widget.label != null ? Text(widget.label!) : null,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15),
        ),
        contentPadding: const EdgeInsets.all(10),
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              OutlinedButton(
                style: buttonStyle,
                child: Icon(FontAwesomeIcons.minus),
                onPressed: () => setState(() => value -= 1),
              ),
              NumberPicker(
                minValue: 0,
                maxValue: 500,
                value: value,
                onChanged: (newValue) => setState(() => value = newValue),
                infiniteLoop: true,
                haptics: true,
              ),
              OutlinedButton(
                style: buttonStyle,
                child: Icon(FontAwesomeIcons.plus),
                onPressed: () => setState(() => value += 1),
              ),
            ],
          ),
          const SizedBox(height: 10),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              OutlinedButton(
                style: OutlinedButton.styleFrom(
                    tapTargetSize: MaterialTapTargetSize.shrinkWrap),
                onPressed: () => AutoRouter.of(context).pop(),
                child: Text(LocaleKeys.cancel.tr()),
              ),
              const SizedBox(width: 10),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                    tapTargetSize: MaterialTapTargetSize.shrinkWrap),
                onPressed: () async {
                  await AutoRouter.of(context).pop(value);
                },
                child: Text(LocaleKeys.ok.tr()),
              )
            ],
          )
        ]);
  }
}
Peek.2021-06-22.10-19.mp4