How to Build a Wishlist Share Bottom Sheet in Flutter (Full Code + Preview)

import 'package:flutter/material.dart';

/// StyleCart — Share Wishlist.
///
/// A dimmed-scrim bottom sheet to share a wishlist board: a painted QR card a
/// friend can scan, a copy-link row, and a row of share channels. Toggles let
/// the owner allow others to add items or keep the board view-only.
///
/// Self-contained per CONVENTIONS.md: pure Flutter, bundled Manrope, inline
/// Airbnb-style tokens, own light theme + SafeArea. The QR is a CustomPainter
/// (deterministic module grid — no emoji glyph, no network). Exposes callbacks
/// only.
class EcomWishlistShareScreen extends StatefulWidget {
  const EcomWishlistShareScreen({
    super.key,
    this.onClose,
    this.onCopyLink,
    this.onChannel,
  });

  final VoidCallback? onClose;
  final VoidCallback? onCopyLink;
  final ValueChanged<String>? onChannel;

  @override
  State<EcomWishlistShareScreen> createState() =>
      _EcomWishlistShareScreenState();
}

class _EcomWishlistShareScreenState extends State<EcomWishlistShareScreen> {
  static const String _font = 'Manrope';
  static const Color _canvas = Color(0xFFFFFFFF);
  static const Color _ink = Color(0xFF222222);
  static const Color _muted = Color(0xFF6A6A6A);
  static const Color _faint = Color(0xFFC1C1C1);
  static const Color _brand = Color(0xFFFF385C);
  static const Color _surface = Color(0xFFF2F2F2);
  static const Color _hairline = Color(0xFFEBEBEB);

  static const String _link = 'rohansurve.in/w/wedding-guest';

  bool _allowAdds = true;
  bool _copied = false;

