feat(firebase_ui_auth): Use icon from OAuth provider as a fallback in ProfileScreen (#474)

Author: Rexios80

packages/firebase_ui_auth/lib/src/oauth/provider_resolvers.dart

@@ -4,11 +4,11 @@
 
 // ignore_for_file: constant_identifier_names
 
+import 'package:firebase_ui_auth/firebase_ui_auth.dart';
+import 'package:firebase_ui_oauth/firebase_ui_oauth.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 
-import 'social_icons.dart';
-
 const GOOGLE_PROVIDER_ID = 'google.com';
 const APPLE_PROVIDER_ID = 'apple.com';
 const TWITTER_PROVIDER_ID = 'twitter.com';
@@ -22,31 +22,51 @@ const PASSWORD_PROVIDER_ID = 'password';
 /// final icon = providerIcon(context, 'google.com');
 /// Icon(icon);
 /// ```
-IconData providerIcon(BuildContext context, String providerId) {
+Widget providerIcon(BuildContext context, AuthProvider provider) {
+  final providerId = provider.providerId;
   final isCupertino = CupertinoUserInterfaceLevel.maybeOf(context) != null;
 
+  final IconData? data;
   switch (providerId) {
     case GOOGLE_PROVIDER_ID:
-      return SocialIcons.google;
+      data = SocialIcons.google;
+      break;
     case APPLE_PROVIDER_ID:
-      return SocialIcons.apple;
+      data = SocialIcons.apple;
+      break;
     case TWITTER_PROVIDER_ID:
-      return SocialIcons.twitter;
+      data = SocialIcons.twitter;
+      break;
     case FACEBOOK_PROVIDER_ID:
-      return SocialIcons.facebook;
+      data = SocialIcons.facebook;
+      break;
     case PHONE_PROVIDER_ID:
       if (isCupertino) {
-        return CupertinoIcons.phone;
+        data = CupertinoIcons.phone;
       } else {
-        return Icons.phone;
+        data = Icons.phone;
       }
+      break;
     case PASSWORD_PROVIDER_ID:
       if (isCupertino) {
-        return CupertinoIcons.mail;
+        data = CupertinoIcons.mail;
       } else {
-        return Icons.email_outlined;
+        data = Icons.email_outlined;
       }
+      break;
     default:
-      throw Exception('Unknown provider: $providerId');
+      data = null;
+  }
+
+  if (data != null) {
+    return Icon(data);
   }
+
+  if (provider is OAuthProvider) {
+    final brightness =
+        CupertinoTheme.of(context).brightness ?? Theme.of(context).brightness;
+    return provider.style.iconWidget.getValue(brightness);
+  }
+
+  throw Exception('Unknown provider: $providerId');
 }

packages/firebase_ui_auth/lib/src/screens/profile_screen.dart

@@ -89,15 +89,11 @@ class _AvailableProvidersRowState extends State<_AvailableProvidersRow> {
                   context: context,
                   provider: provider,
                 ).then((_) => widget.onProviderLinked()),
-                child: Icon(
-                  providerIcon(context, provider.providerId),
-                ),
+                child: providerIcon(context, provider),
               )
             else
               IconButton(
-                icon: Icon(
-                  providerIcon(context, provider.providerId),
-                ),
+                icon: providerIcon(context, provider),
                 onPressed: () => connectProvider(
                   context: context,
                   provider: provider,
@@ -246,7 +242,8 @@ class _LinkedProvidersRowState extends State<_LinkedProvidersRow> {
     }
   }
 
-  Widget buildProviderIcon(BuildContext context, String providerId) {
+  Widget buildProviderIcon(BuildContext context, AuthProvider provider) {
+    final providerId = provider.providerId;
     final isCupertino = CupertinoUserInterfaceLevel.maybeOf(context) != null;
     const animationDuration = Duration(milliseconds: 150);
     const curve = Curves.easeOut;
@@ -267,7 +264,7 @@ class _LinkedProvidersRowState extends State<_LinkedProvidersRow> {
                   size: size - (size / 4),
                   borderWidth: 1,
                 )
-              : Icon(providerIcon(context, providerId)),
+              : providerIcon(context, provider),
         ),
         if (unlinkingProvider != providerId)
           AnimatedOpacity(
@@ -306,7 +303,7 @@ class _LinkedProvidersRowState extends State<_LinkedProvidersRow> {
     Widget child = Row(
       children: [
         for (var provider in widget.providers)
-          buildProviderIcon(context, provider.providerId)
+          buildProviderIcon(context, provider)
       ]
           .map((e) => [e, const SizedBox(width: 8)])
           .expand((element) => element)

packages/firebase_ui_oauth/lib/src/oauth_provider_button_style.dart

@@ -3,8 +3,10 @@
 // BSD-style license that can be found in the LICENSE file.
 
 import 'package:flutter/services.dart';
+import 'package:flutter/widgets.dart';
 
 import 'package:firebase_ui_shared/firebase_ui_shared.dart';
+import 'package:flutter_svg/svg.dart';
 
 /// {@template ui.oauth.themed_oauth_provider_button_style}
 /// An object that is being used to resolve a style of the button.
@@ -23,6 +25,15 @@ abstract class ThemedOAuthProviderButtonStyle {
   /// Required for custom OAuth providers.
   String? get label => null;
 
+  /// The widget to display for custom OAuth providers in pages such as the
+  /// Profile Screen.
+  ThemedValue<Widget> get iconWidget => ThemedValue(
+        // Display the light icon on a dark background.
+        SvgPicture.string(iconSrc.light),
+        // Display the dark icon on a light background.
+        SvgPicture.string(iconSrc.dark),
+      );
+
   /// {@macro ui.oauth.themed_oauth_provider_button_style}
   const ThemedOAuthProviderButtonStyle();