skip to Main Content

I created a re-usable textfield for my Flutter project but the OnChange method is not working with the re-usable widget. Whenever I tried creating the field directly on the project it works. I am suspecting that the value option that comes with the Textfield onChange is likely the reason for the error. Any help with a solution?

class NumberOnlyTextField extends StatelessWidget{
  final controller;
  final String hintText;
  final bool obscureText;
  final bool enableTxtField;
  final Function()? onChanged;

  const NumberOnlyTextField({
    super.key,
    required this.controller,
    required this.hintText,
    required this.obscureText,
    required this.enableTxtField,
    required this.onChanged,
  });

  @override 
  Widget build(BuildContext context){
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 15.0),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(color: const Color.fromARGB(255, 213, 211, 211)),
          borderRadius: BorderRadius.circular(4),
        ),
        child: Padding(
          padding: const EdgeInsets.only(left: 10.0, right: 10.0),
          child: TextField(
            controller: controller,
            onChanged: (value) { onChanged; },
            obscureText: obscureText,
            enabled: enableTxtField,
            keyboardType: TextInputType.number,
            inputFormatters: [
              FilteringTextInputFormatter.allow(
                RegExp('[0-9]+.?[0-9]*'),
              ),
            ],
            decoration: InputDecoration(
              border: InputBorder.none,
              hintText: hintText,
              hintStyle: TextStyle(color: Colors.grey[500]),
            ),
          ),
        ),
      ),
    );
  }
}

Here is where it is used on another page:

      //Amount
      NumberOnlyTextField(
        controller: amountXController,
        onChanged: validateAmount(),
        hintText: 'Amount',
        obscureText: false,
        enableTxtField: true,
      ),
      const SizedBox(height: 10),

2

Answers


  1. {void Function(String)? onChanged}
    Type: void Function(String)?
    Called when the user initiates a change to the TextField’s value: when they have inserted or deleted text or reset the form.

    you’ll need to update your code as follows.

     final void Function(String)? onChanged;
    
    
     TextFormField(
                controller: controller,
                onChanged: onChanged,
    ``
    
    Login or Signup to reply.
  2. U are not calling ur onChanged function this why function is not working.

    I did this

    onChanged: (value) {
                  if (this.onChanged != null) this.onChanged!();
                },
    

    or

      onChanged: (value) {
              onChanged?.call();
            },
    

    so NumberOnlyTextField now

    class NumberOnlyTextField extends StatelessWidget {
      final controller;
      final String hintText;
      final bool obscureText;
      final bool enableTxtField;
      final Function()? onChanged;
    
      const NumberOnlyTextField({
        super.key,
        required this.controller,
        required this.hintText,
        required this.obscureText,
        required this.enableTxtField,
        required this.onChanged,
      });
    
      @override
      Widget build(BuildContext context) {
        return Padding(
          padding: const EdgeInsets.symmetric(horizontal: 15.0),
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(color: const Color.fromARGB(255, 213, 211, 211)),
              borderRadius: BorderRadius.circular(4),
            ),
            child: Padding(
              padding: const EdgeInsets.only(left: 10.0, right: 10.0),
              child: TextField(
                controller: controller,
                onChanged: (value) {
                  onChanged?.call();
                },
                obscureText: obscureText,
                enabled: enableTxtField,
                keyboardType: TextInputType.number,
                inputFormatters: [
                  FilteringTextInputFormatter.allow(
                    RegExp('[0-9]+.?[0-9]*'),
                  ),
                ],
                decoration: InputDecoration(
        
    
          border: InputBorder.none,
              hintText: hintText,
              hintStyle: TextStyle(color: Colors.grey[500]),
            ),
          ),
        ),
      ),
    );
    

    }
    }

    And now its working. I tried to print Value changed: when i write something in textfield. And it works !

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search