How to Build a Social App Splash Screen in Flutter (Full Code + Preview)

import 'package:flutter/material.dart';

/// Splash — branded launch screen for **Pulse**, a premium social + messaging
/// UI kit (Linear / Superhuman aesthetic: sleek, near-mono dark with one
/// electric indigo accent). Self-contained per CONVENTIONS.md: pure Flutter,
/// the exact design font (Inter) is bundled under `fonts/`, and the screen
/// forces its own dark theme so it renders standalone when pushed as a route.
/// The brandmark (a painted pulse wave) and the ring loader are fully painted —
/// no raster logo.
class SocialOnboardingSplashScreen extends StatefulWidget {
  const SocialOnboardingSplashScreen({super.key, this.onContinue});

  /// Optional tap / auto-advance callback used by the gallery to chain the flow.
  final VoidCallback? onContinue;

  static const String _font = 'Inter';

  // ── Pulse token palette (inline, shared across social screens) ──
  static const Color _bg = Color(0xFF0B0B0F);
  static const Color _brand = Color(0xFF6E56F7);
  static const Color _accent = Color(0xFF9B8CFF);
  static const Color _textHi = Color(0xFFF4F4F7);
  static const Color _muted = Color(0xFF8A8A99);

  @override
  State<SocialOnboardingSplashScreen> createState() =>
      _SocialOnboardingSplashScreenState();
}

class _SocialOnboardingSplashScreenState
    extends State<SocialOnboardingSplashScreen>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1500),
    )..repeat();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData.dark(useMaterial3: true),
      child: Scaffold(
        backgroundColor: SocialOnboardingSplashScreen._bg,
        body: GestureDetector(
          onTap: widget.onContinue,
          behavior: HitTestBehavior.opaque,
          child: SafeArea(
            child: SizedBox.expand(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  const Spacer(),
                  const _PulseMark(size: 96),
                  const SizedBox(height: 28),
                  const Text(
                    'Pulse',
                    style: TextStyle(
                      fontFamily: SocialOnboardingSplashScreen._font,
                      fontSize: 36,
                      fontWeight: FontWeight.w700,
                      letterSpacing: -0.8,
                      color: SocialOnboardingSplashScreen._textHi,
                    ),
                  ),
                  const SizedBox(height: 10),
                  const Text(
                    'Where conversations move.',
                    style: TextStyle(
                      fontFamily: SocialOnboardingSplashScreen._font,
                      fontSize: 14,
                      fontWeight: FontWeight.w500,
                      letterSpacing: 0.1,
                      color: SocialOnboardingSplashScreen._muted,
                    ),
                  ),
                  const Spacer(),
                  SizedBox(
                    width: 30,
                    height: 30,
                    child: AnimatedBuilder(
                      animation: _controller,
                      builder: (BuildContext context, Widget? child) {
                        return CustomPaint(
                          painter: _RingLoaderPainter(progress: _controller.value),
                        );
                      },
                    ),
                  ),
                  const SizedBox(height: 48),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

/// The Pulse brandmark — a brand-gradient rounded square with a painted pulse
/// waveform and a soft electric glow.
class _PulseMark extends StatelessWidget {
  const _PulseMark({required this.size});

  final double size;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size,
      height: size,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(size * 0.3),
        gradient: const LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: <Color>[
            SocialOnboardingSplashScreen._accent,
            SocialOnboardingSplashScreen._brand,
          ],
        ),
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: SocialOnboardingSplashScreen._brand.withValues(alpha: 0.4),
            blurRadius: 36,
            spreadRadius: 2,
          ),
        ],
      ),
      child: CustomPaint(painter: _PulseWavePainter()),
    );
  }
}

/// Paints a centered white pulse/heartbeat waveform inside the brandmark.
class _PulseWavePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final double w = size.width;
    final double h = size.height;
    final Paint paint = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.stroke
      ..strokeWidth = w * 0.075
      ..strokeCap = StrokeCap.round
      ..strokeJoin = StrokeJoin.round;
    final double cy = h * 0.5;
    final Path path = Path()
      ..moveTo(w * 0.16, cy)
      ..lineTo(w * 0.34, cy)
      ..lineTo(w * 0.44, cy - h * 0.22)
      ..lineTo(w * 0.56, cy + h * 0.26)
      ..lineTo(w * 0.66, cy)
      ..lineTo(w * 0.84, cy);
    canvas.drawPath(path, paint);
  }

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

/// A sweeping accent arc over a dim track — the splash ring loader.
class _RingLoaderPainter extends CustomPainter {
  const _RingLoaderPainter({required this.progress});

  final double progress;

  @override
  void paint(Canvas canvas, Size size) {
    final Offset center = size.center(Offset.zero);
    final double radius = size.width / 2 - 2;
    canvas.drawCircle(
      center,
      radius,
      Paint()
        ..style = PaintingStyle.stroke
        ..strokeWidth = 3
        ..color = const Color(0xFF26262F),
    );
    final Rect arc = Rect.fromCircle(center: center, radius: radius);
    final double start = progress * 6.2831853;
    canvas.drawArc(
      arc,
      start,
      1.7,
      false,
      Paint()
        ..style = PaintingStyle.stroke
        ..strokeWidth = 3
        ..strokeCap = StrokeCap.round
        ..shader = const SweepGradient(
          colors: <Color>[
            Color(0x006E56F7),
            SocialOnboardingSplashScreen._accent,
          ],
        ).createShader(arc),
    );
  }

  @override
  bool shouldRepaint(covariant _RingLoaderPainter oldDelegate) =>
      oldDelegate.progress != progress;
}