theming.md

Theming

Firebase UI widgets are built on top of Material and Cupertino design patterns provided by Flutter.

To provide consistency across your application, the Firebase UI widgets depend on the ThemeData or CupertinoThemeData instances provided to your MaterialApp or CupertinoApp widget.

For example, the SignInScreen widget with an email provider wrapped in a MaterialApp will use the following widgets:

• TextFormField
• TextButton
• OutlinedButton

class FirebaseAuthUIExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: SignInScreen(
        providers: [
          EmailAuthProvider(),
        ],
      ),
    );
  }
}

This will render a screen with the default Material style widgets:

To update these styles, we can override the ThemeData provided to the MaterialApp. For example, to apply a border to the input fields, we can override the InputDecorationTheme:

class FirebaseAuthUIExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        inputDecorationTheme: InputDecorationTheme(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
          ),
        ),
      ),
      home: const SignInScreen(
        providers: [
          EmailAuthProvider(),
        ],
      ),
    );
  }
}

The UI widgets will respect the updated theme data, and the UI will be reflected to match:

Furthermore, we can customize the button used in the UI by overriding the OutlinedButtonThemeData:

class FirebaseAuthUIExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        inputDecorationTheme: InputDecorationTheme(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
          ),
        ),
        outlinedButtonTheme: OutlinedButtonThemeData(
          style: ButtonStyle(
            padding: MaterialStateProperty.all<EdgeInsets>(
              const EdgeInsets.all(24),
            ),
            backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
            foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
          ),
        ),
      ),
      home: const SignInScreen(
        providers: [
          EmailAuthProvider(),
        ],
      ),
    );
  }
}

The button will now respect the updated theme data and display a styled button instead:

Other topics

• EmaiAuthProvider - allows registering and signing using email and password.

• EmailLinkAuthProvider - allows registering and signing using a link sent to email.

• PhoneAuthProvider - allows registering and signing using a phone number

• UniversalEmailSignInProvider - gets all connected auth providers for a given email.

• OAuth

• Localization

• Navigation