[Windows][Impeller] BackdropFilter blur has significantly higher raster cost than Skia and bounded blur loses most grouping benefit #191207

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

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter/services.dart';

void main() => runApp(const ReproductionApp());

class ReproductionApp extends StatefulWidget {
  const ReproductionApp({super.key});

  @override
  State<ReproductionApp> createState() => _ReproductionAppState();
}

class _ReproductionAppState extends State<ReproductionApp> {
  bool _showPerformanceOverlay = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      showPerformanceOverlay: _showPerformanceOverlay,
      theme: ThemeData.dark(useMaterial3: true),
      home: ReproductionScreen(
        showPerformanceOverlay: _showPerformanceOverlay,
        onPerformanceOverlayChanged: (bool value) {
          setState(() => _showPerformanceOverlay = value);
        },
      ),
    );
  }
}

enum FilterCase {
  a(
    label: 'A — scroll, ungrouped, unbounded',
    usesScrollView: true,
    grouped: false,
    bounded: false,
  ),
  b(
    label: 'B — scroll, ungrouped, bounded',
    usesScrollView: true,
    grouped: false,
    bounded: true,
  ),
  c(
    label: 'C — scroll, grouped, unbounded',
    usesScrollView: true,
    grouped: true,
    bounded: false,
  ),
  d(
    label: 'D — scroll, grouped, bounded',
    usesScrollView: true,
    grouped: true,
    bounded: true,
  ),
  e(
    label: 'E — translated, ungrouped, unbounded',
    usesScrollView: false,
    grouped: false,
    bounded: false,
  ),
  f(
    label: 'F — translated, ungrouped, bounded',
    usesScrollView: false,
    grouped: false,
    bounded: true,
  ),
  g(
    label: 'G — translated, grouped, unbounded',
    usesScrollView: false,
    grouped: true,
    bounded: false,
  ),
  h(
    label: 'H — translated, grouped, bounded',
    usesScrollView: false,
    grouped: true,
    bounded: true,
  );

  const FilterCase({
    required this.label,
    required this.usesScrollView,
    required this.grouped,
    required this.bounded,
  });

  final String label;
  final bool usesScrollView;
  final bool grouped;
  final bool bounded;
}

class ReproductionScreen extends StatefulWidget {
  const ReproductionScreen({
    super.key,
    required this.showPerformanceOverlay,
    required this.onPerformanceOverlayChanged,
  });

  final bool showPerformanceOverlay;
  final ValueChanged<bool> onPerformanceOverlayChanged;

  @override
  State<ReproductionScreen> createState() => _ReproductionScreenState();
}

