Skip to content

Commit

Permalink
Add documentation to README and minor code cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@bcorman
bcorman committed Oct 3, 2024
1 parent e5f4e7f commit 0b0b50f
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 20 deletions.
36 changes: 34 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ SupaEmailAuth(
// do something, for example: navigate("wait_for_email");
},
metadataFields: [
// Creates an additional TextField for string metadata, for example:
// {'username': 'exampleUsername'}
MetaDataField(
prefixIcon: const Icon(Icons.person),
label: 'Username',
Expand All @@ -38,8 +40,38 @@ SupaEmailAuth(
return null;
},
),
],
),
// Creates a CheckboxListTile for boolean metadata, for example:
// {'marketing_consent': true}
BooleanMetaDataField(
label: 'I wish to receive marketing emails',
key: 'marketing_consent',
checkboxPosition: ListTileControlAffinity.leading,
),
// Supports interactive text. Fields can be marked as required, blocking form
// submission unless the checkbox is checked.
BooleanMetaDataField(
key: 'terms_agreement',
isRequired: true,
checkboxPosition: ListTileControlAffinity.leading,
richLabelSpans: [
const TextSpan(
text: 'I have read and agree to the '),
TextSpan(
text: 'Terms and Conditions',
style: const TextStyle(
color: Colors.blue,
),
recognizer: TapGestureRecognizer()
..onTap = () {
// do something, for example: navigate("terms_and_conditions");
},
),
// Or use some other custom widget.
WidgetSpan()
],
),
]),
```

## Magic Link Auth
Expand Down
20 changes: 9 additions & 11 deletions example/lib/sign_in.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,16 +65,14 @@ class SignUp extends StatelessWidget {
return null;
},
),
// Checkbox on the right
BooleanMetaDataField(
label: 'I agree to a checkbox on the right',
key: 'right_checkbox',
label: 'Keep me up to date with the latest news and updates.',
key: 'marketing_consent',
checkboxPosition: ListTileControlAffinity.leading,
),

// Checkbox on the left
BooleanMetaDataField(
key: 'terms_agreement',
required: true,
isRequired: true,
checkboxPosition: ListTileControlAffinity.leading,
richLabelSpans: [
const TextSpan(text: 'I have read and agree to the '),
Expand All @@ -85,8 +83,7 @@ class SignUp extends StatelessWidget {
),
recognizer: TapGestureRecognizer()
..onTap = () {
//ignore: avoid_print
print('Terms and Conditions');
// Handle tap on Terms and Conditions
},
),
],
Expand Down Expand Up @@ -130,19 +127,20 @@ class SignUp extends StatelessWidget {
},
),
BooleanMetaDataField(
label: 'I wish to receive marketing emails',
label:
'Keep me up to date with the latest news and updates.',
key: 'marketing_consent',
checkboxPosition: ListTileControlAffinity.leading,
),
BooleanMetaDataField(
key: 'terms_agreement',
required: true,
isRequired: true,
checkboxPosition: ListTileControlAffinity.leading,
richLabelSpans: [
const TextSpan(
text: 'I have read and agree to the '),
TextSpan(
text: 'Terms and Conditions',
text: 'Terms and Conditions.',
style: const TextStyle(
color: Colors.blue,
),
Expand Down
18 changes: 11 additions & 7 deletions lib/src/components/supa_email_auth.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ class BooleanMetaDataField extends MetaDataField {
/// Whether the field is required.
///
/// If true, the user must check the checkbox in order for the form to submit.
final bool required;
final bool isRequired;

/// Semantic label for the checkbox.
final String? checkboxSemanticLabel;
Expand All @@ -112,17 +112,17 @@ class BooleanMetaDataField extends MetaDataField {
String? label,
this.richLabelSpans,
this.checkboxSemanticLabel,
this.required = false,
this.isRequired = false,
this.checkboxPosition = ListTileControlAffinity.platform,
required super.key,
}) : assert(label != null || richLabelSpans != null,
'Either label or richLabelSpans must be provided'),
super(label: label ?? '');

Widget getLabelWidget(BuildContext context) {
// It's important that this matches the default style of [TextField], which
// is used for the other fields in the form. TextField's default style
// uses bodyLarge for Material 3, or otherwise titleMedium.
// This matches the default style of [TextField], to match the other fields
// in the form. TextField's default style uses `bodyLarge` for Material 3,
// or otherwise `titleMedium`.
final defaultStyle = Theme.of(context).useMaterial3
? Theme.of(context).textTheme.bodyLarge
: Theme.of(context).textTheme.titleMedium;
Expand Down Expand Up @@ -333,10 +333,11 @@ class _SupaEmailAuthState extends State<SupaEmailAuth> {
...widget.metadataFields!
.map((metadataField) => [
// Render a Checkbox that displays an error message
// beneath it if the field is required and the user hasn't checked it when submitting.
// beneath it if the field is required and the user
// hasn't checked it when submitting the form.
if (metadataField is BooleanMetaDataField)
FormField<bool>(
validator: metadataField.required
validator: metadataField.isRequired
? (bool? value) {
if (value != true) {
return localization.requiredFieldError;
Expand Down Expand Up @@ -368,6 +369,9 @@ class _SupaEmailAuthState extends State<SupaEmailAuth> {
metadataField.checkboxSemanticLabel,
controlAffinity:
metadataField.checkboxPosition,
contentPadding:
const EdgeInsets.symmetric(
horizontal: 4.0),
activeColor: theme.colorScheme.primary,
checkColor: theme.colorScheme.onPrimary,
tileColor: isDark
Expand Down

0 comments on commit 0b0b50f

Please sign in to comment.