Setting a widget property conditionally is not working

Question

I have this widget:

   TextInputSettingsTile(
      title: 'Valor actual',
      settingKey: 'current_value',
      initialValue: '0',
      keyboardType: isNumber
          ? TextInputType.numberWithOptions()
          : TextInputType.text,
      inputFormatters: [
        isNumber
            ? FilteringTextInputFormatter.digitsOnly
            : FilteringTextInputFormatter.singleLineFormatter,
      ],
      onChange: (value) {
        if (isNumber) {
          Settings.setValue<int>(
            'current_int_value',
            int.tryParse(value) ?? 0,
          );
        } else {
          Settings.setValue<String>('current_string_value', value);
        }
      },
    ),

This is similar to TextFormField and, in fact, it has almost the same properties.

Look at this fragment:

      keyboardType: isNumber
          ? TextInputType.numberWithOptions()
          : TextInputType.text,
      inputFormatters: [
        isNumber
            ? FilteringTextInputFormatter.digitsOnly
            : FilteringTextInputFormatter.singleLineFormatter,
      ],

where isNumber is a boolean variable declared and assigned somewhere else.

When isNumber is true, I want to allow only digits to be inputted, otherwise, any character.

The problem is that it does not work when isNumber value changes. In order to make it work, I need to quit and restart the application.

isNumber variable is set in an onChange event of other control:

      onChange: (value) {
        isNumber = value;
      },

I have updated the question, however, I did not think it was relevant because it is just using isNumber = value in the onChange event of a CheckboxSettingsTile widget. — jstuardo
– jstuardo, Commented Nov 6 at 21:50
well, you are not rebuilding your widget, simply call setState when your widget extends StatefulWidget (or use StatefulBuilder - you could also use ValueListenableBuilder but it requires ValueListenable<bool> like ValueNotifier<bool> for example) — pskink
– pskink, Commented Nov 7 at 6:13
so in short: if you are extending StatefulWidget just use setState() and when extending StatelessWidget wrap your widgets tree with StatefulBuilder and call its setState function passed to builder callback — pskink
– pskink, Commented Nov 7 at 8:13

Jashwanth Neela · Accepted Answer · 2025-11-07 00:20:48Z

3

The issue is that changing isNumber alone doesn’t rebuild your widget tree — Flutter widgets are immutable and only update when a rebuild is triggered.

When you set isNumber in your onChange callback like this:

onChange: (value) {
  isNumber = value;
},

it updates the variable but doesn’t call setState(), so your widget doesn’t get rebuilt with the new keyboardType and inputFormatters.
That’s why it only updates after you restart the app.

Fix

Wrap the assignment in setState():

onChange: (value) {
  setState(() {
    isNumber = value;
  });
},

This triggers a rebuild, so your TextInputSettingsTile re-evaluates the keyboardType and inputFormatters with the new value.

Example

class MySettingsPage extends StatefulWidget {
  const MySettingsPage({super.key});

  @override
  State<MySettingsPage> createState() => _MySettingsPageState();
}

class _MySettingsPageState extends State<MySettingsPage> {
  bool isNumber = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SwitchListTile(
          title: const Text('Use number input'),
          value: isNumber,
          onChanged: (value) {
            setState(() {
              isNumber = value;
            });
          },
        ),
        TextInputSettingsTile(
          title: 'Valor actual',
          settingKey: 'current_value',
          initialValue: '0',
          keyboardType: isNumber
              ? const TextInputType.numberWithOptions()
              : TextInputType.text,
          inputFormatters: [
            isNumber
                ? FilteringTextInputFormatter.digitsOnly
                : FilteringTextInputFormatter.singleLineFormatter,
          ],
          onChange: (value) {
            if (isNumber) {
              Settings.setValue<int>(
                'current_int_value',
                int.tryParse(value) ?? 0,
              );
            } else {
              Settings.setValue<String>('current_string_value', value);
            }
          },
        ),
      ],
    );
  }
}

answered Nov 7 at 0:20

Jashwanth Neela

6234 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jstuardo Nov 8 at 18:43

Helo.... thanks, but I used other way to set the state, by using ValueNotifier

Jashwanth Neela Nov 9 at 3:52

Yeah, the value notifier is better than setState.

jstuardo · Accepted Answer · 2025-11-06 22:41:22Z

0

Finally the way to go is to use ValueNotifier to monitor changes in isNumber value.

I am declaring the isNumber this way now:

late ValueNotifier<bool> isNumber = ValueNotifier(false);

Then wrapped the widget with ValueListenableBuilder . That way, to change isNumber value I had to use:

              onChange: (on) {
                isNumber.value = on;
              },

When that was used, the state of the widget changes so that the new property value is applied.

answered Nov 6 at 22:41

jstuardo

4,49714 gold badges85 silver badges177 bronze badges

Collectives™ on Stack Overflow

Setting a widget property conditionally is not working

2 Answers 2

Fix

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Fix

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related