How to Build a Link Preview Feed with Painted URL Unfurls in Flutter (Full Code + Preview)

import 'package:flutter/material.dart';

/// Link Card — feed posts that unfurl a shared URL into a rich preview. Shows
/// three variants: a large hero-banner unfurl, a compact side-thumbnail row, and
/// an article unfurl with a read-time meta chip. All thumbnails and favicons are
/// painted (no network images). Self-contained per CONVENTIONS.md: pure Flutter,
/// bundled Inter font, own dark theme, SafeArea, overflow-proof.
class SocialFeedLinkPreviewScreen extends StatelessWidget {
  const SocialFeedLinkPreviewScreen({
    super.key,
    this.onBack,
    this.onLink,
    this.onPost,
  });

  final VoidCallback? onBack;
  final ValueChanged<String>? onLink;
  final ValueChanged<String>? onPost;

  static const String _font = 'Inter';
  static const Color _bg = Color(0xFF0B0B0F);
  static const Color _surface = Color(0xFF15151B);
  static const Color _brand = Color(0xFF6E56F7);
  static const Color _hairline = Color(0xFF26262F);
  static const Color _textHi = Color(0xFFF4F4F7);
  static const Color _muted = Color(0xFF8A8A99);

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData.dark(useMaterial3: true),
      child: Scaffold(
        backgroundColor: _bg,
        body: SafeArea(
          child: Column(
            children: <Widget>[
              _TopBar(onBack: onBack),
              Expanded(
                child: ListView(
                  padding: EdgeInsets.zero,
                  children: <Widget>[
                    _PostShell(
                      id: 'l1',
                      name: 'Maya Chen',
                      handle: 'mayabuilds',
                      time: '2h',
                      colorA: 0xFF6E56F7,
                      colorB: 0xFF9B8CFF,
                      body: 'Great read on calm software — bookmarking this one.',
                      onPost: onPost,
                      preview: _LargeUnfurl(
                        domain: 'linear.app',
                        title: 'The quiet power of a fast, focused tool',
                        desc:
                            'How constraint and speed compound into software '
                            'people actually enjoy opening every day.',
                        colorA: 0xFF6E56F7,
                        colorB: 0xFF9B8CFF,
                        icon: Icons.bolt,
                        onTap: () => onLink?.call('linear.app'),
                      ),
                    ),
                    _PostShell(
                      id: 'l2',
                      name: 'Dev Kapoor',
                      handle: 'devk',
                      time: '5h',
                      colorA: 0xFF34D399,
                      colorB: 0xFF6E56F7,
                      body: 'Handy spec on payment flows if you\'re building one.',
                      onPost: onPost,
                      preview: _CompactUnfurl(
                        domain: 'stripe.com',
                        title:
                            'Designing checkout that converts without cutting '
                            'corners',
                        colorA: 0xFF34D399,
                        colorB: 0xFF6E56F7,
                        icon: Icons.credit_card,
                        onTap: () => onLink?.call('stripe.com'),
                      ),
                    ),
                    _PostShell(
                      id: 'l3',
                      name: 'Lena Ortiz',
                      handle: 'lenaux',
                      time: '1d',
                      colorA: 0xFFF4476B,
                      colorB: 0xFFFBBF24,
                      body: 'Loved this piece on design tokens at scale.',
                      onPost: onPost,
                      preview: _LargeUnfurl(
                        domain: 'figma.com',
                        title: 'Tokens, themes, and the end of the redline',
                        desc:
                            'A practical look at keeping design and code in sync '
                            'when both move fast.',
                        colorA: 0xFFF4476B,
                        colorB: 0xFFFBBF24,
                        icon: Icons.hexagon_outlined,
                        meta: 'Article · 6 min read',
                        onTap: () => onLink?.call('figma.com'),
                      ),
                    ),
                    const SizedBox(height: 24),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _TopBar extends StatelessWidget {
  const _TopBar({this.onBack});
  final VoidCallback? onBack;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 56,
      padding: const EdgeInsets.only(left: 4, right: 20),
      decoration: const BoxDecoration(
        border: Border(
          bottom: BorderSide(color: SocialFeedLinkPreviewScreen._hairline),
        ),
      ),
      child: Row(
        children: <Widget>[
          IconButton(
            onPressed: onBack,
            icon: const Icon(Icons.arrow_back_ios_new,
                size: 18, color: SocialFeedLinkPreviewScreen._textHi),
          ),
          const Text(
            'Link posts',
            style: TextStyle(
              fontFamily: SocialFeedLinkPreviewScreen._font,
              fontSize: 18,
              fontWeight: FontWeight.w700,
              letterSpacing: -0.4,
              color: SocialFeedLinkPreviewScreen._textHi,
            ),
          ),
        ],
      ),
    );
  }
}

class _PostShell extends StatelessWidget {
  const _PostShell({
    required this.id,
    required this.name,
    required this.handle,
    required this.time,
    required this.colorA,
    required this.colorB,
    required this.body,
    required this.preview,
    this.onPost,
  });
  final String id;
  final String name;
  final String handle;
  final String time;
  final int colorA;
  final int colorB;
  final String body;
  final Widget preview;
  final ValueChanged<String>? onPost;

  String get _initials {
    final List<String> p = name.trim().split(RegExp(r'\s+'));
    if (p.length == 1) return p.first.characters.first.toUpperCase();
    return (p.first[0] + p.last[0]).toUpperCase();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => onPost?.call(id),
      behavior: HitTestBehavior.opaque,
      child: Container(
        padding: const EdgeInsets.fromLTRB(16, 16, 12, 12),
        decoration: const BoxDecoration(
          border: Border(
            bottom: BorderSide(color: SocialFeedLinkPreviewScreen._hairline),
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Row(
              children: <Widget>[
                _Monogram(
                  initials: _initials,
                  colorA: Color(colorA),
                  colorB: Color(colorB),
                ),
                const SizedBox(width: 12),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Flexible(
                            child: Text(
                              name,
                              overflow: TextOverflow.ellipsis,
                              style: const TextStyle(
                                fontFamily: SocialFeedLinkPreviewScreen._font,
                                fontSize: 15,
                                fontWeight: FontWeight.w700,
                                color: SocialFeedLinkPreviewScreen._textHi,
                              ),
                            ),
                          ),
                          const SizedBox(width: 6),
                          const Icon(Icons.verified,
                              size: 15,
                              color: SocialFeedLinkPreviewScreen._brand),
                        ],
                      ),
                      Text(
                        '@$handle · $time',
                        style: const TextStyle(
                          fontFamily: SocialFeedLinkPreviewScreen._font,
                          fontSize: 12.5,
                          color: SocialFeedLinkPreviewScreen._muted,
                        ),
                      ),
                    ],
                  ),
                ),
                const Icon(Icons.more_horiz,
                    color: SocialFeedLinkPreviewScreen._muted, size: 22),
                const SizedBox(width: 6),
              ],
            ),
            const SizedBox(height: 10),
            Text(
              body,
              style: const TextStyle(
                fontFamily: SocialFeedLinkPreviewScreen._font,
                fontSize: 14.5,
                height: 1.5,
                color: Color(0xFFDDDDE6),
              ),
            ),
            const SizedBox(height: 12),
            preview,
            const SizedBox(height: 8),
            const _ActionBar(),
          ],
        ),
      ),
    );
  }
}

