CODEWITHSUNDEEP
flutterdartfirebase-authenticationfirebaseuiflutter-localizations
Mamoudou Kane
Mamoudou Kane

Reputation: 227

How to customize widgets with FlutterFire UI auth?

I want to customize my flutterfire ui auth screens using localization. With this link: https://firebase.flutter.dev/docs/ui/auth/localization/ , I managed to customize the email and password textfields's labels. Now I want to customize all the other text widgets on the flutterfire ui auth pages. To customize email and password textfields's label, we used

  @override
  String get emailInputLabel => 'Enter your email';

  @override
  String get passwordInputLabel => 'Enter your password';

How can I do that for other texts?

Upvotes: 1

Views: 1476

Answers (2)

Alexandre Cavalcante
Alexandre Cavalcante

Reputation: 325

I managed to do it using the package firebase_ui_localizations. Add the following lines to translate to Portuguese for example:

 MaterialApp(
    title: 'Flutter Demo',
    locale: const Locale('pt')
    home: const LoginScreen(),
    supportedLocales: const [
      Locale('pt'),
    ],
    localizationsDelegates: [
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
      GlobalCupertinoLocalizations.delegate,
      FirebaseUILocalizations.delegate,
    ],

Upvotes: 0

Victor Eronmosele
Victor Eronmosele

Reputation: 7686

You can customize the other text widgets by overriding the getters for those text widgets. The full list of getters you can override is available in the properties section in the DefaultLocalizations documentation.

For example, to update the phone input label, you override the phoneInputLabel getter like this:

@override
String get phoneInputLabel => 'Enter your phone number';

Upvotes: 1

Related Questions