Flutter & Firebase App Tutorial — Part 8 toggle between forms and form validation

5 min readOct 30, 2021

Create a flutter authenticate app in 10 mins by using firebase as the back-end. You will learn how to toggle between widgets and direct users to the right screen. After that, use the Flutter built-in validation features to make sure you collect the right data you need.

Flutter & Firebase App Tutorial — Lumei Digital

More Tutorials:

These are our dart files and widgets so far. Now, we will show users either the Sign Inor Sign Upwidget while toggling between forms.

Toggle between forms
Flutter built-in form validation feature

Step 1️⃣: Go to the Authenticate.dartfile

Step 2️⃣: Add the logic to show either SignIn widget orSignUp widget

✅ Add a boolean property called showSignIn.If it’s true, we show theSignIn widget. While if it’s false, we show theSignUp widget.

✅Add a function called toggelView()in the Authenticate.dartfile to toggle the showSignInproperty from true to false or vice versa.

✅ Call the function toggelView()from SignIn widget by passing down toggelView()as a parameter

Toggle between forms in Flutter — Lumei Digital

Step 3️⃣: Go toSignIn widget

✅ Add a final function called toggelView()inside the SignInwidget itself

✅ Create a constructor of the widget that accepts toggelView()parameter and set the parameter equal to the final function called toggelView()

✅ Add a button on the top right inside the appBar.The onPressed function inside the button triggers the widget’s toggelView()function.

✅ Do the same toSignUp widget

Be default, the app will show the SignInwidget since the showSignInproperty is set to true in the Authenticate.dartfile. Once users click Sign upinside the appBarin the SignInwidget, the toggelView() function is activated and then the value of showSignInproperty is set to false and consequently, the app shows SignUpwidget

Build a form with validation

Since the login form needs users to enter email and password, in order to make the app secure, we check the information that users provide is valid or not.

👉 if users correctly fill out the form, we let users log in.

👉if users submit incorrect information, we display an error message.

Step 1️⃣: Create a Form with a GlobalKey

Using Form widget to handle or manipulate the fields for validation, submitting, and resetting.

✅When creating the form widget, we define a form key _formKeythat is a global key of type FormState.

The is GlobalKeya unique identifier and it helps to allow validation of the form in a later step.

// declared the formKey as a field in our State object
final _formKey = GlobalKey<FormState>();child: Form(
  key: _formKey,
);

Step 2️⃣: add the _formKey to the form widget to associate the form with the global FormStatekey, which will keep track of the form widget and the state of the form. In the future, you can validate the form via this _formKeybecause you can access the validation features and states from this _formKey.

For example, TextFormFieldhas a vlidatorthat takes a function to check if the value of the TextFormFieldis an empty string.

TextFormField(
  // The validator receives the text that the user has entered.
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter some text';
    }
    return null;
  },
),

Step 3️⃣: Create a button to validate and submit the login form

When submitting a form, it checks whether the form is valid. If it is, it displays a success message. if it’s not, it displays an error message

ElevatedButton(
  onPressed: () {
    // Validate returns true if the form is valid 
    if (_formKey.currentState!.validate()) {       
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('a success message')),
      );
    }
  },
  child: const Text('Submit'),
),

✅ How does this work?

The _formKey has a method called_formKey.currentState() that can be used to access the FormState which is automatically created by Flutter when building a form.

The FormState has a validate()method. When validate()method is called, it executes the validator()function for each text field in the form. If any text field has errors, the validate()method rebuilds the form to show the error message and return false.

Flutter form validation feature — Lumei Digital

Flutter & Firebase App Tutorial — Part 8 toggle between forms and form validation

More Tutorials:

Table of Contents

Build a form with validation

More Tutorials:

Written by Jumei Lin