class _LargeUnfurl extends StatelessWidget {
  const _LargeUnfurl({
    required this.domain,
    required this.title,
    required this.desc,
    required this.colorA,
    required this.colorB,
    required this.icon,
    this.meta,
    this.onTap,
  });
  final String domain;
  final String title;
  final String desc;
  final int colorA;
  final int colorB;
  final IconData icon;
  final String? meta;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        clipBehavior: Clip.antiAlias,
        decoration: BoxDecoration(
          color: SocialFeedLinkPreviewScreen._surface,
          borderRadius: BorderRadius.circular(14),
          border: Border.all(color: SocialFeedLinkPreviewScreen._hairline),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            AspectRatio(
              aspectRatio: 16 / 8.4,
              child: CustomPaint(
                painter: _BannerPainter(Color(colorA), Color(colorB), icon),
                child: const SizedBox.expand(),
              ),
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(14, 12, 14, 14),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  _DomainRow(domain: domain, colorA: colorA, colorB: colorB),
                  const SizedBox(height: 8),
                  Text(
                    title,
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    style: const TextStyle(
                      fontFamily: SocialFeedLinkPreviewScreen._font,
                      fontSize: 15.5,
                      fontWeight: FontWeight.w700,
                      height: 1.3,
                      letterSpacing: -0.2,
                      color: SocialFeedLinkPreviewScreen._textHi,
                    ),
                  ),
                  const SizedBox(height: 5),
                  Text(
                    desc,
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    style: const TextStyle(
                      fontFamily: SocialFeedLinkPreviewScreen._font,
                      fontSize: 13,
                      height: 1.45,
                      color: Color(0xFFB5B5C2),
                    ),
                  ),
                  if (meta != null) ...<Widget>[
                    const SizedBox(height: 10),
                    _MetaChip(label: meta!),
                  ],
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _CompactUnfurl extends StatelessWidget {
  const _CompactUnfurl({
    required this.domain,
    required this.title,
    required this.colorA,
    required this.colorB,
    required this.icon,
    this.onTap,
  });
  final String domain;
  final String title;
  final int colorA;
  final int colorB;
  final IconData icon;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        clipBehavior: Clip.antiAlias,
        decoration: BoxDecoration(
          color: SocialFeedLinkPreviewScreen._surface,
          borderRadius: BorderRadius.circular(12),
          border: Border.all(color: SocialFeedLinkPreviewScreen._hairline),
        ),
        child: Row(
          children: <Widget>[
            SizedBox(
              width: 78,
              height: 78,
              child: CustomPaint(
                painter: _BannerPainter(Color(colorA), Color(colorB), icon),
              ),
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.fromLTRB(12, 10, 10, 10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    _DomainRow(domain: domain, colorA: colorA, colorB: colorB),
                    const SizedBox(height: 6),
                    Text(
                      title,
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      style: const TextStyle(
                        fontFamily: SocialFeedLinkPreviewScreen._font,
                        fontSize: 14,
                        fontWeight: FontWeight.w600,
                        height: 1.3,
                        color: SocialFeedLinkPreviewScreen._textHi,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            const Padding(
              padding: EdgeInsets.only(right: 12),
              child: Icon(Icons.open_in_new,
                  size: 16, color: SocialFeedLinkPreviewScreen._muted),
            ),
          ],
        ),
      ),
    );
  }
}

class _DomainRow extends StatelessWidget {
  const _DomainRow({
    required this.domain,
    required this.colorA,
    required this.colorB,
  });
  final String domain;
  final int colorA;
  final int colorB;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Container(
          width: 15,
          height: 15,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(4),
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: <Color>[Color(colorA), Color(colorB)],
            ),
          ),
        ),
        const SizedBox(width: 7),
        Flexible(
          child: Text(
            domain.toUpperCase(),
            overflow: TextOverflow.ellipsis,
            style: const TextStyle(
              fontFamily: SocialFeedLinkPreviewScreen._font,
              fontSize: 11,
              fontWeight: FontWeight.w600,
              letterSpacing: 0.6,
              color: SocialFeedLinkPreviewScreen._muted,
            ),
          ),
        ),
      ],
    );
  }
}

