How to Build a Search Nearby Map Screen in Flutter (Full Code + Preview)

import 'package:flutter/material.dart';

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

/// "Search Nearby" screen from the Wallet App UI Kit (Finco): a full-bleed map
/// with a floating search bar, location pins, a "locate me" button and the
/// bottom nav.
///
/// Self-contained, pure Flutter. Bundles its exact design font (Aileron) and
/// the kit's map art + icons. Fully responsive — the map fills any size, the
/// pin overlay scales to fit and width caps on large screens. Renders
/// standalone when pushed as a route.
class WalletSearchNearbyScreen extends StatefulWidget {
  const WalletSearchNearbyScreen({super.key});

  @override
  State<WalletSearchNearbyScreen> createState() =>
      _WalletSearchNearbyScreenState();
}

class _WalletSearchNearbyScreenState extends State<WalletSearchNearbyScreen> {
  int _navIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: P.bg,
      body: Stack(
        children: <Widget>[
          // Full-bleed map.
          Positioned.fill(
            child: Image.asset(
              '${P.img}/map.png',
              fit: BoxFit.cover,
              filterQuality: FilterQuality.high,
            ),
          ),
          // Overlay content.
          SafeArea(
            bottom: false,
            child: Center(
              child: ConstrainedBox(
                constraints: const BoxConstraints(maxWidth: 480),
                child: Column(
                  children: <Widget>[
                    const SizedBox(height: 37),
                    const Padding(
                      padding: EdgeInsets.symmetric(horizontal: 32),
                      child: _SearchBar(),
                    ),
                    const SizedBox(height: 24),
                    // Pin overlay — scales to fit, never overflows.
                    Expanded(
                      child: Padding(
                        padding: const EdgeInsets.fromLTRB(16, 0, 16, 110),
                        child: Stack(
                          children: <Widget>[
                            Align(
                              alignment: Alignment.topCenter,
                              child: Image.asset(
                                '${P.img}/locationspots.png',
                                fit: BoxFit.contain,
                                filterQuality: FilterQuality.high,
                              ),
                            ),
                            Align(
                              alignment: Alignment.bottomRight,
                              child: _LocateButton(onTap: () {}),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          // Bottom nav.
          Align(
            alignment: Alignment.bottomCenter,
            child: SafeArea(
              top: false,
              child: BottomNav(
                currentIndex: _navIndex,
                onChanged: (int i) => setState(() => _navIndex = i),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class _SearchBar extends StatelessWidget {
  const _SearchBar();

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 59,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(14),
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: const Color(0xFF29304D).withValues(alpha: 0.12),
            blurRadius: 24,
            offset: const Offset(0, 10),
          ),
        ],
      ),
      child: const Row(
        children: <Widget>[
          SizedBox(width: 20),
          Expanded(
            child: TextField(
              cursorColor: P.blue,
              style: TextStyle(
                fontFamily: P.font,
                fontSize: 15,
                color: Color(0xFF33373B),
              ),
              decoration: InputDecoration(
                hintText: 'Search nearest bank or ATM',
                hintStyle: TextStyle(
                  fontFamily: P.font,
                  fontSize: 15,
                  letterSpacing: 0.15,
                  color: Color(0xFF33373B),
                ),
                isDense: true,
                border: InputBorder.none,
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(right: 25),
            child: Icon(Icons.search, size: 22, color: P.ink),
          ),
        ],
      ),
    );
  }
}

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

  final VoidCallback onTap;

  @override
  State<_LocateButton> createState() => _LocateButtonState();
}

class _LocateButtonState extends State<_LocateButton> {
  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.94 : 1,
        duration: const Duration(milliseconds: 150),
        child: Image.asset(
          '${P.img}/location_img.png',
          width: 58,
          height: 58,
          filterQuality: FilterQuality.high,
        ),
      ),
    );
  }
}