diff --git a/README.md b/README.md index ec0fb1e..b589ccc 100644 --- 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 index 407488c..e369583 100644 --- a/example/lib/sign_in.dart +++ b/example/lib/sign_in.dart @@ -6,9 +6,39 @@ 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( @@ -16,12 +46,8 @@ class SignUp extends StatelessWidget { 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 index 358acc9..8574f24 100644 --- 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 { 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 { return null; }, decoration: InputDecoration( - prefixIcon: const Icon(Icons.lock), + prefixIcon: widget.prefixIconPassword, label: Text(localization.enterPassword), ), obscureText: true,