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

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'),
        )
      ],
    );
  }
}

CodePudding user response：

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),
        )
      ],
    );
  }
}

CodePudding user response：

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