class _MetaChip extends StatelessWidget {
  const _MetaChip({required this.label});
  final String label;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
      decoration: BoxDecoration(
        color: SocialFeedLinkPreviewScreen._brand.withValues(alpha: 0.14),
        borderRadius: BorderRadius.circular(20),
      ),
      child: Text(
        label,
        style: const TextStyle(
          fontFamily: SocialFeedLinkPreviewScreen._font,
          fontSize: 11.5,
          fontWeight: FontWeight.w700,
          color: SocialFeedLinkPreviewScreen._brand,
        ),
      ),
    );
  }
}

class _ActionBar extends StatelessWidget {
  const _ActionBar();

  @override
  Widget build(BuildContext context) {
    return const Row(
      children: <Widget>[
        _Action(icon: Icons.favorite_border, label: '146'),
        SizedBox(width: 18),
        _Action(icon: Icons.chat_bubble_outline, label: '22'),
        SizedBox(width: 18),
        _Action(icon: Icons.share_outlined, label: 'Share'),
        Spacer(),
        Icon(Icons.bookmark_border,
            size: 21, color: SocialFeedLinkPreviewScreen._muted),
        SizedBox(width: 8),
      ],
    );
  }
}

class _Action extends StatelessWidget {
  const _Action({required this.icon, required this.label});
  final IconData icon;
  final String label;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Icon(icon, size: 20, color: SocialFeedLinkPreviewScreen._muted),
        const SizedBox(width: 6),
        Text(
          label,
          style: const TextStyle(
            fontFamily: SocialFeedLinkPreviewScreen._font,
            fontSize: 13,
            fontWeight: FontWeight.w500,
            color: SocialFeedLinkPreviewScreen._muted,
          ),
        ),
      ],
    );
  }
}

