How to Build an Order Processing Interstitial in Flutter (Full Code + Preview)

import 'dart:async';
import 'dart:math' as math;

import 'package:flutter/material.dart';

/// StyleCart — Processing.
///
/// The interstitial after Place Order: an animated painted progress ring, a
/// "Confirming your order…" headline, a short checklist of the steps being
/// run, and a reassuring "don't close this screen" note with a safe cancel.
///
/// Self-contained per CONVENTIONS.md: pure Flutter, bundled Manrope, inline
/// Airbnb-style tokens, own light theme + SafeArea. The ring is a CustomPainter
/// (no emoji glyph, no network). Exposes callbacks only.
class EcomCheckoutProcessingScreen extends StatefulWidget {
  const EcomCheckoutProcessingScreen({
    super.key,
    this.onCancel,
    this.onComplete,
  });

  final VoidCallback? onCancel;

  /// Fired once the (simulated) order confirmation finishes — the host wires
  /// this to the Order Placed screen.
  final VoidCallback? onComplete;

  @override
  State<EcomCheckoutProcessingScreen> createState() =>
      _EcomCheckoutProcessingScreenState();
}

class _EcomCheckoutProcessingScreenState
    extends State<EcomCheckoutProcessingScreen>
    with SingleTickerProviderStateMixin {
  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 _success = Color(0xFF2E9E5B);

  late final AnimationController _c;
  Timer? _advance;

  static const List<_Step> _steps = <_Step>[
    _Step('Validating payment', true),
    _Step('Reserving your items', true),
    _Step('Confirming with the warehouse', false),
  ];

  @override
  void initState() {
    super.initState();
    _c = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    )..repeat();
    // Simulate the confirmation completing, then hand off to Order Placed.
    _advance = Timer(const Duration(milliseconds: 2800), () {
      if (mounted) widget.onComplete?.call();
    });
  }

  @override
  void dispose() {
    _advance?.cancel();
    _c.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData.light(useMaterial3: true),
      child: Scaffold(
        backgroundColor: _canvas,
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 28),
            child: Column(
              children: <Widget>[
                const Spacer(),
                SizedBox(
                  width: 120,
                  height: 120,
                  child: AnimatedBuilder(
                    animation: _c,
                    builder: (BuildContext context, Widget? child) {
                      return CustomPaint(
                        painter: _ProgressRingPainter(_c.value),
                      );
                    },
                  ),
                ),
                const SizedBox(height: 32),
                const Text(
                  'Confirming your order…',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontFamily: _font,
                    fontSize: 21,
                    fontWeight: FontWeight.w800,
                    letterSpacing: -0.3,
                    color: _ink,
                  ),
                ),
                const SizedBox(height: 8),
                const Text(
                  'This usually takes a few seconds. Please keep this '
                  'screen open.',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontFamily: _font,
                    fontSize: 14.5,
                    fontWeight: FontWeight.w500,
                    height: 1.5,
                    color: _muted,
                  ),
                ),
                const SizedBox(height: 36),
                Container(
                  padding: const EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: const Color(0xFFF2F2F2),
                    borderRadius: BorderRadius.circular(16),
                  ),
                  child: Column(
                    children: <Widget>[
                      for (int i = 0; i < _steps.length; i++) ...<Widget>[
                        if (i > 0) const SizedBox(height: 14),
                        _stepRow(_steps[i]),
                      ],
                    ],
                  ),
                ),
                const Spacer(),
                TextButton(
                  onPressed: widget.onCancel,
                  child: const Text(
                    'Cancel — you won’t be charged',
                    style: TextStyle(
                      fontFamily: _font,
                      fontSize: 13.5,
                      fontWeight: FontWeight.w600,
                      color: _muted,
                    ),
                  ),
                ),
                const SizedBox(height: 8),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _stepRow(_Step s) {
    return Row(
      children: <Widget>[
        Container(
          width: 24,
          height: 24,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: s.done ? _success : _canvas,
            border: s.done
                ? null
                : Border.all(color: _faint, width: 2),
          ),
          child: s.done
              ? const Icon(Icons.check_rounded, size: 15, color: _canvas)
              : Center(
                  child: SizedBox(
                    width: 11,
                    height: 11,
                    child: CircularProgressIndicator(
                      strokeWidth: 2,
                      valueColor:
                          const AlwaysStoppedAnimation<Color>(_brand),
                    ),
                  ),
                ),
        ),
        const SizedBox(width: 12),
        Text(
          s.label,
          style: TextStyle(
            fontFamily: _font,
            fontSize: 14,
            fontWeight: s.done ? FontWeight.w600 : FontWeight.w700,
            color: s.done ? _muted : _ink,
          ),
        ),
      ],
    );
  }
}

class _Step {
  const _Step(this.label, this.done);
  final String label;
  final bool done;
}

/// Paints a progress ring: a faint track, a sweeping brand arc whose start
/// rotates with [t] (0..1), and a leading dot — a determinate-looking spinner.
class _ProgressRingPainter extends CustomPainter {
  _ProgressRingPainter(this.t);
  final double t;

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

    // Track.
    canvas.drawCircle(
      c,
      r,
      Paint()
        ..style = PaintingStyle.stroke
        ..strokeWidth = 7
        ..color = const Color(0xFFEFE3E6),
    );

    // Sweeping arc (~270°) starting at the rotating angle.
    final double start = t * 6.28318;
    const double sweep = 4.71; // 270°
    canvas.drawArc(
      Rect.fromCircle(center: c, radius: r),
      start,
      sweep,
      false,
      Paint()
        ..style = PaintingStyle.stroke
        ..strokeWidth = 7
        ..strokeCap = StrokeCap.round
        ..shader = const SweepGradient(
          colors: <Color>[Color(0xFFFF7AA0), Color(0xFFFF385C)],
        ).createShader(Rect.fromCircle(center: c, radius: r)),
    );

    // Leading dot.
    final double end = start + sweep;
    final Offset dot =
        Offset(c.dx + r * math.cos(end), c.dy + r * math.sin(end));
    canvas.drawCircle(dot, 5.5, Paint()..color = const Color(0xFFFF385C));

    // Brand bag glyph in the centre.
    final double bw = size.width * 0.20;
    final Rect bag = Rect.fromCenter(
        center: c, width: bw, height: bw * 1.06);
    final RRect bagR = RRect.fromRectAndCorners(
      bag,
      topLeft: const Radius.circular(3),
      topRight: const Radius.circular(3),
      bottomLeft: const Radius.circular(7),
      bottomRight: const Radius.circular(7),
    );
    canvas.drawRRect(
      bagR,
      Paint()
        ..style = PaintingStyle.stroke
        ..strokeWidth = 2.4
        ..color = const Color(0xFF222222),
    );
    final Path handle = Path()
      ..moveTo(c.dx - bw * 0.22, bag.top + 1)
      ..cubicTo(c.dx - bw * 0.22, bag.top - bw * 0.45,
          c.dx + bw * 0.22, bag.top - bw * 0.45, c.dx + bw * 0.22, bag.top + 1);
    canvas.drawPath(
      handle,
      Paint()
        ..style = PaintingStyle.stroke
        ..strokeWidth = 2.4
        ..strokeCap = StrokeCap.round
        ..color = const Color(0xFF222222),
    );
  }

  @override
  bool shouldRepaint(_ProgressRingPainter old) => old.t != t;
}