Flutter Enable/Disable Button based on TextFormField content












0















How can I activate/deactivate a button based on the content of a TextFormField?



I want to make sure a user can only press Button X if the TextFormField has 10 entered numbers (if it's a mobile number).



Thanks!










share|improve this question



























    0















    How can I activate/deactivate a button based on the content of a TextFormField?



    I want to make sure a user can only press Button X if the TextFormField has 10 entered numbers (if it's a mobile number).



    Thanks!










    share|improve this question

























      0












      0








      0








      How can I activate/deactivate a button based on the content of a TextFormField?



      I want to make sure a user can only press Button X if the TextFormField has 10 entered numbers (if it's a mobile number).



      Thanks!










      share|improve this question














      How can I activate/deactivate a button based on the content of a TextFormField?



      I want to make sure a user can only press Button X if the TextFormField has 10 entered numbers (if it's a mobile number).



      Thanks!







      button keyboard flutter textfield flutter-layout






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Dec 28 '18 at 20:57









      DrainBramageDrainBramage

      123




      123
























          1 Answer
          1






          active

          oldest

          votes


















          0














          A simple way would be to set the autovalidate property of our TextFormField to true. This will automatically detect for changes on our TextFormField widget. We can then try to check if our TextFormField's value has a String length of 10 characters on the validator property . After that we can call setState to enable or disable our button (I use FlatButton in this example).



          bool _btnEnabled = false;

          ...

          @override
          Widget build(BuildContext context){

          ...

          TextFormField(

          ...
          autovalidate: true,
          validator: (String txt){
          if (txt.length == 10){
          setState((){
          _btnEnabled = true;
          });
          } else {
          setState((){
          _btnEnabled = false;
          });
          }
          }

          ...

          FlatButton(
          onPressed: _btnEnabled == true ? yourCallback : null,
          child: ...





          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53964219%2fflutter-enable-disable-button-based-on-textformfield-content%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            A simple way would be to set the autovalidate property of our TextFormField to true. This will automatically detect for changes on our TextFormField widget. We can then try to check if our TextFormField's value has a String length of 10 characters on the validator property . After that we can call setState to enable or disable our button (I use FlatButton in this example).



            bool _btnEnabled = false;

            ...

            @override
            Widget build(BuildContext context){

            ...

            TextFormField(

            ...
            autovalidate: true,
            validator: (String txt){
            if (txt.length == 10){
            setState((){
            _btnEnabled = true;
            });
            } else {
            setState((){
            _btnEnabled = false;
            });
            }
            }

            ...

            FlatButton(
            onPressed: _btnEnabled == true ? yourCallback : null,
            child: ...





            share|improve this answer




























              0














              A simple way would be to set the autovalidate property of our TextFormField to true. This will automatically detect for changes on our TextFormField widget. We can then try to check if our TextFormField's value has a String length of 10 characters on the validator property . After that we can call setState to enable or disable our button (I use FlatButton in this example).



              bool _btnEnabled = false;

              ...

              @override
              Widget build(BuildContext context){

              ...

              TextFormField(

              ...
              autovalidate: true,
              validator: (String txt){
              if (txt.length == 10){
              setState((){
              _btnEnabled = true;
              });
              } else {
              setState((){
              _btnEnabled = false;
              });
              }
              }

              ...

              FlatButton(
              onPressed: _btnEnabled == true ? yourCallback : null,
              child: ...





              share|improve this answer


























                0












                0








                0







                A simple way would be to set the autovalidate property of our TextFormField to true. This will automatically detect for changes on our TextFormField widget. We can then try to check if our TextFormField's value has a String length of 10 characters on the validator property . After that we can call setState to enable or disable our button (I use FlatButton in this example).



                bool _btnEnabled = false;

                ...

                @override
                Widget build(BuildContext context){

                ...

                TextFormField(

                ...
                autovalidate: true,
                validator: (String txt){
                if (txt.length == 10){
                setState((){
                _btnEnabled = true;
                });
                } else {
                setState((){
                _btnEnabled = false;
                });
                }
                }

                ...

                FlatButton(
                onPressed: _btnEnabled == true ? yourCallback : null,
                child: ...





                share|improve this answer













                A simple way would be to set the autovalidate property of our TextFormField to true. This will automatically detect for changes on our TextFormField widget. We can then try to check if our TextFormField's value has a String length of 10 characters on the validator property . After that we can call setState to enable or disable our button (I use FlatButton in this example).



                bool _btnEnabled = false;

                ...

                @override
                Widget build(BuildContext context){

                ...

                TextFormField(

                ...
                autovalidate: true,
                validator: (String txt){
                if (txt.length == 10){
                setState((){
                _btnEnabled = true;
                });
                } else {
                setState((){
                _btnEnabled = false;
                });
                }
                }

                ...

                FlatButton(
                onPressed: _btnEnabled == true ? yourCallback : null,
                child: ...






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Dec 28 '18 at 21:38









                Jerome EscalanteJerome Escalante

                59519




                59519






























                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53964219%2fflutter-enable-disable-button-based-on-textformfield-content%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Mossoró

                    Can't read property showImagePicker of undefined in react native iOS

                    Pushsharp Apns notification error: 'InvalidToken'