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

import 'package:flutter/material.dart';

/// Splash — branded launch screen for **Cineo**, a premium cinematic streaming
/// app (Netflix / Disney+ / HBO Max mold). 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 wordmark and play mark are fully painted (no raster logo).
class StreamOnboardingSplashScreen extends StatefulWidget {
  const StreamOnboardingSplashScreen({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';

  // ── Cineo cinematic token palette (inline, shared across streaming screens) ──
  static const Color _bg = Color(0xFF0B0B0F);
  static const Color _brand = Color(0xFFE50914);
  static const Color _brandDark = Color(0xFFB00610);
  static const Color _text = Color(0xFFFFFFFF);
  static const Color _muted = Color(0xFF6B6B76);

  @override
  State<StreamOnboardingSplashScreen> createState() =>
      _StreamOnboardingSplashScreenState();
}

class _StreamOnboardingSplashScreenState
    extends State<StreamOnboardingSplashScreen>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller;

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

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

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData.dark(useMaterial3: true),
      child: Scaffold(
        backgroundColor: StreamOnboardingSplashScreen._bg,
        body: GestureDetector(
          onTap: widget.onContinue,
          behavior: HitTestBehavior.opaque,
          child: SafeArea(
            child: SizedBox.expand(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  const Spacer(),
                  const _CineoMark(size: 92),
                  const SizedBox(height: 26),
                  const Text(
                    'CINEO',
                    style: TextStyle(
                      fontFamily: StreamOnboardingSplashScreen._font,
                      fontSize: 34,
                      fontWeight: FontWeight.w800,
                      letterSpacing: 8,
                      color: StreamOnboardingSplashScreen._text,
                    ),
                  ),
                  const SizedBox(height: 10),
                  const Text(
                    'Movies & TV, unlimited',
                    style: TextStyle(
                      fontFamily: StreamOnboardingSplashScreen._font,
                      fontSize: 13.5,
                      fontWeight: FontWeight.w500,
                      letterSpacing: 0.4,
                      color: StreamOnboardingSplashScreen._muted,
                    ),
                  ),
                  const Spacer(),

                  const Spacer(),
                  // Brand-red shimmer loading bar.
                  SizedBox(
                    width: 132,
                    height: 3,
                    child: AnimatedBuilder(
                      animation: _controller,
                      builder: (BuildContext context, Widget? child) {
                        return CustomPaint(
                          painter: _ShimmerBarPainter(progress: _controller.value),
                        );
                      },
                    ),
                  ),
                  const SizedBox(height: 44),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

/// The Cineo brandmark — a brand-gradient rounded square with a painted play
/// triangle punched out of a soft cinematic glow.
class _CineoMark extends StatelessWidget {
  const _CineoMark({required this.size});

  final double size;

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

/// Paints a rounded white play triangle centered in the brandmark.
class _PlayMarkPainter 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.fill
      ..strokeJoin = StrokeJoin.round
      ..strokeCap = StrokeCap.round
      ..strokeWidth = w * 0.12;
    final double cx = w * 0.54;
    final double cy = h * 0.5;
    final double r = w * 0.2;
    final Path tri = Path()
      ..moveTo(cx - r * 0.86, cy - r)
      ..lineTo(cx + r, cy)
      ..lineTo(cx - r * 0.86, cy + r)
      ..close();
    canvas.drawPath(
      tri,
      paint
        ..style = PaintingStyle.stroke,
    );
    canvas.drawPath(tri, paint..style = PaintingStyle.fill);
  }

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

/// A brand-red gradient sweep that travels along a dim track — the splash
/// loading shimmer.
class _ShimmerBarPainter extends CustomPainter {
  const _ShimmerBarPainter({required this.progress});

  final double progress;

  @override
  void paint(Canvas canvas, Size size) {
    final RRect track = RRect.fromRectAndRadius(
      Offset.zero & size,
      Radius.circular(size.height / 2),
    );
    canvas.drawRRect(
      track,
      Paint()..color = const Color(0xFF2A2A33),
    );
    // Moving highlight window.
    final double windowW = size.width * 0.42;
    final double travel = (size.width + windowW) * progress - windowW;
    final Rect glow = Rect.fromLTWH(travel, 0, windowW, size.height);
    canvas.save();
    canvas.clipRRect(track);
    canvas.drawRect(
      glow,
      Paint()
        ..shader = const LinearGradient(
          colors: <Color>[
            Color(0x00E50914),
            StreamOnboardingSplashScreen._brand,
            Color(0x00E50914),
          ],
        ).createShader(glow),
    );
    canvas.restore();
  }

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