How to add check if user has typed something in a text field?

Question

I have three classes that are separated in three files according to the class name for the log in page; CustomTextField (with custom text field styles set), FormCard (basically the form for logging in which includes the CustomTextField), and LogInPage (has the form card, and buttons for login and sign up).

The login page build method calls the FormCard(), and FormCard build method calls CustomTextField(). How do I check whether the user left the text field in empty or not when the login button is pressed?

I read the GlobalKey documentation, and the examples given are when the textfield is in the same file. Is it possible to use GlobalKey to check while the classes are in different files?

score 0 · Answer 1 · answered Jul 21 '19 at 07:13

0

Try it yourself and see if it works.
If you import all the classes then they all behave just like a single file. The segregation is just for maintaining and management of code as the size of your app grows. So, IMO it will work just the same.

answered Jul 21 '19 at 07:13

Mahi

1,164
17
24

Will do now! Finally got extra time to try. – Ammar Farhan Mohamad Rizam Jul 21 '19 at 09:45
yeah try it and let everyone know. Mark the answer if it works – Mahi Jul 22 '19 at 17:46

score 0 · Answer 2 · answered Jul 22 '19 at 19:08

I would recommend trying to avoid GlobalKey usage in your app, see this question for further information.

Now to fix your problem you can approach this using many state management techniques, I will give you an example of the simplest technique, while not the best way, will work.

First you declare a TextEditingController in your login screen, then you will pass down this controller until you pass it to the CustomTextField(). The TextEditingController will contain the text in the textfield it is used on. See the code snippet below for more details.


class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() =>_LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
    TextEditingController controller;

    @override
    void initState() {
        controller = TextEditingController();
        super.initState();
    }

    @override
    void dispose() {
        controller.dispose(); //prevents memory leak
    }

    @override
    Widget build(BuildContext context) {
        // Here you can check if the TextField is empty or not
        if (controller.text == null || controller.text == "") {
             print("empty");
        } else {
             print("not empty");
        }
        return FormCard(controller: controller);

}

class FormCard extends StatelessWidget {
    final TextEditingController controller;
    FormCard({this.controller});

    @override
    Widget build(BuildContext context) {
        return CustomTextField(controller: controller);
    }
}

/* CustomTextField is stateful because sometimes
 stateless widgets do not update textfields text when
 equipped with controllers
*/
class CustomTextField extends StatefulWidget {

   final TextEditingController controller;
   CustomTextField({this.controller});

  @override
  _CustomTextFieldState createState() =>_CustomTextFieldState();
}

class _CustomTextFieldState extends State<CustomTextField> {
    @override
    Widget build(BuildContext context) {
        return TextField(
            controller: controller,
        );
    }
}

You will need to place all classes in the same file or import all of them as mahi stated.

This technique will be a headache in larger applications, look up State Management concepts in flutter to find much better ways of implementation.

score 0 · Answer 3 · answered Apr 23 '21 at 19:51

I know I am a bit late to this, but I want to point out the problem of using the Ali Amin' approach.

See, his answer would resolve the entire issue at hand if the user could not use whitespace in order to fill the text field. But if the user was to just press the spacebar and no other letters, then your program will believe that they did fill the textfield with something, even though they technically did not.

If you want to make sure that the user ACTUALLY typed in something into the text field then trim the entire string of that field of its left and right whitespace and check to see if that new string is empty or not.

Example:

    TextField(
   controller: MyTextEdittingController
  onChanged: (text) {
    if(MyTextEdittingController.text.trim() == ""{
          console.log("I am empty");
      }
      else{
         console.log("I am filled");
     }
  },
),

How to add check if user has typed something in a text field?

3 Answers3