rapPayne

String _validateEmail(String email) {
  // 1
  RegExp regex = RegExp(r'\w+@\w+\.\w+'); // translates to word@word.word
  // 2
  if (email.isEmpty)
    return 'We need an email address';
  else if (!regex.hasMatch(email))
    // 3
    return "That doesn't look like an email address";
  else

rapPayne

// TODO 5: Add onSaved and validator methods
// 1
onSaved: (String val) => _loginObject['email'] = val,
// 2
validator: _validateEmail,

rapPayne

String _validatePassword(String pass1) {
  // 1
  RegExp hasUpper = RegExp(r'[A-Z]');
  RegExp hasLower = RegExp(r'[a-z]');
  RegExp hasDigit = RegExp(r'\d');
  RegExp hasPunct = RegExp(r'[!@#\$&*~-]');
  // 2
  if (!RegExp(r'.{8,}').hasMatch(pass1))
    return 'Passwords must have at least 8 characters';
  // 3

rapPayne

Widget get _buildAgreeToTermsField {
  // TODO 8: Wrap the Column with a FormField<bool>
  return Column(
    children: <Widget>[
      Row(
        children: <Widget>[
          Checkbox(
            value: _agree,
            onChanged: (bool val) => setState(() {
              _agree = val;

rapPayne

Widget get _buildAgreeToTermsField {
  // TODO 8: Wrap the Column with a FormField<bool>
  return FormField<bool>(
    // 1
    initialValue: _agree,
    // 2
    builder: (FormFieldState<bool> state) {
      return Column(
        children: <Widget>[
          Row(

rapPayne

String _validateEmail(String email) {
  // 1
  RegExp regex = RegExp(r'\w+@\w+\.\w+');
  // Add the following line to set focus to the email field
  if (email.isEmpty || !regex.hasMatch(email)) _emailFocusNode.requestFocus();
  // 2
  if (email.isEmpty)
    return 'We need an email address';
  else if (!regex.hasMatch(email))
    // 3

rapPayne

// 💩
// Much more complex; see all the "style={styles.whatever}"? They get in the way
// of quickly understanding what's in this component.

export const ChangeName = ({ user, update, save }) => {
  return (
    <section style={styles.wrapper}>
      <div style={styles.formGroup}>
        <label htmlFor="user" style={styles.label}>User name</label>
        <input id="user" onChange={e => update(e.target.value)} value={user} />

rapPayne

/* 
**  Note the use of CSS nesting. Nesting all styles underneath a class of
**  ChangeName ensures they will ONLY be seen in the ChangeName component.
**  🙌 This is the best of both worlds!
*/
.ChangeName {
  border: 1px solid var(--dark1);
  padding: 10px;

  &>div {

rapPayne

// Super-simple component -- An input with a label and a button. No big deal.
export const ChangeName = ({ user, update, save }) => {
  return (
    <section>
      <div>
        <label htmlFor="user">User name</label>
        <input id="user" onChange={e => update(e.target.value)} value={user} />
      </div>
      <button onClick={save}>Save</button>
    </section>

rapPayne

// ignore_for_file: avoid_print

import 'package:flutter/material.dart';

void main() {
  runApp(const RootWidget());
}

class RootWidget extends StatefulWidget {
  const RootWidget({super.key});