NumberPicker icon indicating copy to clipboard operation
NumberPicker copied to clipboard

Too fast value changes lead to not enough rebuilds?

Open jlnrrg opened this issue 4 years ago • 0 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()),
              )
            ],
          )
        ]);
  }
}

https://user-images.githubusercontent.com/77293597/122889979-8f935880-d343-11eb-912e-6046cd8d74db.mp4

jlnrrg avatar Jun 22 '21 08:06 jlnrrg