How to Build a Sign Up Screen in Flutter (Full Code + Preview)

import 'package:flutter/material.dart';

import 'widgets/cta_button.dart';
import 'widgets/sign_up_field.dart';

/// Sign Up screen from the "bankee" UI kit.
///
/// A centered welcome header over a form board: Full Name (focused by default,
/// per the design), Email Address and Password fields, a Terms & Conditions
/// checkbox, two CTAs (create account / sign up with phone) and a sign-in link.
///
/// Self-contained, pure Flutter. Bundles its exact design font (DM Sans) and
/// renders standalone when pushed as a route.
class SignUpScreen extends StatefulWidget {
  const SignUpScreen({super.key});

  @override
  State<SignUpScreen> createState() => _SignUpScreenState();
}

class _SignUpScreenState extends State<SignUpScreen> {
  static const Color _primary = Color(0xFF7165E3);
  static const Color _navy = Color(0xFF1C1939);
  static const Color _subtitle = Color(0xCC1C1939); // #1C1939 @ 80%
  static const Color _purpleTint = Color(0x337165E3); // #7165E3 @ 20%

  final TextEditingController _name = TextEditingController();
  final TextEditingController _email = TextEditingController();
  final TextEditingController _password = TextEditingController();

  bool _agreed = false;

  @override
  void dispose() {
    _name.dispose();
    _email.dispose();
    _password.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      // Tap anywhere to dismiss the keyboard (the Full Name field autofocuses).
      body: GestureDetector(
        onTap: () => FocusScope.of(context).unfocus(),
        child: SafeArea(
          child: SingleChildScrollView(
            padding: const EdgeInsets.fromLTRB(37, 66, 37, 32),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                const Text(
                  'Welcome!',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontFamily: 'DMSans',
                    fontSize: 35,
                    fontWeight: FontWeight.w700,
                    color: _navy,
                  ),
                ),
                const SizedBox(height: 21),
                const Text(
                  'Please provide following\ndetails for your new account',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontFamily: 'DMSans',
                    fontSize: 15,
                    height: 25 / 15,
                    color: _subtitle,
                  ),
                ),
                const SizedBox(height: 62),
                SignUpField(
                  hint: 'Full Name',
                  controller: _name,
                  autofocus: true,
                  keyboardType: TextInputType.name,
                  textInputAction: TextInputAction.next,
                ),
                const SizedBox(height: 5),
                SignUpField(
                  hint: 'Email Address',
                  controller: _email,
                  keyboardType: TextInputType.emailAddress,
                  textInputAction: TextInputAction.next,
                ),
                const SizedBox(height: 5),
                SignUpField(
                  hint: 'Password',
                  controller: _password,
                  isPassword: true,
                  textInputAction: TextInputAction.done,
                ),
                const SizedBox(height: 28),
                _TermsRow(
                  agreed: _agreed,
                  onChanged: () => setState(() => _agreed = !_agreed),
                ),
                const SizedBox(height: 49),
                CtaButton(
                  label: 'Sign up my Account',
                  color: _primary,
                  onPressed: () {},
                ),
                const SizedBox(height: 7),
                CtaButton(
                  label: 'Sign up with Phone Number',
                  color: _navy,
                  onPressed: () {},
                ),
                const SizedBox(height: 19),
                _SignInLink(onTap: () {}),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

/// Checkbox + "agree with our Terms and Conditions" line.
class _TermsRow extends StatelessWidget {
  const _TermsRow({required this.agreed, required this.onChanged});

  final bool agreed;
  final VoidCallback onChanged;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 5),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: onChanged,
            child: Container(
              width: 26,
              height: 26,
              decoration: BoxDecoration(
                color: _SignUpScreenState._purpleTint,
                borderRadius: BorderRadius.circular(4),
                border: Border.all(
                  color: _SignUpScreenState._primary,
                  width: 1,
                ),
              ),
              child: agreed
                  ? const Icon(
                      Icons.check_rounded,
                      size: 18,
                      color: _SignUpScreenState._primary,
                    )
                  : null,
            ),
          ),
          const SizedBox(width: 9),
          const Expanded(
            child: Padding(
              padding: EdgeInsets.only(top: 1),
              child: Text(
                'By creating your account you have to agree with our '
                'Teams and Conditions.',
                style: TextStyle(
                  fontFamily: 'DMSans',
                  fontSize: 13,
                  height: 18 / 13,
                  letterSpacing: 13 * 0.0267, // 2.67% tracking
                  color: _SignUpScreenState._subtitle,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

/// "Already have an account? - Sign In" — regular text with a bold link.
class _SignInLink extends StatelessWidget {
  const _SignInLink({required this.onTap});

  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: onTap,
      child: Text.rich(
        const TextSpan(
          text: 'Already have an account? - ',
          style: TextStyle(
            fontFamily: 'DMSans',
            fontSize: 15,
            height: 25 / 15,
            fontWeight: FontWeight.w400,
            color: _SignUpScreenState._subtitle,
          ),
          children: <InlineSpan>[
            TextSpan(
              text: 'Sign In',
              style: TextStyle(fontWeight: FontWeight.w700),
            ),
          ],
        ),
        textAlign: TextAlign.center,
      ),
    );
  }
}