Skip to content

Commit d23266f

Browse files
dshukertjrdshukertjr
authored
Merge branch 'main' into sign-in-or-sign-up-display-support
2 parents 7abd389 + 785387f commit d23266f

File tree

7 files changed

+401
-40
lines changed

7 files changed

+401
-40
lines changed

‎CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
## 0.5.1
2+
3+
- feat: Improve form interaction and code organization in `SupaEmailAuth` [#106](https://github.com/supabase-community/flutter-auth-ui/pull/106)
4+
- feat: Enable custom icons for `SupaEmailAuth` [#108](https://github.com/supabase-community/flutter-auth-ui/pull/108)
5+
16
## 0.5.0
27

38
- feat: Allow password recovery email to be redirected to other URL [#98](https://github.com/supabase-community/flutter-auth-ui/pull/98)

‎README.md

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ SupaEmailAuth(
2727
// do something, for example: navigate("wait_for_email");
2828
},
2929
metadataFields: [
30+
// Creates an additional TextField for string metadata, for example:
31+
// {'username': 'exampleUsername'}
3032
MetaDataField(
3133
prefixIcon: const Icon(Icons.person),
3234
label: 'Username',
@@ -38,8 +40,38 @@ SupaEmailAuth(
3840
return null;
3941
},
4042
),
41-
],
42-
),
43+
44+
// Creates a CheckboxListTile for boolean metadata, for example:
45+
// {'marketing_consent': true}
46+
BooleanMetaDataField(
47+
label: 'I wish to receive marketing emails',
48+
key: 'marketing_consent',
49+
checkboxPosition: ListTileControlAffinity.leading,
50+
),
51+
// Supports interactive text. Fields can be marked as required, blocking form
52+
// submission unless the checkbox is checked.
53+
BooleanMetaDataField(
54+
key: 'terms_agreement',
55+
isRequired: true,
56+
checkboxPosition: ListTileControlAffinity.leading,
57+
richLabelSpans: [
58+
const TextSpan(
59+
text: 'I have read and agree to the '),
60+
TextSpan(
61+
text: 'Terms and Conditions',
62+
style: const TextStyle(
63+
color: Colors.blue,
64+
),
65+
recognizer: TapGestureRecognizer()
66+
..onTap = () {
67+
// do something, for example: navigate("terms_and_conditions");
68+
},
69+
),
70+
// Or use some other custom widget.
71+
WidgetSpan()
72+
],
73+
),
74+
]),
4375
```
4476

4577
## Magic Link Auth
@@ -100,3 +132,4 @@ SupaSocialsAuth(
100132
## Theming
101133

102134
This library uses bare Flutter components so that you can control the appearance of the components using your own theme.
135+
See theme example in example/lib/sign_in.dart

‎example/lib/sign_in.dart

Lines changed: 127 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,58 @@
11
import 'package:flutter/foundation.dart';
2+
import 'package:flutter/gestures.dart';
23
import 'package:flutter/material.dart';
34
import 'package:supabase_auth_ui/supabase_auth_ui.dart';
45

56
import 'constants.dart';
67

78
class SignUp extends StatelessWidget {
89
const SignUp({Key? key}) : super(key: key);
9-
1010
@override
1111
Widget build(BuildContext context) {
12+
void navigateHome(AuthResponse response) {
13+
Navigator.of(context).pushReplacementNamed('/home');
14+
}
15+
16+
final darkModeThemeData = ThemeData.dark().copyWith(
17+
colorScheme: const ColorScheme.dark(
18+
primary: Color.fromARGB(248, 183, 183, 183), // text below main button
19+
),
20+
textSelectionTheme: TextSelectionThemeData(
21+
cursorColor: Colors.blueGrey[300], // cursor when typing
22+
),
23+
inputDecorationTheme: InputDecorationTheme(
24+
fillColor: Colors.grey[800], // background of text entry
25+
filled: true,
26+
border: OutlineInputBorder(
27+
borderRadius: BorderRadius.circular(8),
28+
borderSide: BorderSide.none,
29+
),
30+
labelStyle: const TextStyle(
31+
color:
32+
Color.fromARGB(179, 255, 255, 255)), // text labeling text entry
33+
),
34+
elevatedButtonTheme: ElevatedButtonThemeData(
35+
style: ElevatedButton.styleFrom(
36+
backgroundColor:
37+
const Color.fromARGB(255, 22, 135, 188), // main button
38+
foregroundColor:
39+
const Color.fromARGB(255, 255, 255, 255), // main button text
40+
shape: RoundedRectangleBorder(
41+
borderRadius: BorderRadius.circular(8),
42+
),
43+
),
44+
),
45+
);
46+
1247
return Scaffold(
1348
appBar: appBar('Sign In'),
1449
body: ListView(
1550
padding: const EdgeInsets.all(24.0),
1651
children: [
1752
SupaEmailAuth(
1853
redirectTo: kIsWeb ? null : 'io.supabase.flutter://',
19-
onSignInComplete: (response) {
20-
Navigator.of(context).pushReplacementNamed('/home');
21-
},
22-
onSignUpComplete: (response) {
23-
Navigator.of(context).pushReplacementNamed('/home');
24-
},
54+
onSignInComplete: navigateHome,
55+
onSignUpComplete: navigateHome,
2556
metadataFields: [
2657
MetaDataField(
2758
prefixIcon: const Icon(Icons.person),
@@ -34,8 +65,97 @@ class SignUp extends StatelessWidget {
3465
return null;
3566
},
3667
),
68+
BooleanMetaDataField(
69+
label: 'Keep me up to date with the latest news and updates.',
70+
key: 'marketing_consent',
71+
checkboxPosition: ListTileControlAffinity.leading,
72+
),
73+
BooleanMetaDataField(
74+
key: 'terms_agreement',
75+
isRequired: true,
76+
checkboxPosition: ListTileControlAffinity.leading,
77+
richLabelSpans: [
78+
const TextSpan(text: 'I have read and agree to the '),
79+
TextSpan(
80+
text: 'Terms and Conditions',
81+
style: const TextStyle(
82+
color: Colors.blue,
83+
),
84+
recognizer: TapGestureRecognizer()
85+
..onTap = () {
86+
// Handle tap on Terms and Conditions
87+
},
88+
),
89+
],
90+
),
3791
],
3892
),
93+
94+
const Divider(),
95+
optionText,
96+
spacer,
97+
98+
// Dark theme example
99+
Card(
100+
elevation: 10,
101+
color: const Color.fromARGB(255, 24, 24, 24),
102+
child: Padding(
103+
padding: const EdgeInsets.all(30),
104+
child: Theme(
105+
data: darkModeThemeData,
106+
child: SupaEmailAuth(
107+
redirectTo: kIsWeb ? null : 'io.supabase.flutter://',
108+
onSignInComplete: navigateHome,
109+
onSignUpComplete: navigateHome,
110+
prefixIconEmail: null,
111+
prefixIconPassword: null,
112+
localization: const SupaEmailAuthLocalization(
113+
enterEmail: "email",
114+
enterPassword: "password",
115+
dontHaveAccount: "sign up",
116+
forgotPassword: "forgot password"),
117+
metadataFields: [
118+
MetaDataField(
119+
prefixIcon: const Icon(Icons.person),
120+
label: 'Username',
121+
key: 'username',
122+
validator: (val) {
123+
if (val == null || val.isEmpty) {
124+
return 'Please enter something';
125+
}
126+
return null;
127+
},
128+
),
129+
BooleanMetaDataField(
130+
label:
131+
'Keep me up to date with the latest news and updates.',
132+
key: 'marketing_consent',
133+
checkboxPosition: ListTileControlAffinity.leading,
134+
),
135+
BooleanMetaDataField(
136+
key: 'terms_agreement',
137+
isRequired: true,
138+
checkboxPosition: ListTileControlAffinity.leading,
139+
richLabelSpans: [
140+
const TextSpan(
141+
text: 'I have read and agree to the '),
142+
TextSpan(
143+
text: 'Terms and Conditions.',
144+
style: const TextStyle(
145+
color: Colors.blue,
146+
),
147+
recognizer: TapGestureRecognizer()
148+
..onTap = () {
149+
//ignore: avoid_print
150+
print('Terms and Conditions');
151+
},
152+
),
153+
],
154+
),
155+
]),
156+
),
157+
)),
158+
39159
const Divider(),
40160
optionText,
41161
spacer,

0 commit comments

Comments
 (0)