Flutter: User Auth with Firebase

In this guide, I am going to walk through setting up a basic login screen that will authenticate with Firebase.

To get started, set up a widget for the LoginScreen. This widget will be stateful and consist of fields to input an email and a password, and also a submit button.

lib/login_screen.dart

import 'package:flutter/material.dart';

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

class LoginScreenState extends State<LoginScreen> {

  Widget emailField() {
    return TextField(...);
  }

  Widget passwordField() {
    return TextField(...);
  }

  Widget submitButton() {
    return TextField(...);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(20.0),
      child: Form(
        child: Column(
          children: <Widget>[
            emailField(),
            passwordField(),
            submitButton(),
          ],
        ), // Column
      ), // Form
    ); // Container
  }
}

Let's start working on the emailField and passwordField methods to get something to display out on the screen.

Widget emailField() {
  return TextFormField(
    decoration: InputDecoration(
      labelText: 'Email',
      hintText: '[e-mail]',
    ),
    keyboardType: TextInputType.emailAddress,
  );
}

Widget passwordField() {
  return TextFormField(
    obscureText: true,
    decoration: InputDecoration(
      labelText: 'Password',
      hintText: '8-12 characters long',
    ),
  );
}

Our app should now look like this.

Next, we are going to create the submitButton widget, and give it some custom styling to make it look somewhat nice.

Widget submitButton() {
  final accentColor = HSLColor.fromColor(Theme.of(context).accentColor);
  // This will darken the Theme's accentColor by a factor of '0.5' percent
  final darkAccentColor = accentColor.withLightness((accentColor.lightness - 0.5).clamp(0.0, 1.0)).toColor();

  return RaisedButton(
    onPressed: () => {},
    textColor: darkAccentColor,
    padding: const EdgeInsets.all(0.0),
    child: Row(
      children: <Widget>[
        Expanded(
          child: Container(
            decoration: BoxDecoration(
              color: Theme.of(context).accentColor,
            ), // BoxDecoration
            padding: const EdgeInsets.all(10.0),
            child: Center(
              child: Text(
                'Submit',
                style: TextStyle(fontSize: 18)
              ), // Text
            ), // Center
          ), // Container
        ), // Expanded
      ],
    ), // Row
  ); // RaisedButton
}

Now the app should look like this.

To be continued...