Number shown is invalid if the range is externally limited

[dedvalson]

The attached code demonstrates a bug with the spinbox. The spinbox itself is limited to a range of 2.0 to 4.0. The value starts at 3.0. However the onChanged callback limits the value to a range of 2.5 to 3.5. If you push the "+" button 6 times, the spinbox will display 3.6 even though the value given to it is limited to 3.5

// ignore_for_file: avoid_print

import 'package:flutter/material.dart';
import 'package:flutter_spinbox/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SpinBox Bug Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'SpinBox Bug'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double value = 3.0;
  @override
  Widget build(BuildContext context) {
    print('value = $value');
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                'The Value resets to 3.0.\n\nIf you push the plus key 6 times\n the number shown will advance to 3.6\neven though the value being assigned is limited to 3.5',
                textAlign: TextAlign.center,
              ),
            ),
            SpinBox(
              value: value,
              min: 2.0,
              max: 4.0,
              decimals: 1,
              step: 0.1,
              onChanged: (newValue) {
                setState(() {
                  if (newValue <= 3.5 && newValue >= 2.5) {
                    value = newValue;
                  }
                  print('newValue = $newValue, value = $value');
                });
              },
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text('Value = $value'),
            ),
            ElevatedButton(
              child: const Text('RESET'),
              onPressed: () {
                setState(() {
                  value = 3.0;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

[jpnurmi]

You can use the canChange callback to control whether changes are allowed:

SpinBox(
  value: value,
  // ...
  canChange: (newValue) {
    return newValue <= 3.5 && newValue >= 2.5;
  },
  onChanged: (newValue) {
    setState(() => value = newValue);
  },
),

[dedvalson]

I did try to use CanChange.

However it presents me with another problem, perhaps you can suggest an answer that I am missing.

Suppose you have a spinbox with a valid range of 1.5 to 2.5. The user starts typing and enters the single digit 1. My code now gets a callback of both canChange and onChanged. However the value I get is 1, which is not acceptable.

If I return false from canChange the edit ends and the user never gets a chance to type ".5".

If I return true from canChange the user types .5. Now I get both callbacks again with 1.5 as the value.

I can't distingush between "the user is still typing" and "the user is done"

How can I prevent the callback until the user presses the done editing checkbox or determine if the user has pressed that or not?

Thanks,

Don

[dedvalson]

Actually I think I might have found an answer. I attach a focus node to the spinbox and then check to see if it has focus in onChanged and ignore the onChanged if it still has the focus. This seems to work. But it seems like it would be better if the spinbox did this or at least provided a different callback.