Beginning FlutterFire

There are cases where you might need to change the textField labels of the sign in and sign up screens: this may happen when your app’s language is not English, or when you simply want to customize your labels. THe good news is that you can customize every single label in our screen. Let’s see how to do that:

Let’s add a new folder in the lib folder of our project and call it data. Here let’s create a new file, called labels.dart. In this file we’ll set the strings that will override the default labels that flutterfire_ui provides for the text fields. In the file, create a class, and call it LavelOverrides: this must implement DefaultLocalizations.

class LabelOverrides extends DefaultLocalizations { 

 DefaultLocalizations requires an import of the internationalization package, called i10n.dart 

import 'package:flutterfire_ui/i10n.dart'; 

Here, let’s override the emailInputLabel getter. We want to use an informal tone here, so the message will be “gimme your email”. Copy this three times: first let’s set the password input label with “Your password now!”. Then set the signInActionText with “Enter the club!”. The last label that we’ll set is the registerActionText. Just add “Join the club!”

  @override 
  String get emailInputLabel => 'Gimme your email!'; 

  @override 
  String get passwordInputLabel => 'Your password now!'; 

  @override 
  String get signInActionText => 'Enter the club!'; 

  @override 
  String get registerActionText => 'Join the club'; 

Now you have to tell the app that it needs to use these customized, labels instead of the default ones. So, open the main.dart file, and in the build method of myApp, set the localizationDelegates for MaterialApp. Here add FlutterFireUILocalizations.withDefaultOverrides(LabelOverrides()). Of course this will need the import for our LabelOverrides class.

localizationsDelegates: [ 
        FlutterFireUILocalizations.withDefaultOverrides(LabelOverrides()), 
], 

Let’s run the app: as you can see, you’ve completely customized this screen!

So, with very little code, you’ve added sign in and sign-up capabilities to your app. Let’s see how to add a remote database next!