class _ReproductionScreenState extends State<ReproductionScreen>
    with TickerProviderStateMixin {
  final ScrollController _scrollController = ScrollController();
  final ValueNotifier<double> _translatedOffset = ValueNotifier<double>(0);
  late final FrameComparisonRunner _runner;

  bool _useBackdropBlur = true;
  bool _useBoundedFilter = false;
  bool _useGroupedFilter = false;
  bool _useScrollView = true;
  bool _running = false;

  String _status = 'Showing A — scroll, ungrouped, unbounded.';
  List<ComparisonResult>? _results;

  @override
  void initState() {
    super.initState();
    _runner = FrameComparisonRunner(
      vsync: this,
      controller: _scrollController,
      translatedOffset: _translatedOffset,
    );
  }

  @override
  void dispose() {
    _runner.dispose();
    _translatedOffset.dispose();
    _scrollController.dispose();
    super.dispose();
  }

  FilterCase get _currentCase {
    for (final FilterCase value in FilterCase.values) {
      if (value.usesScrollView == _useScrollView &&
          value.grouped == _useGroupedFilter &&
          value.bounded == _useBoundedFilter) {
        return value;
      }
    }
    return FilterCase.a;
  }

  void _updateManualStatus() {
    _results = null;
    _status = 'Showing ${_currentCase.label}.';
  }

  Future<void> _runComparison() async {
    if (_running) {
      return;
    }

    if (!_useScrollView) {
      setState(() {
        _useScrollView = true;
        _useGroupedFilter = false;
        _useBoundedFilter = false;
      });
      await SchedulerBinding.instance.endOfFrame;
    }

    if (!_scrollController.hasClients ||
        !_scrollController.position.hasContentDimensions ||
        _scrollController.position.maxScrollExtent <= 0) {
      setState(() => _status = 'The scroll view is not ready. Try again.');
      return;
    }

    setState(() {
      _running = true;
      _useBackdropBlur = true;
      _useBoundedFilter = false;
      _useGroupedFilter = false;
      _useScrollView = true;
      _results = null;
      _status = 'Running A/B/C/D/E/F/G/H comparison.';
    });

    try {
      final List<ComparisonResult> results = await _runner.run(
        view: View.of(context),
        onCaseChanged: (FilterCase value) {
          if (mounted) {
            setState(() {
              _useBackdropBlur = true;
              _useBoundedFilter = value.bounded;
              _useGroupedFilter = value.grouped;
              _useScrollView = value.usesScrollView;
              _status = 'Measuring ${value.label}...';
            });
          }
        },
      );

      if (mounted) {
        setState(() {
          _results = results;
          _status = 'Comparison complete. Results are shown below.';
        });
      }
    } catch (error, stackTrace) {
      debugPrint('Comparison failed: $error\n$stackTrace');
      if (mounted) {
        setState(() => _status = 'Comparison failed: $error');
      }
    } finally {
      _running = false;
      if (mounted) {
        setState(() {});
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return CallbackShortcuts(
      bindings: <ShortcutActivator, VoidCallback>{
        const SingleActivator(LogicalKeyboardKey.f10): _runComparison,
      },
      child: Focus(
        autofocus: true,
        child: Scaffold(
          backgroundColor: const Color(0xff080d18),
          body: Column(
            children: <Widget>[
              SizedBox(height: 188, child: _buildControls()),
              Expanded(
                child: _BackdropBlurScene(
                  controller: _scrollController,
                  translatedOffset: _translatedOffset,
                  useBackdropBlur: _useBackdropBlur,
                  useBoundedFilter: _useBoundedFilter,
                  useGroupedFilter: _useGroupedFilter,
                  useScrollView: _useScrollView,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildControls() {
    return ColoredBox(
      color: const Color(0xff202632),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Row(
              children: <Widget>[
                const Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Bounded BackdropFilter A–H comparison',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      Text(
                        'A–D use SingleChildScrollView; E–H use the same moving scene without a scrollable',
                        style: TextStyle(color: Colors.white60, fontSize: 12),
                      ),
                    ],
                  ),
                ),
                Text(
                  kProfileMode ? 'PROFILE MODE' : 'DEBUG MODE',
                  style: TextStyle(
                    color: kProfileMode
                        ? const Color(0xff65e6a8)
                        : const Color(0xffffad66),
                    fontWeight: FontWeight.bold,
                    fontSize: 12,
                  ),
                ),
                const SizedBox(width: 14),
                const Text('Blur'),
                Switch(
                  value: _useBackdropBlur,
                  onChanged: _running
                      ? null
                      : (bool value) {
                          setState(() => _useBackdropBlur = value);
                        },
                ),
                const Text('Bounded'),
                Switch(
                  value: _useBoundedFilter,
                  onChanged: _running
                      ? null
                      : (bool value) {
                          setState(() {
                            _useBoundedFilter = value;
                            _updateManualStatus();
                          });
                        },
                ),
                const Text('Grouped'),
                Switch(
                  value: _useGroupedFilter,
                  onChanged: _running
                      ? null
                      : (bool value) {
                          setState(() {
                            _useGroupedFilter = value;
                            _updateManualStatus();
                          });
                        },
                ),
                const Text('ScrollView'),
                Switch(
                  value: _useScrollView,
                  onChanged: _running
                      ? null
                      : (bool value) {
                          setState(() {
                            _useScrollView = value;
                            if (value) {
                              _translatedOffset.value = 0;
                            } else if (_scrollController.hasClients) {
                              _scrollController.jumpTo(0);
                            }
                            _updateManualStatus();
                          });
                        },
                ),
                const Text('Overlay'),
                Switch(
                  value: widget.showPerformanceOverlay,
                  onChanged: _running
                      ? null
                      : widget.onPerformanceOverlayChanged,
                ),
                const SizedBox(width: 10),
                FilledButton(
                  onPressed: _running ? null : _runComparison,
                  child: const Text('Run A–H (F10)'),
                ),
              ],
            ),
            const SizedBox(height: 8),
            Text(
              _status,
              style: const TextStyle(color: Color(0xff79e4ff), fontSize: 12),
            ),
            const SizedBox(height: 8),
            Expanded(child: _buildResults()),
          ],
        ),
      ),
    );
  }

  Widget _buildResults() {
    final List<ComparisonResult>? results = _results;
    if (results == null) {
      return Text(
        kProfileMode
            ? 'Leave the performance overlay off for the numeric run. '
                  'The ScrollView switch lets you compare the same scene with '
                  'scrolling machinery present or absent.'
            : 'Relaunch with --profile before collecting reportable results.',
        style: const TextStyle(color: Colors.white54, fontSize: 12),
      );
    }

    return SelectableText(
      <String>[
        'Mode                                     FPS    UI p50/p95       '
            'Raster p50/p95/p99/max                 Over budget',
        ...results.map((ComparisonResult result) => result.displayLine),
      ].join('\n'),
      style: const TextStyle(
        color: Colors.white,
        fontFamily: 'Consolas',
        fontSize: 11,
        height: 1.38,
      ),
    );
  }
}

const int _panelCount = 3;
const int _panelRowCount = 12;
const double _panelTop = 150;
const double _panelRowStride = 320;
const double _panelRowGap = 64;
const double _panelSampleTopOffset = 20;
const double _panelSampleHeight = 270;
const double _panelSceneBottomPadding = 180;
const double _panelSceneHeight =
    _panelTop +
    (_panelRowCount - 1) * _panelRowStride +
    _panelSampleTopOffset +
    _panelSampleHeight +
    _panelSceneBottomPadding;

class _BackdropBlurScene extends StatelessWidget {
  const _BackdropBlurScene({
    required this.controller,
    required this.translatedOffset,
    required this.useBackdropBlur,
    required this.useBoundedFilter,
    required this.useGroupedFilter,
    required this.useScrollView,
  });

  final ScrollController controller;
  final ValueListenable<double> translatedOffset;
  final bool useBackdropBlur;
  final bool useBoundedFilter;
  final bool useGroupedFilter;
  final bool useScrollView;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        final Widget tallScene = SizedBox(
          width: constraints.maxWidth,
          height: _panelSceneHeight,
          child: Stack(
            fit: StackFit.expand,
            children: <Widget>[
              const CustomPaint(painter: _BackdropScenePainter()),
              Align(
                alignment: Alignment.topCenter,
                child: Padding(
                  padding: const EdgeInsets.only(
                    top: _panelTop,
                    left: 24,
                    right: 24,
                  ),
                  child: IgnorePointer(
                    child: Column(
                      children: List<Widget>.generate(
                        _panelRowCount,
                        (int rowIndex) => Padding(
                          padding: EdgeInsets.only(
                            bottom: rowIndex == _panelRowCount - 1
                                ? 0
                                : _panelRowGap,
                          ),
                          child: Wrap(
                            alignment: WrapAlignment.center,
                            spacing: 24,
                            runSpacing: 24,
                            children: List<Widget>.generate(
                              _panelCount,
                              (int index) => _GlassPanel(
                                blurEnabled: useBackdropBlur,
                                bounded: useBoundedFilter,
                                grouped: useGroupedFilter,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        );

        Widget viewport;

        if (useScrollView) {
          viewport = ScrollConfiguration(
            behavior: ScrollConfiguration.of(context)
                .copyWith(scrollbars: false),
            child: SingleChildScrollView(
              controller: controller,
              child: tallScene,
            ),
          );
        } else {
          viewport = ClipRect(
            child: OverflowBox(
              alignment: Alignment.topCenter,
              minWidth: constraints.maxWidth,
              maxWidth: constraints.maxWidth,
              minHeight: _panelSceneHeight,
              maxHeight: _panelSceneHeight,
              child: ValueListenableBuilder<double>(
                valueListenable: translatedOffset,
                child: tallScene,
                builder: (BuildContext context, double offset, Widget? child) {
                  return Transform.translate(
                    offset: Offset(0, -offset),
                    child: child,
                  );
                },
              ),
            ),
          );
        }

        if (useGroupedFilter) {
          viewport = BackdropGroup(child: viewport);
        }

        return viewport;
      },
    );
  }
}

class _GlassPanel extends StatelessWidget {
  const _GlassPanel({
    required this.blurEnabled,
    required this.bounded,
    required this.grouped,
  });

  static const BorderRadius _borderRadius = BorderRadius.all(
    Radius.circular(28),
  );

  final bool blurEnabled;
  final bool bounded;
  final bool grouped;

  @override
  Widget build(BuildContext context) {
    final Widget surface = SizedBox(
      width: 360,
      height: 256,
      child: DecoratedBox(
        decoration: BoxDecoration(
          color: Colors.white.withAlpha(13),
          borderRadius: _borderRadius,
          border: Border.all(color: Colors.white.withAlpha(26), width: 1),
          boxShadow: <BoxShadow>[
            BoxShadow(
              color: Colors.black.withAlpha(61),
              blurRadius: 24,
              spreadRadius: -8,
              offset: const Offset(0, 12),
            ),
          ],
        ),
        child: const Padding(
          padding: EdgeInsets.fromLTRB(24, 22, 24, 20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Row(
                children: <Widget>[
                  DecoratedBox(
                    decoration: BoxDecoration(
                      color: Color(0x3079e4ff),
                      borderRadius: BorderRadius.all(Radius.circular(99)),
                    ),
                    child: Padding(
                      padding: EdgeInsets.symmetric(
                        horizontal: 10,
                        vertical: 5,
                      ),
                      child: Text(
                        'BACKDROP FILTER',
                        style: TextStyle(
                          color: Color(0xff79e4ff),
                          fontSize: 10,
                          fontWeight: FontWeight.bold,
                          letterSpacing: 1.2,
                        ),
                      ),
                    ),
                  ),
                  Spacer(),
                  Text(
                    'sigma 15',
                    style: TextStyle(
                      color: Colors.white70,
                      fontSize: 11,
                      fontFamily: 'Consolas',
                    ),
                  ),
                ],
              ),
              SizedBox(height: 24),
              Text(
                'Frosted panel',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 22,
                  fontWeight: FontWeight.w700,
                ),
              ),
              SizedBox(height: 10),
              Text(
                'Identical content in every benchmark mode.',
                style: TextStyle(
                  color: Colors.white70,
                  fontSize: 13,
                  height: 1.35,
                ),
              ),
              Spacer(),
              Text(
                'ImageFilterConfig.blur(sigmaX: 15, sigmaY: 15)',
                style: TextStyle(
                  color: Color(0xff79e4ff),
                  fontSize: 11,
                  fontFamily: 'Consolas',
                ),
              ),
            ],
          ),
        ),
      ),
    );

    if (!blurEnabled) {
      return surface;
    }

    final ImageFilterConfig config = ImageFilterConfig.blur(
      sigmaX: 15,
      sigmaY: 15,
      bounded: bounded,
    );

    final Widget filtered = grouped
        ? BackdropFilter.grouped(filterConfig: config, child: surface)
        : BackdropFilter(filterConfig: config, child: surface);

    return ClipRRect(
      borderRadius: _borderRadius,
      clipBehavior: Clip.antiAlias,
      child: filtered,
    );
  }
}

class _BackdropScenePainter extends CustomPainter {
  const _BackdropScenePainter();

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawColor(const Color(0xff081121), BlendMode.srcOver);

    final Paint linePaint = Paint()
      ..color = const Color(0x287da2c9)
      ..strokeWidth = 1;

    for (int row = 0; row < 30; row++) {
      final double y = 34 + row * 80;
      canvas.drawLine(Offset(0, y), Offset(size.width, y), linePaint);
    }

    for (int row = 0; row < _panelRowCount; row++) {
      final double sampleTop =
          _panelTop + _panelSampleTopOffset + row * _panelRowStride;
      _paintHighContrastBackdrop(canvas, size, sampleTop);
    }
  }

  void _paintHighContrastBackdrop(Canvas canvas, Size size, double sampleTop) {
    final double sampleWidth = math.min(1400, size.width * 0.92);
    final double sampleLeft = (size.width - sampleWidth) / 2;
    const double sampleHeight = _panelSampleHeight;
    final double firstBlockWidth = sampleWidth * 0.34;
    final double secondBlockWidth = sampleWidth * 0.26;
    final double thirdBlockWidth = sampleWidth * 0.12;

    canvas.drawRRect(
      RRect.fromRectAndRadius(
        Rect.fromLTWH(sampleLeft, sampleTop, firstBlockWidth, sampleHeight),
        const Radius.circular(24),
      ),
      Paint()..color = const Color(0xfff76707),
    );

    canvas.drawRRect(
      RRect.fromRectAndRadius(
        Rect.fromLTWH(
          sampleLeft + firstBlockWidth + 12,
          sampleTop + 28,
          secondBlockWidth,
          sampleHeight - 56,
        ),
        const Radius.circular(20),
      ),
      Paint()..color = const Color(0xff7048e8),
    );

    canvas.drawRRect(
      RRect.fromRectAndRadius(
        Rect.fromLTWH(
          sampleLeft + sampleWidth * 0.62,
          sampleTop + 18,
          thirdBlockWidth,
          sampleHeight - 36,
        ),
        const Radius.circular(18),
      ),
      Paint()..color = const Color(0xfff06595),
    );

    canvas.drawCircle(
      Offset(sampleLeft + sampleWidth * 0.78, sampleTop + 116),
      94,
      Paint()..color = const Color(0xff12b886),
    );

    for (int index = 0; index < 6; index++) {
      final double x = sampleLeft + 20 + index * sampleWidth / 6;
      canvas.drawLine(
        Offset(x, sampleTop + 12),
        Offset(x + 48, sampleTop + sampleHeight - 12),
        Paint()
          ..color = Colors.white.withAlpha(190)
          ..strokeWidth = 3,
      );
    }
  }

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

/// A–D use a SingleChildScrollView.
/// E–H use the same tall scene and the same 800 px/s motion, but there is no
/// Scrollable/Viewport/ScrollPosition. The scene is translated inside ClipRect.
class FrameComparisonRunner {
  FrameComparisonRunner({
    required TickerProvider vsync,
    required ScrollController controller,
    required ValueNotifier<double> translatedOffset,
  }) : _vsync = vsync,
       _controller = controller,
       _translatedOffset = translatedOffset;

  static const double _movementSpeed = 800;
  static const Duration _unmeasuredMotionDuration = Duration(seconds: 2);
  static const Duration _measurementDuration = Duration(seconds: 4);
  static const Duration _timingDrainDuration = Duration(seconds: 1);
  static const Duration _interPhasePause = Duration(seconds: 1);
  static const double _maximumDeltaSeconds = 1 / 30;

  final TickerProvider _vsync;
  final ScrollController _controller;
  final ValueNotifier<double> _translatedOffset;

  Ticker? _activeTicker;
  bool _running = false;
  bool _disposed = false;
  double? _knownExtent;

  Future<List<ComparisonResult>> run({
    required FlutterView view,
    required ValueChanged<FilterCase> onCaseChanged,
  }) async {
    if (_running || _disposed) {
      return const <ComparisonResult>[];
    }

    _running = true;
    try {
      final List<ComparisonResult> results = <ComparisonResult>[];

      for (final FilterCase filterCase in FilterCase.values) {
        if (results.isNotEmpty) {
          await Future<void>.delayed(_interPhasePause);
        }

        final List<FrameTiming> timings = await _runPhase(
          filterCase: filterCase,
          onCaseChanged: onCaseChanged,
        );

        results.add(
          ComparisonResult.fromTimings(
            label: filterCase.label,
            timings: timings,
            measurementDuration: _measurementDuration,
            refreshRate: view.display.refreshRate,
          ),
        );
      }

      _printResults(results);
      return results;
    } finally {
      _running = false;
    }
  }

  Future<List<FrameTiming>> _runPhase({
    required FilterCase filterCase,
    required ValueChanged<FilterCase> onCaseChanged,
  }) async {
    onCaseChanged(filterCase);
    await SchedulerBinding.instance.endOfFrame;

    final double extent;

    if (filterCase.usesScrollView) {
      if (!_controller.hasClients ||
          !_controller.position.hasContentDimensions) {
        throw StateError('ScrollView is not ready for ${filterCase.name}.');
      }

      extent = _controller.position.maxScrollExtent;
      _knownExtent = extent;
    } else {
      final double? knownExtent = _knownExtent;
      if (knownExtent == null || knownExtent <= 0) {
        throw StateError(
          'No scroll extent has been measured before ${filterCase.name}.',
        );
      }
      extent = knownExtent;
    }

    _setPosition(filterCase, 0);
    await SchedulerBinding.instance.endOfFrame;

    await _drive(
      filterCase: filterCase,
      duration: _unmeasuredMotionDuration,
      extent: extent,
    );

    _setPosition(filterCase, 0);
    await SchedulerBinding.instance.endOfFrame;

    final List<FrameTiming> timings = <FrameTiming>[];
    int? startMicros;
    int? endMicros;
    void collect(List<FrameTiming> batch) => timings.addAll(batch);

    SchedulerBinding.instance.addTimingsCallback(collect);

    final TimelineTask task = TimelineTask()
      ..start(
        'BackdropFilterRepro_${filterCase.name.toUpperCase()}',
        arguments: <String, Object>{
          'case': filterCase.name.toUpperCase(),
          'uses_scroll_view': filterCase.usesScrollView,
          'motion': filterCase.usesScrollView
              ? 'SingleChildScrollView'
              : 'Transform.translate',
          'bounded': filterCase.bounded,
          'grouped': filterCase.grouped,
          'backdrop_group_present': filterCase.grouped,
          'backdrop_filter_grouped_constructor': filterCase.grouped,
          'panels_per_row': _panelCount,
          'panel_row_count': _panelRowCount,
          'panel_count': _panelCount * _panelRowCount,
          'blur_sigma': 15,
          'movement_speed_px_per_second': _movementSpeed,
        },
      );

    try {
      await _drive(
        filterCase: filterCase,
        duration: _measurementDuration,
        extent: extent,
        onFirstFrame: (int value) => startMicros = value,
        onLastFrame: (int value) => endMicros = value,
      );

      await Future<void>.delayed(_timingDrainDuration);
    } finally {
      task.finish();
      SchedulerBinding.instance.removeTimingsCallback(collect);
    }

    return timings.where((FrameTiming timing) {
      final int timestamp = timing.timestampInMicroseconds(
        FramePhase.buildStart,
      );
      return startMicros != null &&
          endMicros != null &&
          timestamp >= startMicros! &&
          timestamp <= endMicros!;
    }).toList()..sort((FrameTiming a, FrameTiming b) {
      return a
          .timestampInMicroseconds(FramePhase.buildStart)
          .compareTo(b.timestampInMicroseconds(FramePhase.buildStart));
    });
  }

  void _setPosition(FilterCase filterCase, double value) {
    if (filterCase.usesScrollView) {
      if (_controller.hasClients) {
        _controller.jumpTo(value);
      }
    } else {
      _translatedOffset.value = value;
    }
  }

  Future<void> _drive({
    required FilterCase filterCase,
    required Duration duration,
    required double extent,
    ValueChanged<int>? onFirstFrame,
    ValueChanged<int>? onLastFrame,
  }) async {
    final Completer<void> done = Completer<void>();
    Duration? previous;
    double direction = 1;
    double position = 0;
    bool started = false;

    late final Ticker ticker;
    ticker = _vsync.createTicker((Duration elapsed) {
      final Duration? last = previous;
      previous = elapsed;
      if (last == null) {
        return;
      }

      final double deltaSeconds = math.min(
        (elapsed - last).inMicroseconds / Duration.microsecondsPerSecond,
        _maximumDeltaSeconds,
      );

      final int frameTimestamp =
          SchedulerBinding.instance.currentSystemFrameTimeStamp.inMicroseconds;

      if (!started) {
        started = true;
        onFirstFrame?.call(frameTimestamp);
      }

      position += _movementSpeed * direction * deltaSeconds;

      if (position >= extent) {
        position = extent;
        direction = -1;
      } else if (position <= 0) {
        position = 0;
        direction = 1;
      }

      _setPosition(filterCase, position);

      if (elapsed >= duration) {
        onLastFrame?.call(frameTimestamp);
        ticker.stop();
        done.complete();
      }
    });

    _activeTicker = ticker;
    ticker.start();
    await done.future;
    ticker.dispose();

    if (identical(_activeTicker, ticker)) {
      _activeTicker = null;
    }
  }

  void _printResults(List<ComparisonResult> results) {
    debugPrint(
      '=== Windows bounded BackdropFilter A/B/C/D/E/F/G/H comparison ===',
    );
    debugPrint(
      'mode=${kProfileMode ? 'profile' : 'NOT_PROFILE'} '
      'speed=${_movementSpeed.round()}px/s order=A/B/C/D/E/F/G/H',
    );

    for (final ComparisonResult result in results) {
      debugPrint(result.consoleLine);
    }

    debugPrint(
      '================================================================',
    );
  }

  void dispose() {
    _disposed = true;
    _activeTicker?.dispose();
    _activeTicker = null;
  }
}

class ComparisonResult {
  const ComparisonResult({
    required this.label,
    required this.frameCount,
    required this.fps,
    required this.build,
    required this.raster,
    required this.rasterOverBudget,
    required this.rasterOverBudgetPercent,
  });

  factory ComparisonResult.fromTimings({
    required String label,
    required List<FrameTiming> timings,
    required Duration measurementDuration,
    required double refreshRate,
  }) {
    final List<int> buildMicros = timings
        .map((FrameTiming timing) => timing.buildDuration.inMicroseconds)
        .toList();

    final List<int> rasterMicros = timings
        .map((FrameTiming timing) => timing.rasterDuration.inMicroseconds)
        .toList();

    final double budgetMicros = Duration.microsecondsPerSecond / refreshRate;

    final int overBudget = rasterMicros
        .where((int value) => value > budgetMicros)
        .length;

    final double seconds =
        measurementDuration.inMicroseconds / Duration.microsecondsPerSecond;

    return ComparisonResult(
      label: label,
      frameCount: timings.length,
      fps: timings.length < 2 ? 0 : (timings.length - 1) / seconds,
      build: TimingSummary.fromMicroseconds(buildMicros),
      raster: TimingSummary.fromMicroseconds(rasterMicros),
      rasterOverBudget: overBudget,
      rasterOverBudgetPercent: timings.isEmpty
          ? 0
          : overBudget * 100 / timings.length,
    );
  }

  final String label;
  final int frameCount;
  final double fps;
  final TimingSummary build;
  final TimingSummary raster;
  final int rasterOverBudget;
  final double rasterOverBudgetPercent;

  String get displayLine =>
      '${label.padRight(40)} '
      '${fps.toStringAsFixed(2).padLeft(6)}  '
      '${build.p50.toStringAsFixed(2).padLeft(5)}/'
      '${build.p95.toStringAsFixed(2).padRight(5)} ms   '
      '${raster.p50.toStringAsFixed(2).padLeft(6)}/'
      '${raster.p95.toStringAsFixed(2)}/'
      '${raster.p99.toStringAsFixed(2)}/'
      '${raster.max.toStringAsFixed(2)} ms   '
      '$rasterOverBudget/$frameCount '
      '(${rasterOverBudgetPercent.toStringAsFixed(1)}%)';

  String get consoleLine =>
      '$label | frames=$frameCount fps=${fps.toStringAsFixed(2)} '
      '| ui p50/p95=${build.p50.toStringAsFixed(3)}/'
      '${build.p95.toStringAsFixed(3)}ms '
      '| raster p50/p90/p95/p99/max=${raster.p50.toStringAsFixed(3)}/'
      '${raster.p90.toStringAsFixed(3)}/'
      '${raster.p95.toStringAsFixed(3)}/'
      '${raster.p99.toStringAsFixed(3)}/'
      '${raster.max.toStringAsFixed(3)}ms '
      '| raster_over_budget=$rasterOverBudget/$frameCount '
      '(${rasterOverBudgetPercent.toStringAsFixed(1)}%)';
}

class TimingSummary {
  const TimingSummary({
    required this.p50,
    required this.p90,
    required this.p95,
    required this.p99,
    required this.max,
  });

  factory TimingSummary.fromMicroseconds(List<int> values) {
    if (values.isEmpty) {
      return const TimingSummary(p50: 0, p90: 0, p95: 0, p99: 0, max: 0);
    }

    final List<int> sorted = List<int>.of(values)..sort();

    return TimingSummary(
      p50: _percentile(sorted, 0.50) / Duration.microsecondsPerMillisecond,
      p90: _percentile(sorted, 0.90) / Duration.microsecondsPerMillisecond,
      p95: _percentile(sorted, 0.95) / Duration.microsecondsPerMillisecond,
      p99: _percentile(sorted, 0.99) / Duration.microsecondsPerMillisecond,
      max: sorted.last / Duration.microsecondsPerMillisecond,
    );
  }

  final double p50;
  final double p90;
  final double p95;
  final double p99;
  final double max;

  static double _percentile(List<int> sorted, double fraction) {
    final double position = (sorted.length - 1) * fraction;
    final int lower = position.floor();
    final int upper = position.ceil();

    if (lower == upper) {
      return sorted[lower].toDouble();
    }

    return sorted[lower] + (sorted[upper] - sorted[lower]) * (position - lower);
  }
}