rapPayne

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override

rapPayne

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override

rapPayne

// MIT License
//
// Copyright (c) 2023 Simon Lightfoot
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:

rapPayne

// ignore_for_file: avoid_print

import 'package:flutter/material.dart';

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

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

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

/* 
**  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

// 💩
// 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

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

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

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;