Question 79549 in Flutter Question posted in
The official Flutter documentation can be found here.

Showing a button to the user based on the data entered in the TextFormField – Flutter

final TextEditingController _weight = TextEditingController();

 if (_weight.text.contains(RegExp(r'[0-9]')))
        Padding(
            padding: const EdgeInsets.only(bottom: 20),
            child: BMIButton(
              onpressed: () {
                Navigator.push(
                  context,
                  PageTransition(
                      type: PageTransitionType.rightToLeft,
                      child: BMIHeight(),
                      inheritTheme: true,
                      ctx: context),
                );
              },
            ))

I’m trying to show an OutlinedButton when the user enters some data into the textFormField. When I enter a value in the TextFormField and confirm, it doesn’t show a button, but when I hot reload it, it sees that value and shows the button.

Tags:

4

Answers


  1. 0

    This means you need just to update the state of your widget, first make sure this inside a StatefulWidget, then add a SetState(() {}) on the end of that method:

    if (_weight.text.contains(RegExp(r'[0-9]')))
        Padding(
            padding: const EdgeInsets.only(bottom: 20),
            child: BMIButton(
              onpressed: () {
                Navigator.push(
                  context,
                  PageTransition(
                      type: PageTransitionType.rightToLeft,
                      child: BMIHeight(),
                      inheritTheme: true,
                      ctx: context),
                );
              },
            ))
           //...
           setState(() {}) // add this
    Login or Signup to reply.
  2. 0

    Try to add listener and call setState to update ui

     late final TextEditingController _weight = TextEditingController()
    ..addListener(() {
      setState(() {});
    });

    And override the dispose method and depose this controller.

    Login or Signup to reply.
  3. 0

    TextEditingController is implementing Listenable. You can exploit that to build part of your UI conditionally.

    Moreover, TextEditingController must be correctly initialized and disposed of. You can do that smoothly with flutter_hooks.

    You’d obtain this concise result:

    class MyWidget extends HookWidget {
  const MyWidget({super.key});
  @override
  Widget build(BuildContext context) {
    final textController = useTextEditingController();

    return Column(  // example, I'm not sure of what you've got there
      children: [
        TextField(controller: textController),  // Your Text Field
        ValueListenableBuilder(
          valueListenable: textController,
          builder: (context, value, child) {
            return value.text.contains(...)
                ? OutlinedButton(  // Your Button
                    onPressed: () {
                      // .. do stuff
                    },
                    child: const Text('I am ready to be pressed'),
                  )
                : const SizedBox.shrink();  // This is empty, but you can render whatever
          },
        )
      ],
    );
  }
}
    Login or Signup to reply.
  4. 0

    Your code that checks if the TextFormField is populated needs to be inside the build function of a stateful widget.
    To trigger the state update, listen to changes on the TextFormField, inside the function set the state of some variable that you can check.
    Add this to the initState method:

    _weight.addListener(() {
    setState(() {
        _inputText = _weight.text; // Create this variable inside the state class
    });
});

    And change your if statement as follows:

    if (_inputText.contains(RegExp(r'[0-9]')))

    Method 2

    You could also Wrap your Widget with a Visibility Widget:

    Visibility(
    visible: RegExp(r'[0-9]').hasMatch(_inputText),
    child: [YOUR WIDGET],
)

    This still needs the listener with the setState call.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search