How to Build a Send Money Screen in Flutter (Full Code + Preview)

import 'package:flutter/material.dart';

import 'widgets/palette.dart';
import 'widgets/sections.dart';

/// "Send Money" screen from the Wallet App UI Kit (Finco): a top bar, a header,
/// a four-way option selector, a recent-receipts strip and an "Add New Contact"
/// card with a search field and invite rows.
///
/// Self-contained, pure Flutter. Bundles its exact design font (Aileron) and
/// the kit's icons + avatars. Fully responsive — content scrolls and width caps
/// on large screens. Renders standalone when pushed as a route.
class WalletSendMoneyScreen extends StatefulWidget {
  const WalletSendMoneyScreen({super.key});

  @override
  State<WalletSendMoneyScreen> createState() => _WalletSendMoneyScreenState();
}

class _WalletSendMoneyScreenState extends State<WalletSendMoneyScreen> {
  int _option = 1; // TopUp selected by default.

  static const List<List<String>> _options = <List<String>>[
    <String>['icon_home.png', 'Bank'],
    <String>['topup_icon.png', 'TopUp'],
    <String>['qrcode_icon.png', 'QR Code'],
    <String>['nearby_icon.png', 'Nearby'],
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: P.bg,
      body: SafeArea(
        child: Center(
          child: ConstrainedBox(
            constraints: const BoxConstraints(maxWidth: 480),
            child: SingleChildScrollView(
              physics: const BouncingScrollPhysics(),
              padding: const EdgeInsets.fromLTRB(22, 24, 22, 32),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  const _TopBar(),
                  const SizedBox(height: 18),
                  const Text('Send Money', style: P.title),
                  const SizedBox(height: 25),
                  const Text('Select Option', style: P.sectionHeader),
                  const SizedBox(height: 20),
                  Row(
                    children: <Widget>[
                      for (int i = 0; i < _options.length; i++) ...<Widget>[
                        Expanded(
                          child: OptionCard(
                            asset: _options[i][0],
                            label: _options[i][1],
                            active: _option == i,
                            onTap: () => setState(() => _option = i),
                          ),
                        ),
                        if (i != _options.length - 1)
                          const SizedBox(width: 8),
                      ],
                    ],
                  ),
                  const SizedBox(height: 31),
                  const RecentReceipts(),
                  const SizedBox(height: 14),
                  const _AddContactCard(),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class _TopBar extends StatelessWidget {
  const _TopBar();

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 40,
      child: Row(
        children: <Widget>[
          Image.asset('${P.img}/icon_menu.png',
              height: 18, filterQuality: FilterQuality.high),
          const Spacer(),
          Image.asset('${P.img}/icon_dashboard.png',
              height: 24, filterQuality: FilterQuality.high),
        ],
      ),
    );
  }
}

class _AddContactCard extends StatelessWidget {
  const _AddContactCard();

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(14),
        boxShadow: P.cardShadow,
      ),
      padding: const EdgeInsets.fromLTRB(24, 23, 24, 24),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const <Widget>[
          Text('Add New Contact', style: P.sectionHeader),
          SizedBox(height: 14),
          _SearchField(),
          SizedBox(height: 6),
          InviteRow(
            asset: 'sendme_imgone.png',
            name: 'Sir James',
            phone: '+0 000 0000',
            invited: true,
          ),
          InviteRow(
            asset: 'sendme_imgtwo.png',
            name: 'Sir James',
            phone: '+0 000 0000',
            invited: false,
          ),
        ],
      ),
    );
  }
}

class _SearchField extends StatelessWidget {
  const _SearchField();

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: P.searchFill,
        borderRadius: BorderRadius.circular(5),
        border: Border.all(color: P.cyan, width: 0.5),
      ),
      child: const Row(
        children: <Widget>[
          Expanded(
            child: TextField(
              cursorColor: P.blue,
              style: TextStyle(
                fontFamily: P.font,
                fontSize: 14,
                color: P.name,
              ),
              decoration: InputDecoration(
                hintText: 'Search contacts…',
                hintStyle: TextStyle(
                  fontFamily: P.font,
                  fontSize: 14,
                  color: Color(0xFF9AA3AD),
                ),
                isDense: true,
                border: InputBorder.none,
                contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 14),
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(right: 16),
            child: Icon(Icons.search, size: 20, color: P.ink),
          ),
        ],
      ),
    );
  }
}