How to Build a Phone Registration Screen in Flutter (Full Code + Preview)

import 'package:flutter/material.dart';

import 'widgets/location_card.dart';

/// "Phone Registration" screen from the Wallet App UI Kit (Finco): a
/// left-aligned header, a country/location selector card, an outlined phone
/// number field, a blue "Continue" CTA and a policy note.
///
/// Self-contained, pure Flutter. Bundles its exact design font (Aileron) and
/// the kit's flag asset. Fully responsive — scrolls and caps its width on large
/// screens. Renders standalone when pushed as a route.
class WalletPhoneRegistrationScreen extends StatelessWidget {
  const WalletPhoneRegistrationScreen({super.key});

  static const Color _ink = Color(0xFF29304D);
  static const Color _blue = Color(0xFF4F62C0);
  static const Color _muted = Color(0xFF323232);
  static const Color _cyan = Color(0xFFA5E8F0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Center(
          child: SingleChildScrollView(
            physics: const ClampingScrollPhysics(),
            padding: const EdgeInsets.fromLTRB(37, 40, 37, 48),
            child: ConstrainedBox(
              constraints: const BoxConstraints(maxWidth: 460),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  // Header.
                  const Text(
                    'Phone\nRegistration',
                    style: TextStyle(
                      fontFamily: 'Aileron',
                      fontWeight: FontWeight.w700,
                      fontSize: 35,
                      height: 1.2,
                      color: _ink,
                    ),
                  ),
                  const SizedBox(height: 18),
                  const Padding(
                    padding: EdgeInsets.only(right: 10),
                    child: Text(
                      'Please enter your valid phone number. We will send '
                      'you 4-digit code to verify account.',
                      style: TextStyle(
                        fontFamily: 'Aileron',
                        fontWeight: FontWeight.w400,
                        fontSize: 15,
                        height: 1.6,
                        color: _muted,
                      ),
                    ),
                  ),

                  // Location.
                  const SizedBox(height: 44),
                  const _FieldLabel('Enter your location'),
                  const SizedBox(height: 18),
                  LocationCard(country: 'India', onTap: () {}),

                  // Phone number.
                  const SizedBox(height: 40),
                  const _FieldLabel('Enter your phone number'),
                  const SizedBox(height: 18),
                  const _PhoneField(),

                  // CTA.
                  const SizedBox(height: 56),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 20),
                    child: _ContinueButton(onTap: () {}),
                  ),
                  const SizedBox(height: 33),
                  const Text(
                    'Please review our\nTeams and Conditions Policy',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontFamily: 'Aileron',
                      fontWeight: FontWeight.w400,
                      fontSize: 15,
                      height: 1.5,
                      color: _muted,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

/// Bold section label above each input.
class _FieldLabel extends StatelessWidget {
  const _FieldLabel(this.text);

  final String text;

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.centerLeft,
      child: Text(
        text,
        style: const TextStyle(
          fontFamily: 'Aileron',
          fontWeight: FontWeight.w700,
          fontSize: 17,
          color: WalletPhoneRegistrationScreen._ink,
        ),
      ),
    );
  }
}

/// Outlined phone field — thin cyan border, pale cyan fill, bold cyan text,
/// matching the kit's `rect_lightcolor_outline`.
class _PhoneField extends StatelessWidget {
  const _PhoneField();

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: WalletPhoneRegistrationScreen._cyan.withValues(alpha: 0.18),
        borderRadius: BorderRadius.circular(15),
        border: Border.all(
          color: WalletPhoneRegistrationScreen._cyan,
          width: 1,
        ),
      ),
      child: const TextField(
        keyboardType: TextInputType.phone,
        cursorColor: WalletPhoneRegistrationScreen._cyan,
        style: TextStyle(
          fontFamily: 'Aileron',
          fontWeight: FontWeight.w700,
          fontSize: 15,
          color: WalletPhoneRegistrationScreen._cyan,
        ),
        decoration: InputDecoration(
          hintText: '+00 000 0000',
          hintStyle: TextStyle(
            fontFamily: 'Aileron',
            fontWeight: FontWeight.w700,
            fontSize: 15,
            color: WalletPhoneRegistrationScreen._cyan,
          ),
          isDense: true,
          border: InputBorder.none,
          contentPadding: EdgeInsets.fromLTRB(24, 16, 24, 16),
        ),
      ),
    );
  }
}

class _ContinueButton extends StatefulWidget {
  const _ContinueButton({required this.onTap});

  final VoidCallback onTap;

  @override
  State<_ContinueButton> createState() => _ContinueButtonState();
}

class _ContinueButtonState extends State<_ContinueButton> {
  bool _pressed = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => setState(() => _pressed = true),
      onTapUp: (_) => setState(() => _pressed = false),
      onTapCancel: () => setState(() => _pressed = false),
      onTap: widget.onTap,
      child: AnimatedScale(
        scale: _pressed ? 0.98 : 1,
        duration: const Duration(milliseconds: 150),
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 20),
          decoration: BoxDecoration(
            color: WalletPhoneRegistrationScreen._blue,
            borderRadius: BorderRadius.circular(15),
            boxShadow: <BoxShadow>[
              BoxShadow(
                color: WalletPhoneRegistrationScreen._blue
                    .withValues(alpha: 0.30),
                blurRadius: 18,
                offset: const Offset(0, 10),
              ),
            ],
          ),
          child: const Text(
            'Continue',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontFamily: 'Aileron',
              fontWeight: FontWeight.w700,
              fontSize: 17,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}