flutter: how to change a content based on the value we input on textfield

Viewed 61

The case is I want to change the elevatedbutton child text to 'ok' when the number I input on the textfield is greater than or equals to the value of a

sample

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

int a = 1654;

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  TextEditingController controller = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text(
          a.toString(),
        ),
        SizedBox(height: 20),
        TextField(
          controller: controller,
          keyboardType: TextInputType.number,
        ),
        SizedBox(height: 20),
        ElevatedButton(
          style: ElevatedButton.styleFrom(
            minimumSize: Size(100, 50),
          ),
          onPressed: () {},
          child: Text('not ok'),
        )
      ],
    );
  }
}
4 Answers

Listen to on change event on the text field and set state for the button text

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

int a = 1654;

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  TextEditingController controller = TextEditingController();
  String btnText = 'Not OK';

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text(
          a.toString(),
        ),
        const SizedBox(height: 20),
        TextField(
          controller: controller,
          keyboardType: TextInputType.number,
          onChanged: (String value) {
            int _intValue = int.tryParse(value) ?? 0;
            setState(() {
              btnText = (_intValue >= a) ? "OK" : "Not OK";
            });
          },
        ),
        const SizedBox(height: 20),
        ElevatedButton(
          style: ElevatedButton.styleFrom(
            minimumSize: const Size(100, 50),
          ),
          onPressed: () {},
          child: Text(btnText),
        )
      ],
    );
  }
}

You add listener to the TextEditingController and use a state variable for button text.

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int a = 1654;
  String buttonText = 'not ok';
  late TextEditingController controller = TextEditingController()
    ..addListener(() {
      int textNumber = int.tryParse(controller.text) ?? 0;
      if (textNumber >= a) {
        setState(() {
          buttonText = "ok";
        });
      } else {
        setState(() {
          buttonText = "not ok";
        });
      }
    });

And use the buttonText

ElevatedButton(
  onPressed: () {},
  child: Text(buttonText),

More about TextEditingController

You can use the onChanged property of the TextField.

String buttonText = 'no';

TextFied(
onChanged: (value){
if(value >= a){
setState((){
 buttonText = 'ok';
});
}
}
)

Please make the changes as below.

Add Button title text variable as below:

  String buttonText = "NOT OK";

Update your TextField with below code

TextField(

            controller: controller,
            onChanged: (value){
               if((double.tryParse(value) ?? 0) > a){
                setState((){
                  buttonText = "OK";
                });
              }else{
                setState((){
                  buttonText = "NOT OK";
                });
              }
            },
            keyboardType: TextInputType.number,
          ),

Update your ElevatedButton with below code

ElevatedButton(
            style: ElevatedButton.styleFrom(
              minimumSize: Size(100, 50),
            ),
            onPressed: () {},
            child: Text(buttonText),
          )

Here, the complete logic is added in onChanged method of TextField

Related