How to Build a Personal Details KYC Screen in Flutter (Full Code + Preview)

import 'package:flutter/material.dart';

/// Personal details — read-only KYC information (Revolut-inspired design).
///
/// Self-contained per CONVENTIONS.md: pure Flutter only, the exact design font
/// (Inter) is bundled under `fonts/`, no network/emoji images, and the screen
/// forces its own dark theme. A verified banner sits above grouped identity
/// rows; sensitive fields are partly masked.
class FintechPersonalDetailsScreen extends StatelessWidget {
  const FintechPersonalDetailsScreen({super.key, this.onBack});

  final VoidCallback? onBack;

  static const String _font = 'Inter';
  static const Color _bg = Color(0xFF191C1F);
  static const Color _surface = Color(0xFF242729);
  static const Color _teal = Color(0xFF00A87E);
  static const Color _muted = Color(0xFF8D969E);
  static const Color _hairline = Color(0xFF2E3235);

  static const List<List<String>> _identity = <List<String>>[
    <String>['Legal name', 'Alexander Stone'],
    <String>['Date of birth', '14 Mar 1994'],
    <String>['Nationality', 'United Kingdom'],
  ];
  static const List<List<String>> _contact = <List<String>>[
    <String>['Address', '14 Charlotte St, London W1T'],
    <String>['Email', 'alex@stone.com'],
    <String>['Phone', '+44 7700 900123'],
  ];
  static const List<List<String>> _docs = <List<String>>[
    <String>['ID document', 'Passport ····7741'],
    <String>['Tax residency', 'United Kingdom'],
  ];

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData.dark(useMaterial3: true),
      child: Scaffold(
        backgroundColor: _bg,
        body: SafeArea(
          child: Column(
            children: <Widget>[
              _buildAppBar(),
              Expanded(
                child: ListView(
                  physics: const BouncingScrollPhysics(),
                  padding: const EdgeInsets.fromLTRB(20, 8, 20, 24),
                  children: <Widget>[
                    _buildVerified(),
                    const SizedBox(height: 20),
                    _label('Identity'),
                    _group(_identity),
                    const SizedBox(height: 20),
                    _label('Contact'),
                    _group(_contact),
                    const SizedBox(height: 20),
                    _label('Documents'),
                    _group(_docs),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildAppBar() {
    return Padding(
      padding: const EdgeInsets.fromLTRB(8, 4, 8, 4),
      child: Row(
        children: <Widget>[
          IconButton(
            onPressed: onBack,
            icon: const Icon(Icons.arrow_back_ios_new_rounded,
                size: 20, color: Colors.white),
          ),
          const Expanded(
            child: Text(
              'Personal details',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontFamily: _font,
                fontSize: 18,
                fontWeight: FontWeight.w500,
                letterSpacing: 0.24,
                color: Colors.white,
              ),
            ),
          ),
          const SizedBox(width: 48),
        ],
      ),
    );
  }

  Widget _buildVerified() {
    return Container(
      padding: const EdgeInsets.all(14),
      decoration: BoxDecoration(
        color: _teal.withValues(alpha: 0.12),
        borderRadius: BorderRadius.circular(14),
      ),
      child: Row(
        children: const <Widget>[
          Icon(Icons.verified_rounded, size: 20, color: _teal),
          SizedBox(width: 12),
          Expanded(
            child: Text(
              'Your identity is verified. To change these details, contact '
              'support.',
              style: TextStyle(
                fontFamily: _font,
                fontSize: 12.5,
                height: 1.4,
                letterSpacing: 0.24,
                color: Colors.white,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _label(String text) {
    return Padding(
      padding: const EdgeInsets.only(left: 4, bottom: 10),
      child: Text(
        text.toUpperCase(),
        style: const TextStyle(
          fontFamily: _font,
          fontSize: 11,
          fontWeight: FontWeight.w500,
          letterSpacing: 1.0,
          color: _muted,
        ),
      ),
    );
  }

  Widget _group(List<List<String>> rows) {
    final List<Widget> children = <Widget>[];
    for (int i = 0; i < rows.length; i++) {
      if (i != 0) {
        children.add(const Divider(height: 1, color: _hairline));
      }
      children.add(Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 15),
        child: Row(
          children: <Widget>[
            Expanded(
              child: Text(
                rows[i][0],
                style: const TextStyle(
                  fontFamily: _font,
                  fontSize: 14,
                  letterSpacing: 0.24,
                  color: _muted,
                ),
              ),
            ),
            Flexible(
              child: Text(
                rows[i][1],
                textAlign: TextAlign.right,
                style: const TextStyle(
                  fontFamily: _font,
                  fontSize: 14,
                  fontWeight: FontWeight.w500,
                  letterSpacing: 0.24,
                  color: Colors.white,
                ),
              ),
            ),
          ],
        ),
      ));
    }
    return Container(
      decoration: BoxDecoration(
        color: _surface,
        borderRadius: BorderRadius.circular(16),
      ),
      child: Column(children: children),
    );
  }
}