class _Monogram extends StatelessWidget {
  const _Monogram({
    required this.initials,
    required this.colorA,
    required this.colorB,
  });
  final String initials;
  final Color colorA;
  final Color colorB;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 42,
      height: 42,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: <Color>[colorA, colorB],
        ),
      ),
      child: Center(
        child: Text(
          initials,
          style: const TextStyle(
            fontFamily: SocialFeedLinkPreviewScreen._font,
            fontSize: 15,
            fontWeight: FontWeight.w700,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

class _BannerPainter extends CustomPainter {
  _BannerPainter(this.colorA, this.colorB, this.icon);
  final Color colorA;
  final Color colorB;
  final IconData icon;

  @override
  void paint(Canvas canvas, Size size) {
    final Rect rect = Offset.zero & size;
    canvas.drawRect(
      rect,
      Paint()
        ..shader = LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: <Color>[
            colorA.withValues(alpha: 0.9),
            colorB.withValues(alpha: 0.7),
          ],
        ).createShader(rect),
    );
    final Paint streak = Paint()
      ..color = Colors.white.withValues(alpha: 0.06)
      ..style = PaintingStyle.stroke
      ..strokeWidth = size.width * 0.10;
    for (int i = -1; i < 5; i++) {
      final double x = size.width * (0.2 * i);
      canvas.drawLine(Offset(x, size.height), Offset(x + size.height, 0), streak);
    }
    // Painted glyph badge centered.
    final TextPainter tp = TextPainter(
      text: TextSpan(
        text: String.fromCharCode(icon.codePoint),
        style: TextStyle(
          fontSize: size.shortestSide * 0.42,
          fontFamily: icon.fontFamily,
          package: icon.fontPackage,
          color: Colors.white.withValues(alpha: 0.9),
        ),
      ),
      textDirection: TextDirection.ltr,
    )..layout();
    tp.paint(
      canvas,
      Offset(
        (size.width - tp.width) / 2,
        (size.height - tp.height) / 2,
      ),
    );
  }

  @override
  bool shouldRepaint(covariant _BannerPainter old) =>
      old.colorA != colorA || old.colorB != colorB || old.icon != icon;
}