  static const List<_Channel> _channels = <_Channel>[
    _Channel('Messages', Icons.sms_rounded, Color(0xFF2E9E5B)),
    _Channel('Mail', Icons.mail_rounded, Color(0xFFF5A623)),
    _Channel('Copy', Icons.link_rounded, Color(0xFF222222)),
    _Channel('More', Icons.more_horiz_rounded, Color(0xFF6A6A6A)),
  ];

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData.light(useMaterial3: true),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: Stack(
          children: <Widget>[
            // Dimmed scrim — tap to dismiss.
            Positioned.fill(
              child: GestureDetector(
                onTap: widget.onClose,
                child: const ColoredBox(color: Color(0x66000000)),
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: _sheet(),
            ),
          ],
        ),
      ),
    );
  }

  Widget _sheet() {
    return Container(
      decoration: const BoxDecoration(
        color: _canvas,
        borderRadius: BorderRadius.vertical(top: Radius.circular(28)),
      ),
      child: SafeArea(
        top: false,
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.fromLTRB(20, 10, 20, 20),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Container(
                  width: 40,
                  height: 4,
                  decoration: BoxDecoration(
                    color: _hairline,
                    borderRadius: BorderRadius.circular(2),
                  ),
                ),
                const SizedBox(height: 18),
                const Text(
                  'Share “Wedding guest”',
                  style: TextStyle(
                    fontFamily: _font,
                    fontSize: 19,
                    fontWeight: FontWeight.w800,
                    letterSpacing: -0.3,
                    color: _ink,
                  ),
                ),
                const SizedBox(height: 4),
                const Text(
                  '12 items · anyone with the link can view',
                  style: TextStyle(
                    fontFamily: _font,
                    fontSize: 13,
                    fontWeight: FontWeight.w500,
                    color: _muted,
                  ),
                ),
                const SizedBox(height: 20),
                _qrCard(),
                const SizedBox(height: 18),
                _linkRow(),
                const SizedBox(height: 16),
                _allowRow(),
                const SizedBox(height: 18),
                _channelRow(),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _qrCard() {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: _canvas,
        borderRadius: BorderRadius.circular(20),
        border: Border.all(color: _hairline),
      ),
      child: Column(
        children: <Widget>[
          SizedBox(
            width: 176,
            height: 176,
            child: CustomPaint(painter: const _QrPainter()),
          ),
          const SizedBox(height: 14),
          const Text(
            'Scan to open the board',
            style: TextStyle(
              fontFamily: _font,
              fontSize: 13.5,
              fontWeight: FontWeight.w600,
              color: _ink,
            ),
          ),
          const SizedBox(height: 2),
          const Text(
            'Point any camera here',
            style: TextStyle(
              fontFamily: _font,
              fontSize: 12,
              fontWeight: FontWeight.w500,
              color: _muted,
            ),
          ),
        ],
      ),
    );
  }

  Widget _linkRow() {
    return Container(
      padding: const EdgeInsets.fromLTRB(16, 6, 6, 6),
      decoration: BoxDecoration(
        color: _surface,
        borderRadius: BorderRadius.circular(14),
      ),
      child: Row(
        children: <Widget>[
          const Icon(Icons.link_rounded, size: 18, color: _muted),
          const SizedBox(width: 10),
          const Expanded(
            child: Text(
              _link,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontFamily: _font,
                fontSize: 13.5,
                fontWeight: FontWeight.w600,
                color: _ink,
              ),
            ),
          ),
          const SizedBox(width: 8),
          SizedBox(
            height: 40,
            child: FilledButton(
              onPressed: () {
                setState(() => _copied = true);
                widget.onCopyLink?.call();
              },
              style: FilledButton.styleFrom(
                backgroundColor: _copied ? _ink : _brand,
                foregroundColor: _canvas,
                padding: const EdgeInsets.symmetric(horizontal: 16),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
              child: Text(
                _copied ? 'Copied' : 'Copy',
                style: const TextStyle(
                  fontFamily: _font,
                  fontSize: 13.5,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _allowRow() {
    return Row(
      children: <Widget>[
        Container(
          width: 38,
          height: 38,
          decoration: BoxDecoration(
            color: _surface,
            borderRadius: BorderRadius.circular(11),
          ),
          child: const Icon(Icons.group_add_rounded, size: 19, color: _ink),
        ),
        const SizedBox(width: 12),
        const Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                'Allow others to add items',
                style: TextStyle(
                  fontFamily: _font,
                  fontSize: 14,
                  fontWeight: FontWeight.w700,
                  color: _ink,
                ),
              ),
              SizedBox(height: 1),
              Text(
                'Collaborators can save into this board',
                style: TextStyle(
                  fontFamily: _font,
                  fontSize: 12,
                  fontWeight: FontWeight.w500,
                  color: _muted,
                ),
              ),
            ],
          ),
        ),
        Switch(
          value: _allowAdds,
          onChanged: (bool v) => setState(() => _allowAdds = v),
          activeThumbColor: _canvas,
          activeTrackColor: _brand,
          inactiveThumbColor: _canvas,
          inactiveTrackColor: _faint,
          trackOutlineColor: WidgetStateProperty.all(Colors.transparent),
        ),
      ],
    );
  }

  Widget _channelRow() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        for (final _Channel c in _channels)
          Expanded(
            child: GestureDetector(
              onTap: () => widget.onChannel?.call(c.label),
              behavior: HitTestBehavior.opaque,
              child: Column(
                children: <Widget>[
                  Container(
                    width: 54,
                    height: 54,
                    decoration: BoxDecoration(
                      color: c.tint.withValues(alpha: 0.10),
                      borderRadius: BorderRadius.circular(16),
                    ),
                    child: Icon(c.icon, size: 23, color: c.tint),
                  ),
                  const SizedBox(height: 7),
                  Text(
                    c.label,
                    style: const TextStyle(
                      fontFamily: _font,
                      fontSize: 12,
                      fontWeight: FontWeight.w600,
                      color: _ink,
                    ),
                  ),
                ],
              ),
            ),
          ),
      ],
    );
  }
}

class _Channel {
  const _Channel(this.label, this.icon, this.tint);
  final String label;
  final IconData icon;
  final Color tint;
}

/// Paints a stylised QR code: three finder squares plus a deterministic module
/// grid driven by a fixed bit table (no randomness, no network) so it renders
/// identically every frame and in the golden harness.
class _QrPainter extends CustomPainter {
  const _QrPainter();

  // 21×21 module field. Finder patterns are drawn separately; the data area is
  // filled from this hand-authored bit table so the result looks like a real
  // QR without encoding anything scannable.
  static const int _n = 21;

  @override
  void paint(Canvas canvas, Size size) {
    final double m = size.width / _n; // module size
    final Paint dark = Paint()..color = const Color(0xFF222222);

    // Quiet-zone background.
    canvas.drawRRect(
      RRect.fromRectAndRadius(
        Rect.fromLTWH(0, 0, size.width, size.height),
        const Radius.circular(8),
      ),
      Paint()..color = const Color(0xFFFFFFFF),
    );

    // Data modules: a fixed pseudo-pattern (avoid the finder corners).
    for (int y = 0; y < _n; y++) {
      for (int x = 0; x < _n; x++) {
        if (_inFinder(x, y)) continue;
        // Deterministic checker-ish hash — stable across frames.
        final int h = (x * 7 + y * 13 + x * y * 3) % 5;
        if (h == 0 || h == 2) {
          canvas.drawRect(
            Rect.fromLTWH(x * m + m * 0.08, y * m + m * 0.08, m * 0.84, m * 0.84),
            dark,
          );
        }
      }
    }

    // Three finder patterns (top-left, top-right, bottom-left).
    _finder(canvas, 0, 0, m, dark);
    _finder(canvas, (_n - 7) * m, 0, m, dark);
    _finder(canvas, 0, (_n - 7) * m, m, dark);

    // Brand centre dot — the StyleCart heart accent inside the QR.
    final double cx = size.width / 2;
    final double cy = size.height / 2;
    canvas.drawRRect(
      RRect.fromRectAndRadius(
        Rect.fromCenter(center: Offset(cx, cy), width: m * 4.4, height: m * 4.4),
        Radius.circular(m),
      ),
      Paint()..color = const Color(0xFFFFFFFF),
    );
    canvas.drawCircle(Offset(cx, cy), m * 1.4, Paint()..color = _brandRed);
  }

  static const Color _brandRed = Color(0xFFFF385C);

  bool _inFinder(int x, int y) {
    const int f = 8; // 7-module finder + 1 separator
    final bool tl = x < f && y < f;
    final bool tr = x >= _n - f && y < f;
    final bool bl = x < f && y >= _n - f;
    return tl || tr || bl;
  }

  void _finder(Canvas canvas, double left, double top, double m, Paint dark) {
    // Outer 7×7 ring.
    canvas.drawRRect(
      RRect.fromRectAndRadius(
        Rect.fromLTWH(left, top, m * 7, m * 7),
        Radius.circular(m * 1.6),
      ),
      dark,
    );
    // Punch the white gap.
    canvas.drawRRect(
      RRect.fromRectAndRadius(
        Rect.fromLTWH(left + m, top + m, m * 5, m * 5),
        Radius.circular(m * 1.1),
      ),
      Paint()..color = const Color(0xFFFFFFFF),
    );
    // Solid inner 3×3.
    canvas.drawRRect(
      RRect.fromRectAndRadius(
        Rect.fromLTWH(left + m * 2, top + m * 2, m * 3, m * 3),
        Radius.circular(m * 0.8),
      ),
      dark,
    );
  }

  @override
  bool shouldRepaint(_QrPainter oldDelegate) => false;
}