A simple Login page in Flutter 🗝 🦋

I recently wrote an article that you can read here in which I walked the reader through implementing a search bar in their mobile applications without use of a third-party package, but rather a simple, functional approach using only a TextField and a TextEditingController. Today, I will be walking you through implementing a login page, with e-mail and password validation, using a similar approach. Here is a look at the final product:

Step 1: Set up our text controllers install their listeners

In order to access the values that the user has entered into the e-mail and password text fields whenever they try to login or create an account, we need to be ‘listening’ to the text fields, and we will store these values for convenience:

class _LoginPageState extends State<LoginPage> {
    
    final TextEditingController _emailFilter = new TextEditingController();
    final TextEditingController _passwordFilter = new TextEditingController();
    String _email = "";
    String _password = "";
    _LoginPageState() {
        _emailFilter.addListener(_emailListen);
        _passwordFilter.addListener(_passwordListen);
    void _emailListen() {
        if (_emailFilter.text.isEmpty) {
            _email = "";
        } else {
            _email = _emailFilter.text;
        }
    }
    void _passwordListen() {
        if (_passwordFilter.text.isEmpty) {
            _password = "";
        } else {
            _password = _emailFilter.text;
        }
    }

Step 2: Add an Enum called FormType so we can switch between the login/register pages freely

Firstly, declare an enum that represents the two different forms the user could be interacting with

enum FormType {
    login,
    register
}

Next, we add an instance to our _LoginPageState and default it, it is up to your individual use case whether you’d prefer to default it to a login state or a registration state: Formtype _form = FormType.login

Lastly, we add a function to control switching between these two states. Simply call this function whenever required (in this example app, when the user presses a button), and make sure to check for the current value of _form when you are building your UI.

To see an example, visit the link to the source code at the bottom of this article.

void _formChange () {
    setState(() {
        if (_form == FormType.register) {
            _form = FormType.login;
        } else {
            _form = FormType.register;
        }
    });
}

Step 3: Install handlers that are called whenever the user attempts to login or register

The last step is for us to actually evaluate what the user has entered into the text field when they try to request an action, such as logging in. In this app, these handlers are added as onPressed parameters to UI buttons. Within these handlers, you can perform any custom authentication / validation required for your particular use case. In the source code for this sample app, these handlers simply print the user’s desired action onto the console:

void _loginPressed () {
    print('The use wants to login with $_email and $_password');
}
void _createAccountPressed () {
    print('The user wants to register with $_email and $_password');
}
void _passwordReset () {
    print('The user wants a password reset request sent to $_email);
}

One example of some authentication you can use is checking the format of an e-mail address. Here is an example of how that would look in Dart using RegEx:

bool isEmailAddressValid(String email) {
    RegExp exp = new RegExp (
        r"^[\w-.]+@([\w-]+.)+[\w-]{2,4}$",
        caseSensitive: false,
        multiLine: false,
    );
    return exp.hasMatch(email.trim());
    // we trim to remove trailing white spaces
}

And with that, you have all the tools you need to create a simple, responsive login page with Flutter, and the base functionality of this can be extended in countless ways. The full source code for this example can be found at my GitHub here.

Be sure to leave a clap if you found this article helpful! 👏🏽

The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.