How to Build a Web3 Wallet Welcome Screen in Flutter (Full Code + Preview)

import 'dart:math' as math;

import 'package:flutter/material.dart';

/// Web3 onboarding — Welcome. Full-bleed painted gradient hero with a hexagon
/// logo monogram and two entry CTAs (create vs import). Self-contained per
/// CONVENTIONS.md: pure Flutter, bundled Inter font, all graphics custom-painted
/// (no network image), forced dark theme so it renders standalone as a route.
class Web3OnboardingWelcomeScreen extends StatelessWidget {
  const Web3OnboardingWelcomeScreen({
    super.key,
    this.onCreateWallet,
    this.onImportWallet,
    this.onTerms,
  });

  final VoidCallback? onCreateWallet;
  final VoidCallback? onImportWallet;
  final VoidCallback? onTerms;

  static const String _font = 'Inter';
  static const Color _bg = Color(0xFF0B0E11);
  static const Color _surfaceAlt = Color(0xFF1E2329);
  static const Color _brand = Color(0xFFF0B90B);
  static const Color _text = Color(0xFFEAECEF);
  static const Color _muted = Color(0xFF848E9C);

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData.dark(useMaterial3: true),
      child: Scaffold(
        backgroundColor: _bg,
        body: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            const Positioned.fill(
              child: CustomPaint(painter: _HeroGradientPainter()),
            ),
            SafeArea(
              child: Padding(
                padding: const EdgeInsets.fromLTRB(24, 8, 24, 24),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    const Expanded(child: Center(child: _LogoMark())),
                    const Text(
                      'Aurum',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontFamily: _font,
                        fontSize: 34,
                        fontWeight: FontWeight.w700,
                        letterSpacing: -0.5,
                        color: _text,
                      ),
                    ),
                    const SizedBox(height: 12),
                    const Text(
                      'Your self-custody wallet for crypto,\nNFTs and web3 — all in one place.',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontFamily: _font,
                        fontSize: 15,
                        fontWeight: FontWeight.w400,
                        height: 1.45,
                        color: _muted,
                      ),
                    ),
                    const SizedBox(height: 40),
                    _PrimaryButton(
                      label: 'Create a new wallet',
                      onTap: onCreateWallet,
                    ),
                    const SizedBox(height: 12),
                    _SecondaryButton(
                      label: 'I already have a wallet',
                      onTap: onImportWallet,
                    ),
                    const SizedBox(height: 20),
                    _TermsLine(onTerms: onTerms),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

/// Hexagon logo with a gold gradient and an inner "A" cut from negative space.
class _LogoMark extends StatelessWidget {
  const _LogoMark();

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 132,
      height: 132,
      child: CustomPaint(painter: _LogoPainter()),
    );
  }
}

class _LogoPainter extends CustomPainter {
  const _LogoPainter();

  Path _hexPath(Offset c, double r) {
    final Path p = Path();
    for (int i = 0; i < 6; i++) {
      // Pointy-top hexagon.
      final double a = (-90 + i * 60) * math.pi / 180;
      final double x = c.dx + r * math.cos(a);
      final double y = c.dy + r * math.sin(a);
      if (i == 0) {
        p.moveTo(x, y);
      } else {
        p.lineTo(x, y);
      }
    }
    p.close();
    return p;
  }

  @override
  void paint(Canvas canvas, Size size) {
    final Offset c = Offset(size.width / 2, size.height / 2);
    final double r = size.width / 2;

    // Soft glow behind the mark.
    final Paint glow = Paint()
      ..color = Web3OnboardingWelcomeScreen._brand.withValues(alpha: 0.22)
      ..maskFilter = const MaskFilter.blur(BlurStyle.normal, 26);
    canvas.drawCircle(c, r * 0.86, glow);

    // Hex body — gold gradient.
    final Path hex = _hexPath(c, r);
    final Paint body = Paint()
      ..shader = const LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: <Color>[Color(0xFFF7D14B), Web3OnboardingWelcomeScreen._brand],
      ).createShader(Rect.fromCircle(center: c, radius: r));
    canvas.drawPath(hex, body);

    // Subtle inner hex outline.
    final Paint inner = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.5
      ..color = Colors.white.withValues(alpha: 0.18);
    canvas.drawPath(_hexPath(c, r * 0.74), inner);

