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

import 'package:flutter/material.dart';

import 'widgets/wallet_input.dart';

/// "Sign In To Account" screen from the Wallet App UI Kit (Finco): a
/// left-aligned header, username + password inputs, a blue "Sign in" CTA, a
/// black "Sign up with Mobile" button, and a "Sign Up" link.
///
/// Self-contained, pure Flutter. Bundles its exact design font (Aileron).
/// Fully responsive — scrolls and caps its width on large screens. Renders
/// standalone when pushed as a route.
class WalletSignInScreen extends StatelessWidget {
  const WalletSignInScreen({super.key});

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Center(
          child: SingleChildScrollView(
            physics: const ClampingScrollPhysics(),
            padding: const EdgeInsets.fromLTRB(37, 56, 37, 40),
            child: ConstrainedBox(
              constraints: const BoxConstraints(maxWidth: 460),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  // Header — left aligned.
                  const Text(
                    'Sign In\nTo Account',
                    textAlign: TextAlign.left,
                    style: TextStyle(
                      fontFamily: 'Aileron',
                      fontWeight: FontWeight.w700,
                      fontSize: 35,
                      height: 1.2,
                      color: _ink,
                    ),
                  ),
                  const SizedBox(height: 29),
                  const Padding(
                    padding: EdgeInsets.only(right: 58),
                    child: Text(
                      'Sign with username or email and password to use '
                      'your account.',
                      style: TextStyle(
                        fontFamily: 'Aileron',
                        fontWeight: FontWeight.w400,
                        fontSize: 16,
                        height: 1.5,
                        letterSpacing: -0.16,
                        color: _ink,
                      ),
                    ),
                  ),
                  const SizedBox(height: 48),

                  // Inputs.
                  const WalletInput(hint: 'Username', accent: true),
                  const SizedBox(height: 10),
                  const WalletInput(hint: 'Password', obscure: true),

                  // CTAs.
                  const SizedBox(height: 36),
                  _Button(
                    label: 'Sign in',
                    background: _blue,
                    onTap: () {},
                  ),
                  const SizedBox(height: 8),
                  _Button(
                    label: 'Sign up with Mobile',
                    background: Colors.black,
                    icon: Icons.phone_android,
                    onTap: () {},
                  ),

                  // Footer link.
                  const SizedBox(height: 28),
                  GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap: () {},
                    child: const Padding(
                      padding: EdgeInsets.symmetric(vertical: 4),
                      child: Text(
                        'Don’t have an account? - Sign Up',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontFamily: 'Aileron',
                          fontWeight: FontWeight.w400,
                          fontSize: 15,
                          color: _muted,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

/// Full-width rounded button, optionally with a leading icon.
class _Button extends StatefulWidget {
  const _Button({
    required this.label,
    required this.background,
    required this.onTap,
    this.icon,
  });

  final String label;
  final Color background;
  final VoidCallback onTap;
  final IconData? icon;

  @override
  State<_Button> createState() => _ButtonState();
}

class _ButtonState extends State<_Button> {
  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: widget.background,
            borderRadius: BorderRadius.circular(15),
            boxShadow: <BoxShadow>[
              BoxShadow(
                color: widget.background.withValues(alpha: 0.28),
                blurRadius: 16,
                offset: const Offset(0, 8),
              ),
            ],
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              if (widget.icon != null) ...<Widget>[
                Icon(widget.icon, size: 20, color: Colors.white),
                const SizedBox(width: 12),
              ],
              Flexible(
                child: Text(
                  widget.label,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.center,
                  style: const TextStyle(
                    fontFamily: 'Aileron',
                    fontWeight: FontWeight.w700,
                    fontSize: 17,
                    color: Colors.white,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}