Skip to content

Flutter – Barebones, Basic Good Looking Login Page, with Routing [Part 3]

Posted in News

Welcome. Going through the Flutter – Barebones, Basic Good Looking Login Page part 1 and 2 gave us a fair idea of what Flutter is, and how to use it. If you’ve not seen the part 1 and 2 yet, please do so, as this part 3 follows from where we left off.

Login Form

When we ended part 2, we had this in our login.dart file:

All the changes for this part will be happening within the login.dart, unless otherwise stated.

So let’s add this:

Basically, we’re initializing an object in which we’ll store data from the form fields in. As you notice, we’ll need only 2 fields, namely, email and password

Pretty straightforward, right? Now let’s create the email field. How we create form fields in Flutter is fascinating. At least it fascinates me.

Cool!

The above, in Angular, would look something like this, roughly:

<input type="email" name="email" [(ngModel)]="email" placeholder="Email" autofocus="false">

Then the password field:

Now that we have both fields available, it’s time to use them. But first, a few tweaks to our body widget on the Scaffold widget:

Noticed the changes made?

First, we’ve restructured the bodywidget. Added a Formwidget under the Center widget, in which we put the list of fields as children.

Let’s do that and see what we have so far.

Update the bodywidget to have this:

Flutter Login Screen progres

If your got something similar, let’s do some adjustments then.

Let’s add a logo.

Below the final password = ... part, add this:

To get the above to work, we need to declare the asset in Flutter’s assets declaration in the configuration file. Let’s do that.

Go into the pubspec.yaml and look for the section assets under flutter. Uncomment the lines there, and update with this:

Now let’s go back to the login.dart file, and update to include the logo

So our bodywidget should now look like this:

With these fundamentals, why not try achieving the rest? Can you make it look like the screenshot below?

Final Login Screen

To achieve the above, here’s the code used:

Conclusion

Remember, the three part articles scratched just the surface of what’s there to Flutter. With the tiny features shown here from Flutter, go out there, and have fun.