feat: social aith buttons icon only option

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.1.1
+
+- feat: social aith buttons icon only option [#43](https://github.com/supabase-community/flutter-auth-ui/pull/43)
+- feat: email suggestion on email form fields [#44](https://github.com/supabase-community/flutter-auth-ui/pull/44)
+
 ## 0.1.0+2
 
 - fix: set splash color on colored social button to provide better UX for google auth button

example/macos/Flutter/GeneratedPluginRegistrant.swift

@@ -5,8 +5,8 @@
 import FlutterMacOS
 import Foundation
 
-import app_links_macos
-import path_provider_macos
+import app_links
+import path_provider_foundation
 import url_launcher_macos
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {

example/windows/flutter/generated_plugin_registrant.cc

@@ -6,12 +6,12 @@
 
 #include "generated_plugin_registrant.h"
 
-#include <app_links_windows/app_links_windows_plugin.h>
+#include <app_links/app_links_plugin_c_api.h>
 #include <url_launcher_windows/url_launcher_windows.h>
 
 void RegisterPlugins(flutter::PluginRegistry* registry) {
-  AppLinksWindowsPluginRegisterWithRegistrar(
-      registry->GetRegistrarForPlugin("AppLinksWindowsPlugin"));
+  AppLinksPluginCApiRegisterWithRegistrar(
+      registry->GetRegistrarForPlugin("AppLinksPluginCApi"));
   UrlLauncherWindowsRegisterWithRegistrar(
       registry->GetRegistrarForPlugin("UrlLauncherWindows"));
 }

example/windows/flutter/generated_plugins.cmake

@@ -3,7 +3,7 @@
 #
 
 list(APPEND FLUTTER_PLUGIN_LIST
-  app_links_windows
+  app_links
   url_launcher_windows
 )
 

lib/src/components/supa_socials_auth.dart

@@ -2,8 +2,8 @@ import 'dart:async';
 
 import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
-import 'package:supabase_flutter/supabase_flutter.dart';
 import 'package:supabase_auth_ui/src/utils/constants.dart';
+import 'package:supabase_flutter/supabase_flutter.dart';
 
 /// Social provider that are supported
 enum SocialProviders {
@@ -82,6 +82,14 @@ enum SocialProviders {
   String get capitalizedName => name[0].toUpperCase() + name.substring(1);
 }
 
+enum SocialButtonVariant {
+  /// Displays the social login buttons horizontally with icons.
+  icon,
+
+  /// Displays the social login buttons vertically with icons and text labels.
+  iconAndText,
+}
+
 /// UI Component to create social login form
 class SupaSocialsAuth extends StatefulWidget {
   /// List of social providers to show in the form
@@ -92,6 +100,9 @@ class SupaSocialsAuth extends StatefulWidget {
   /// You can control the appearance through `ElevatedButtonTheme` when set to false.
   final bool colored;
 
+  /// Whether or not to show the icon only or icon and text
+  final SocialButtonVariant socialButtonVariant;
+
   /// `redirectUrl` to be passed to the `.signIn()` or `signUp()` methods
   ///
   /// Typically used to pass a DeepLink
@@ -110,6 +121,7 @@ class SupaSocialsAuth extends StatefulWidget {
     this.redirectUrl,
     required this.onSuccess,
     this.onError,
+    this.socialButtonVariant = SocialButtonVariant.iconAndText,
   }) : super(key: key);
 
   @override
@@ -147,75 +159,100 @@ class _SupaSocialsAuthState extends State<SupaSocialsAuth> {
       return ErrorWidget(Exception('Social provider list cannot be empty'));
     }
 
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.stretch,
-      children: List.generate(
-        providers.length,
-        (index) {
-          final socialProvider = providers[index];
+    final authButtons = List.generate(
+      providers.length,
+      (index) {
+        final socialProvider = providers[index];
 
-          Widget iconWidget = SizedBox(
-            height: 48,
+        Color? foregroundColor = coloredBg ? Colors.white : null;
+        Color? backgroundColor = coloredBg ? socialProvider._btnBgColor : null;
+        Color? overlayColor = coloredBg ? Colors.white10 : null;
+
+        Color? iconColor = coloredBg ? Colors.white : null;
+
+        Widget iconWidget = SizedBox(
+          height: 48,
+          width: 48,
+          child: Icon(
+            socialProvider._iconData,
+            color: iconColor,
+          ),
+        );
+
+        if (socialProvider == SocialProviders.google && coloredBg) {
+          iconWidget = Image.asset(
+            'assets/logos/google_light.png',
+            package: 'supabase_auth_ui',
             width: 48,
-            child: Icon(socialProvider._iconData),
+            height: 48,
           );
 
-          Color? foregroundColor = coloredBg ? Colors.white : null;
-          Color? backgroundColor =
-              coloredBg ? socialProvider._btnBgColor : null;
-          Color? overlayColor = coloredBg ? Colors.white10 : null;
+          foregroundColor = Colors.black;
+          backgroundColor = Colors.white;
+          overlayColor = Colors.white;
+        }
 
-          Color? iconColor = coloredBg ? Colors.white : null;
-
-          if (socialProvider == SocialProviders.google && coloredBg) {
-            iconWidget = Image.asset(
-              'assets/logos/google_light.png',
-              package: 'supabase_auth_ui',
-              width: 48,
-              height: 48,
+        onAuthButtonPressed() async {
+          try {
+            await supaClient.auth.signInWithOAuth(
+              socialProvider.provider,
+              redirectTo: widget.redirectUrl,
             );
-
-            foregroundColor = Colors.black;
-            backgroundColor = Colors.white;
-            overlayColor = Colors.white;
+          } on AuthException catch (error) {
+            if (widget.onError == null) {
+              context.showErrorSnackBar(error.message);
+            } else {
+              widget.onError?.call(error);
+            }
+          } catch (error) {
+            if (widget.onError == null) {
+              context
+                  .showErrorSnackBar('Unexpected error has occurred: $error');
+            } else {
+              widget.onError?.call(error);
+            }
           }
+        }
 
-          return Padding(
-            padding: const EdgeInsets.symmetric(vertical: 8.0),
-            child: ElevatedButton.icon(
-              icon: iconWidget,
-              style: ButtonStyle(
-                foregroundColor: MaterialStateProperty.all(foregroundColor),
-                backgroundColor: MaterialStateProperty.all(backgroundColor),
-                overlayColor: MaterialStatePropertyAll(overlayColor),
-                iconColor: MaterialStatePropertyAll(iconColor),
-              ),
-              onPressed: () async {
-                try {
-                  await supaClient.auth.signInWithOAuth(
-                    socialProvider.provider,
-                    redirectTo: widget.redirectUrl,
-                  );
-                } on AuthException catch (error) {
-                  if (widget.onError == null) {
-                    context.showErrorSnackBar(error.message);
-                  } else {
-                    widget.onError?.call(error);
-                  }
-                } catch (error) {
-                  if (widget.onError == null) {
-                    context.showErrorSnackBar(
-                        'Unexpected error has occurred: $error');
-                  } else {
-                    widget.onError?.call(error);
-                  }
-                }
-              },
-              label: Text('Continue with ${socialProvider.capitalizedName}'),
-            ),
-          );
-        },
-      ),
+        final authButtonStyle = ButtonStyle(
+          foregroundColor: MaterialStateProperty.all(foregroundColor),
+          backgroundColor: MaterialStateProperty.all(backgroundColor),
+          overlayColor: MaterialStateProperty.all(overlayColor),
+          iconColor: MaterialStateProperty.all(iconColor),
+        );
+
+        return Padding(
+          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 4),
+          child: widget.socialButtonVariant == SocialButtonVariant.icon
+              ? Material(
+                  shape: const CircleBorder(),
+                  elevation: 2,
+                  color: backgroundColor,
+                  child: InkResponse(
+                    radius: 24,
+                    onTap: onAuthButtonPressed,
+                    child: iconWidget,
+                  ),
+                )
+              : ElevatedButton.icon(
+                  icon: iconWidget,
+                  style: authButtonStyle,
+                  onPressed: onAuthButtonPressed,
+                  label:
+                      Text('Continue with ${socialProvider.capitalizedName}'),
+                ),
+        );
+      },
     );
+
+    return widget.socialButtonVariant == SocialButtonVariant.icon
+        ? Wrap(
+            alignment: WrapAlignment.spaceEvenly,
+            children: authButtons,
+          )
+        : Column(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: authButtons,
+          );
   }
 }

pubspec.yaml

@@ -1,6 +1,6 @@
 name: supabase_auth_ui
 description: UI library to implement auth forms using Supabase and Flutter
-version: 0.1.0+2
+version: 0.1.1
 homepage: https://supabase.com
 repository: 'https://github.com/supabase-community/flutter-auth-ui'