Beginning FlutterFire

In this moment you can both register as a new user or login with your current username and password.
As we have already registered as a new user, we cannot see the login or register screen in the app.

To solve this, let’s delete our app’s data from the device. If you are using Android, open your settings screen, then select “Apps and notifications”, choose the bff app, then click on “Storage and cache”, and press the clear storage button. This will make sure your device forgets your username and password.

The process for ios is similar. Just open the Settings app, and from there select general, then iPhone storage: here from the apps list choose the app’s name, and click on the “Offload App” button.

Of course, you could also completely delete the app and this would also delete the app’s storage, but this is not necessary now. Run the app. As you can see, you can login again.

Let’s customize this screen a little bit, adding a logo. In the starter project there’s an “assets” folder. This contains an image, called running.png. Please note that you also have this folder in the the pubspec.yaml file, in the assets section. Let’s add this image to the login screen.

The SignInScreen constructor has a parameter called headerBuilder: as the name implies, this builds a header for the screen. Usually here you would place your logo, or like in this case, just an image for the app. The builder method takes three parameters: the current buildcontext, a BoxContraints and a double, but we won’t be using any of those here. In the builder, let’s return a Padding widget, with a padding of edgeInsets.all of 16 device independent pixels. As a child, we’ll call the image.asset constructor passing the running.png image in the assets folder. If you hot reload the app, you will immediately see that at the top of the login screen now there’s our image.

headerBuilder: (context, constraints, shrinkOffset) { 
    return Padding( 
      padding: const EdgeInsets.all(16), 
      child: Image.asset('assets/running.png'), 
    ); 
  }, 

But that’s not all: you can also add a subtitle and a footer. Let’s begin with the subtitle: this requires a subtitleBuilder, that takes a BuildContext and an AuthAction: this is an enumerable that tells the Authentication action that’s happening in the current screen: for example, sign in, or sign up.

In the builder method let’s return a Padding that takes an EdgeInsets only for the bottom and set it to 16 device independent pixels.

As a child let’s place a text whose content depends on the AuthAction: we’ll use a ternary operator here, so if the action is AuthAction signin, then the text will contain “Welcome to Activities App! Sign in to continue”, otherwise “Welcome to Activities App! Create an account to continue” .

subtitleBuilder: (context, action) { 
  return Padding( 
    padding: const EdgeInsets.only(bottom: 16), 
    child: Text( 
      action == AuthAction.signIn 
          ? 'Welcome to Activities App! Sign in to continue.' 
          : 'Welcome to Activities App! Create an account ' + 
              'to continue', 
    ), 
  ); 
}, 

Let’s have a look at the app: as you can see, we now have a subtitle, that changes when you change the action of the screen: a message for the login, and one for the sign-up screen.

Great, one last small change here: let’s also add a footer for this screen: obviously you don’t always need to add all the parts for the sign in screen, but it’s good to know all the options so that you can use them when it makes sense.

OK, the footer requires a footerbuilder: again, this takes the BuildContext and the AuthAction. In the builder method let’s place a Padding with a vertival edgeinsets of 32, and as a child a text with “Powered by you”. As usually the small lines at the bottom of the screen are not as important as the other text on the screen, we’ll add a style there, that takes a textStyle with a grey color.

footerBuilder: (context, _) { 
  return const Padding( 
    padding: EdgeInsets.symmetric(vertical: 32), 
    child: Text( 
      'Powered by you!', 
      style: TextStyle(color: Colors.grey), 
    ), 
  ); 
}, 

OK, let’s have a look at the app right now. As you can see, the screen is now complete: we have a title, a subtitle and a footer. That’s great!

But what if you need to change the messages that the user sees, or you need to create an app in a language that’s not English? Let’s see how to deal with that in the next video!