Feat custom email icons (#108)

* allow icons in email ui to be removed * refactor : combine identical closures into function * feat : allow custom icons or none in email sign in / up * add dark themed example * fix : format * fix : const warnings * fix : comments and add mention of theme example in README * fix : comment * fix : comment * fix : typo * Update lib/src/components/supa_email_auth.dart Co-authored-by: Tyler <[email protected]> * Update example/lib/sign_in.dart Co-authored-by: Tyler <[email protected]> * fix : update name elsewhere, add const --------- Co-authored-by: Henry Routson <[email protected]> Co-authored-by: Tyler <[email protected]>
supabase-community · Aug 15, 2024 · 41814b9 · 41814b9
1 parent a450e29
commit 41814b9
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -100,3 +100,4 @@ SupaSocialsAuth(
 ## Theming
 
 This library uses bare Flutter components so that you can control the appearance of the components using your own theme.
+See theme example in example/lib/sign_in.dart
diff --git a/example/lib/sign_in.dart b/example/lib/sign_in.dart
@@ -6,22 +6,48 @@ import 'constants.dart';
 
 class SignUp extends StatelessWidget {
   const SignUp({Key? key}) : super(key: key);
-
   @override
   Widget build(BuildContext context) {
+    void navigateHome(AuthResponse response) {
+      Navigator.of(context).pushReplacementNamed('/home');
+    }
+
+    final darkModeThemeData = ThemeData.dark().copyWith(
+      colorScheme: const ColorScheme.dark(
+        primary: Color.fromARGB(248, 183, 183, 183), // text below main button
+      ),
+      textSelectionTheme: TextSelectionThemeData(
+        cursorColor: Colors.blueGrey[300], // cursor when typing
+      ),
+      inputDecorationTheme: InputDecorationTheme(
+        fillColor: Colors.grey[800], // background of text entry
+        filled: true,
+        border: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(8),
+          borderSide: BorderSide.none,
+        ),
+        labelStyle: const TextStyle(color: Color.fromARGB(179, 255, 255, 255)), // text labeling text entry
+      ),
+      elevatedButtonTheme: ElevatedButtonThemeData(
+        style: ElevatedButton.styleFrom(
+          backgroundColor: const Color.fromARGB(255, 22, 135, 188), // main button
+          foregroundColor: const Color.fromARGB(255, 255, 255, 255), // main button text
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(8),
+          ),
+        ),
+      ),
+    );
+
     return Scaffold(
       appBar: appBar('Sign In'),
       body: ListView(
         padding: const EdgeInsets.all(24.0),
         children: [
           SupaEmailAuth(
             redirectTo: kIsWeb ? null : 'io.supabase.flutter://',
-            onSignInComplete: (response) {
-              Navigator.of(context).pushReplacementNamed('/home');
-            },
-            onSignUpComplete: (response) {
-              Navigator.of(context).pushReplacementNamed('/home');
-            },
+            onSignInComplete: navigateHome,
+            onSignUpComplete: navigateHome,
             metadataFields: [
               MetaDataField(
                 prefixIcon: const Icon(Icons.person),
@@ -36,6 +62,34 @@ class SignUp extends StatelessWidget {
               ),
             ],
           ),
+
+          const Divider(),
+          optionText,
+          spacer,
+
+          // Dark theme example
+          Card(
+              elevation: 10,
+              color: const Color.fromARGB(255, 24, 24, 24),
+              child: Padding(
+                padding: const EdgeInsets.all(30),
+                child: Theme(
+                  data: darkModeThemeData,
+                  child: SupaEmailAuth(
+                    redirectTo: kIsWeb ? null : 'io.supabase.flutter://',
+                    onSignInComplete: navigateHome,
+                    onSignUpComplete: navigateHome,
+                    prefixIconEmail: null,
+                    prefixIconPassword: null,
+                    localization: const SupaEmailAuthLocalization(
+                        enterEmail: "email",
+                        enterPassword: "password",
+                        dontHaveAccount: "sign up",
+                        forgotPassword: "forgot password"),
+                  ),
+                ),
+              )),
+
           const Divider(),
           optionText,
           spacer,

diff --git a/lib/src/components/supa_email_auth.dart b/lib/src/components/supa_email_auth.dart
@@ -95,6 +95,10 @@ class SupaEmailAuth extends StatefulWidget {
   /// Localization for the form
   final SupaEmailAuthLocalization localization;
 
+  /// Icons or custom prefix widgets for email UI
+  final Widget? prefixIconEmail;
+  final Widget? prefixIconPassword;
+
   /// {@macro supa_email_auth}
   const SupaEmailAuth({
     super.key,
@@ -109,6 +113,8 @@ class SupaEmailAuth extends StatefulWidget {
     this.metadataFields,
     this.extraMetadata,
     this.localization = const SupaEmailAuthLocalization(),
+    this.prefixIconEmail = const Icon(Icons.email),
+    this.prefixIconPassword = const Icon(Icons.lock),
   });
 
   @override
@@ -176,7 +182,7 @@ class _SupaEmailAuthState extends State<SupaEmailAuth> {
                 return null;
               },
               decoration: InputDecoration(
-                prefixIcon: const Icon(Icons.email),
+                prefixIcon: widget.prefixIconEmail,
                 label: Text(localization.enterEmail),
               ),
               controller: _emailController,
@@ -203,7 +209,7 @@ class _SupaEmailAuthState extends State<SupaEmailAuth> {
                   return null;
                 },
                 decoration: InputDecoration(
-                  prefixIcon: const Icon(Icons.lock),
+                  prefixIcon: widget.prefixIconPassword,
                   label: Text(localization.enterPassword),
                 ),
                 obscureText: true,