    // "A" monogram — two strokes + crossbar, in the near-black bg color.
    final Paint mark = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = size.width * 0.07
      ..strokeCap = StrokeCap.round
      ..strokeJoin = StrokeJoin.round
      ..color = Web3OnboardingWelcomeScreen._bg;
    final double aw = size.width * 0.30;
    final double top = c.dy - size.height * 0.20;
    final double bot = c.dy + size.height * 0.20;
    final Path a = Path()
      ..moveTo(c.dx - aw, bot)
      ..lineTo(c.dx, top)
      ..lineTo(c.dx + aw, bot);
    canvas.drawPath(a, mark);
    canvas.drawLine(
      Offset(c.dx - aw * 0.52, c.dy + size.height * 0.04),
      Offset(c.dx + aw * 0.52, c.dy + size.height * 0.04),
      mark,
    );
  }

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

/// Full-bleed dark gradient with two soft gold/teal orbs and a faint hex grid.
class _HeroGradientPainter extends CustomPainter {
  const _HeroGradientPainter();

  @override
  void paint(Canvas canvas, Size size) {
    final Rect rect = Offset.zero & size;
    final Paint base = Paint()
      ..shader = const LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: <Color>[Color(0xFF12161B), Web3OnboardingWelcomeScreen._bg],
      ).createShader(rect);
    canvas.drawRect(rect, base);

    void orb(Offset center, double radius, Color color) {
      final Paint p = Paint()
        ..shader = RadialGradient(
          colors: <Color>[color, color.withValues(alpha: 0)],
        ).createShader(Rect.fromCircle(center: center, radius: radius));
      canvas.drawCircle(center, radius, p);
    }

    orb(Offset(size.width * 0.82, size.height * 0.14), size.width * 0.55,
        Web3OnboardingWelcomeScreen._brand.withValues(alpha: 0.14));
    orb(Offset(size.width * 0.08, size.height * 0.40), size.width * 0.5,
        const Color(0xFF2EBD85).withValues(alpha: 0.08));
  }

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

class _PrimaryButton extends StatelessWidget {
  const _PrimaryButton({required this.label, required this.onTap});

  final String label;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 54,
      child: Material(
        color: Web3OnboardingWelcomeScreen._brand,
        borderRadius: BorderRadius.circular(14),
        child: InkWell(
          borderRadius: BorderRadius.circular(14),
          onTap: onTap,
          child: Center(
            child: Text(
              label,
              style: const TextStyle(
                fontFamily: Web3OnboardingWelcomeScreen._font,
                fontSize: 16,
                fontWeight: FontWeight.w600,
                color: Color(0xFF0B0E11),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class _SecondaryButton extends StatelessWidget {
  const _SecondaryButton({required this.label, required this.onTap});

  final String label;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 54,
      child: Material(
        color: Web3OnboardingWelcomeScreen._surfaceAlt,
        borderRadius: BorderRadius.circular(14),
        child: InkWell(
          borderRadius: BorderRadius.circular(14),
          onTap: onTap,
          child: Center(
            child: Text(
              label,
              style: const TextStyle(
                fontFamily: Web3OnboardingWelcomeScreen._font,
                fontSize: 16,
                fontWeight: FontWeight.w600,
                color: Web3OnboardingWelcomeScreen._text,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class _TermsLine extends StatelessWidget {
  const _TermsLine({required this.onTerms});

  final VoidCallback? onTerms;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTerms,
      behavior: HitTestBehavior.opaque,
      child: RichText(
        textAlign: TextAlign.center,
        text: const TextSpan(
          style: TextStyle(
            fontFamily: Web3OnboardingWelcomeScreen._font,
            fontSize: 12.5,
            height: 1.4,
            color: Web3OnboardingWelcomeScreen._muted,
          ),
          children: <TextSpan>[
            TextSpan(text: 'By continuing you agree to our '),
            TextSpan(
              text: 'Terms',
              style: TextStyle(
                color: Web3OnboardingWelcomeScreen._text,
                fontWeight: FontWeight.w600,
              ),
            ),
            TextSpan(text: ' & '),
            TextSpan(
              text: 'Privacy Policy',
              style: TextStyle(
                color: Web3OnboardingWelcomeScreen._text,
                fontWeight: FontWeight.w600,
              ),
            ),
          ],
        ),
      ),
    );
  }
}