Call a function whenever there is a change in Flutter-CodePudding

how can I call a function whenever there is a change in TextFormField .

I have many of them and it's more like an invoice.

So whenever the user changes a value, I need to make some mathematical operations.

The problem is that sometimes some TextFormField could be NULL (User did'tn insert a value yet) and that causes an error.

    import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
   late TextEditingController age =  TextEditingController();
       late TextEditingController height =  TextEditingController();

       late TextEditingController weight =  TextEditingController();
       late TextEditingController result =  TextEditingController();


    return Scaffold(
      appBar: AppBar(
        title: const Text('BMI !'),
      ),
      body: Center(
        child: DecoratedBox(
          decoration: const BoxDecoration(
            color: Colors.white10,
          ),
          child: Padding(
            padding: const EdgeInsets.all(48.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                TextFormField(
                  controller:age,
            decoration: const InputDecoration(
              border: UnderlineInputBorder(),
              labelText: 'AGE',
            ),
          ),
                 TextFormField(
                   controller:height,
            decoration: const InputDecoration(
              border: UnderlineInputBorder(),
              labelText: 'HEIGHT',
            ),
          ),
                 TextFormField(
                   controller:weight,
            decoration: const InputDecoration(
              border: UnderlineInputBorder(),
              labelText: 'WEIGHT',
            ),
          ),
                 TextFormField(
                   enabled:false,
                   controller:result,
            decoration: const InputDecoration(
              border: UnderlineInputBorder(),
              labelText: 'Result',
            ),
          ),
          
              ],
            ),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(
     MaterialApp(
      home: MyApp(),
    ),
  );
}

CodePudding user response：

To call a function every time the TextFormField has a change, there's a property for exactly that! the onChanged property, which fires every time something is typed:

return TextFormField(
      onChanged: (value) {
        // do something with `value`
      },);

Since this is only called once there's a change, you don't have to worry about null

Edit: you can check if the controler.isNotEmpty and do something based on that:

 void onChanged(String value){
      if (_controller.text.isNotEmpty && _secondController.text.isNotEmpty) {
        // do something
      } else {
        // do something
      }
    }

    return TextFormField(
      controller: _controller,
      onChanged: (value) => onChanged(value),);