fix(ui_auth): fix material 3 button styling (#10253)

firebase · Jan 12, 2023 · a541e9a · a541e9a
1 parent f3a4d3a
commit a541e9a
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 10 deletions.
diff --git a/packages/firebase_ui_auth/example/lib/main.dart b/packages/firebase_ui_auth/example/lib/main.dart
@@ -11,6 +11,7 @@ import 'package:firebase_ui_oauth_apple/firebase_ui_oauth_apple.dart';
 import 'package:firebase_ui_oauth_facebook/firebase_ui_oauth_facebook.dart';
 import 'package:firebase_ui_oauth_google/firebase_ui_oauth_google.dart';
 import 'package:firebase_ui_oauth_twitter/firebase_ui_oauth_twitter.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
 
@@ -107,6 +108,7 @@ class FirebaseAuthUIExample extends StatelessWidget {
       theme: ThemeData(
         brightness: Brightness.light,
         visualDensity: VisualDensity.standard,
+        useMaterial3: true,
         inputDecorationTheme: const InputDecorationTheme(
           border: OutlineInputBorder(),
         ),
@@ -260,6 +262,8 @@ class FirebaseAuthUIExample extends StatelessWidget {
           );
         },
         '/profile': (context) {
+          final platform = Theme.of(context).platform;
+
           return ProfileScreen(
             actions: [
               SignedOutAction((context) {
@@ -268,7 +272,9 @@ class FirebaseAuthUIExample extends StatelessWidget {
               mfaAction,
             ],
             actionCodeSettings: actionCodeSettings,
-            showMFATile: true,
+            showMFATile: kIsWeb ||
+                platform == TargetPlatform.iOS ||
+                platform == TargetPlatform.android,
           );
         },
       },

diff --git a/packages/firebase_ui_auth/lib/src/widgets/delete_account_button.dart b/packages/firebase_ui_auth/lib/src/widgets/delete_account_button.dart
@@ -80,11 +80,15 @@ class _DeleteAccountButtonState extends State<DeleteAccountButton> {
     final l = FirebaseUILocalizations.labelsOf(context);
     bool isCupertino = CupertinoUserInterfaceLevel.maybeOf(context) != null;
 
+    final themeData = Theme.of(context);
+    final colorScheme = themeData.colorScheme;
+
     return LoadingButton(
       isLoading: _isLoading,
-      color: isCupertino ? CupertinoColors.destructiveRed : Colors.red,
+      color: isCupertino ? CupertinoColors.destructiveRed : colorScheme.error,
       icon: isCupertino ? CupertinoIcons.delete : Icons.delete,
       label: l.deleteAccount,
+      labelColor: colorScheme.onError,
       onTap: _deleteAccount,
       variant: widget.variant,
     );

diff --git a/packages/firebase_ui_auth/lib/src/widgets/internal/loading_button.dart b/packages/firebase_ui_auth/lib/src/widgets/internal/loading_button.dart
@@ -22,8 +22,17 @@ class _LoadingButtonContent extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     bool isCupertino = CupertinoUserInterfaceLevel.maybeOf(context) != null;
+    Widget child;
 
-    Widget child = Text(label);
+    if (color != null) {
+      final theme = Theme.of(context).textTheme.button;
+      child = Text(
+        label,
+        style: theme?.copyWith(color: color),
+      );
+    } else {
+      child = Text(label);
+    }
 
     if (isLoading) {
       child = LoadingIndicator(
@@ -42,6 +51,7 @@ class LoadingButton extends StatelessWidget {
   final String label;
   final IconData? icon;
   final Color? color;
+  final Color? labelColor;
   final VoidCallback onTap;
   final ButtonVariant? variant;
 
@@ -52,22 +62,31 @@ class LoadingButton extends StatelessWidget {
     this.isLoading = false,
     this.icon,
     this.color,
+    this.labelColor,
     this.variant = ButtonVariant.outlined,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final isMaterial3 = theme.useMaterial3;
+
+    final resolvedColor = variant == ButtonVariant.filled && !isMaterial3
+        ? theme.colorScheme.onPrimary
+        : null;
+
+    final contentColor = labelColor ?? resolvedColor;
+
     final content = _LoadingButtonContent(
       label: label,
       isLoading: isLoading,
-      color: variant == ButtonVariant.filled
-          ? Theme.of(context).colorScheme.onPrimary
-          : null,
+      color: contentColor,
     );
 
     return UniversalButton(
       color: color,
       icon: icon,
+      contentColor: contentColor,
       onPressed: onTap,
       variant: variant,
       child: content,

diff --git a/packages/firebase_ui_auth/lib/src/widgets/internal/universal_button.dart b/packages/firebase_ui_auth/lib/src/widgets/internal/universal_button.dart
@@ -29,6 +29,7 @@ class UniversalButton extends PlatformWidget {
   final TextDirection? direction;
   final ButtonVariant? variant;
   final Color? color;
+  final Color? contentColor;
 
   const UniversalButton({
     Key? key,
@@ -39,6 +40,7 @@ class UniversalButton extends PlatformWidget {
     this.direction = TextDirection.ltr,
     this.variant,
     this.color,
+    this.contentColor,
   })  : assert(text != null || child != null),
         super(key: key);
 
@@ -56,7 +58,7 @@ class UniversalButton extends PlatformWidget {
       children: [
         if (icon != null) ...[
           if (direction == TextDirection.rtl) const SizedBox(width: 8),
-          Icon(icon, size: 20),
+          Icon(icon, size: 20, color: contentColor),
           if (direction == TextDirection.ltr) const SizedBox(width: 8),
         ],
         this.child ?? Text(text!),
@@ -99,6 +101,7 @@ class UniversalButton extends PlatformWidget {
       if (variant == ButtonVariant.text) {
         foregroundColor = MaterialStateColor.resolveWith((_) => color!);
       } else {
+        foregroundColor = MaterialStateColor.resolveWith((_) => contentColor!);
         backgroundColor = MaterialStateColor.resolveWith((_) => color!);
       }
 
@@ -115,22 +118,22 @@ class UniversalButton extends PlatformWidget {
       switch (_variant) {
         case ButtonVariant.text:
           return TextButton.icon(
-            icon: Icon(icon),
+            icon: Icon(icon, color: contentColor),
             onPressed: onPressed,
             label: child,
             style: style,
           );
         case ButtonVariant.filled:
           return ElevatedButton.icon(
             onPressed: onPressed,
-            icon: Icon(icon),
+            icon: Icon(icon, color: contentColor),
             label: child,
             style: style,
           );
         case ButtonVariant.outlined:
           return OutlinedButton.icon(
             onPressed: onPressed,
-            icon: Icon(icon),
+            icon: Icon(icon, color: contentColor),
             label: child,
             style: style,
           );