Flutter Custom Painter не перерисовывается

Я пытаюсь познакомиться с CustomPainters во Flutter и пытался использовать собственный рисовальщик, чтобы нарисовать барьер с вырезом вокруг определенного виджета на экране, чтобы вести себя как учебник.

У меня есть стек с пользовательским рисовальщиком, и я использую наложения, чтобы наложить учебный барьер на главную страницу. Моя мысль заключалась в том, чтобы иметь список виджетов для выделения, с «учебником», который вел бы пользователя виджет за виджетом по мере его щелчка, а художник перерисовывался, чтобы выделить следующий целевой виджет, или закрывал последний.

К сожалению, специальный рисовальщик рисует только первый вариант, а затем исчезает*. Я могу подтвердить с помощью утверждений debugPrint, что художник получает обновленные границы, но он просто не перерисовывается должным образом (это верно с/без переопределения определений == и hashCode, а также независимо от того, всегда ли shouldRepaint установлено в true или имеет дополнительную логику внутри ).

]

*На dartpad.dev маляр вообще не рендерится, даже первый.

Я также пробовал давать ключи виджетам Stack, Positioned и CustomPaint — без изменений.

В режиме отладки, если я устанавливаю точку останова в функции рисования моего HolePainter, после нажатия кнопки воспроизведения при каждой перерисовке и возврата в приложение она ведет себя так, как ожидалось.

Мне нужна помощь, чтобы понять, почему художник не выполняет повторный рендеринг...

Чего мне не хватает в документации? Есть ли известный трюк, вызывающий ожидаемое поведение?

Заранее спасибо.

Мой фрагмент кода:

import 'dart:async';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DebugPageTutorial(),
    );
  }
}

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

  @override
  State<DebugPageTutorial> createState() => _DebugPageTutorialState();
}

class _DebugPageTutorialState extends State<DebugPageTutorial> {
  final GlobalKey _overlayKey1 = GlobalKey();
  final GlobalKey _overlayKey2 = GlobalKey();
  final GlobalKey _overlayKey3 = GlobalKey();

  OverlayEntry? currentOverlayEntry;

  @override
  void initState() {
    super.initState();
    currentOverlayEntry = null;
  }

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

  void _onTutorialFinished() {
    if (currentOverlayEntry?.mounted ?? false) currentOverlayEntry?.remove();
    currentOverlayEntry = null;
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                key: _overlayKey1,
                'This is a tutorial page',
                style: const TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
              Text(
                key: _overlayKey2,
                'This is a tutorial page',
              ),
              Padding(
                padding: const EdgeInsets.all(32.0),
                child: Container(
                  key: _overlayKey3,
                  decoration: const BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.cyan,
                  ),
                  height: 50.0,
                  width: 50.0,
                ),
              ),
              MaterialButton(
                onPressed: () async {
                  currentOverlayEntry = TutorialOverlay.createOverlayEntry(
                    context,
                    overlayKeys: [
                      TutorialOverlayTooltip(
                        overlayKey: _overlayKey1,
                        overlayTooltip: const Text('Hello'),
                      ),
                      TutorialOverlayTooltip(
                        overlayKey: _overlayKey2,
                        overlayTooltip: const Text('World'),
                        padding: const EdgeInsets.all(16.0),
                        shapeBorder: const RoundedRectangleBorder(
                          borderRadius: BorderRadius.all(
                            Radius.circular(
                              8.0,
                            ),
                          ),
                        ),
                        color: Colors.green,
                      ),
                      TutorialOverlayTooltip(
                          overlayKey: _overlayKey3,
                          overlayTooltip: const Text('Beep'),
                          shapeBorder: CircleBorder(),
                          padding: const EdgeInsets.all(16.0),
                          color: Colors.red),
                      TutorialOverlayTooltip(
                        overlayKey: _overlayKey1,
                        overlayTooltip: const Text('Bop'),
                      ),
                    ],
                    onTutorialFinished: _onTutorialFinished,
                  );
                  Overlay.of(context).insert(currentOverlayEntry!);
                },
                child: const Text('Show Tutorial'),
              ),
            ],
          ),
        ),
      );
}

class TutorialOverlay extends StatefulWidget {
  /// A list of keys and overlay tooltips to display when the overlay is
  /// displayed. The overlay will be displayed in the order of the list.
  final List<TutorialOverlayTooltip> overlayKeys;

  /// A global key to use as the ancestor for the overlay entry, ensuring that
  /// the overlay entry is not shifted improperly when the overlay is only being
  /// painted on a portion of the screen. If null, the overlay will be painted
  /// based on the heuristics of the entire screen.
  final GlobalKey? ancestorKey;

  final FutureOr<void> Function()? onTutorialFinished;

  const TutorialOverlay({
    super.key,
    required this.overlayKeys,
    this.ancestorKey,
    this.onTutorialFinished,
  });

  static OverlayEntry createOverlayEntry(
    BuildContext context, {
    required List<TutorialOverlayTooltip> overlayKeys,
    GlobalKey? ancestorKey,
    FutureOr<void> Function()? onTutorialFinished,
  }) =>
      OverlayEntry(
        builder: (BuildContext context) => TutorialOverlay(
          overlayKeys: overlayKeys,
          ancestorKey: ancestorKey,
          onTutorialFinished: onTutorialFinished,
        ),
      );

  @override
  State<TutorialOverlay> createState() => _TutorialOverlayState();
}

class _TutorialOverlayState extends State<TutorialOverlay> {
  late List<TutorialOverlayTooltip> _overlayKeys;
  int _currentIndex = 0;
  TutorialOverlayTooltip? get _currentTooltip =>
      _currentIndex < _overlayKeys.length ? _overlayKeys[_currentIndex] : null;
  final ValueNotifier<int> _repaintKey = ValueNotifier<int>(0);

  @override
  void initState() {
    super.initState();
    _overlayKeys = widget.overlayKeys;
  }

  Rect? _getNextRenderBox(GlobalKey? key) {
    final RenderBox? renderBox =
        key?.currentContext?.findRenderObject() as RenderBox?;
    if (renderBox != null && renderBox.hasSize) {
      final Offset offset = renderBox.localToGlobal(
        Offset.zero,
        ancestor: widget.ancestorKey?.currentContext?.findRenderObject(),
      );
      return Rect.fromLTWH(
        offset.dx,
        offset.dy,
        renderBox.size.width,
        renderBox.size.height,
      );
    }
    return null;
  }

  @override
  Widget build(BuildContext context) {
    final Rect? nextRenderBox = _getNextRenderBox(_currentTooltip?.overlayKey);
    if (nextRenderBox == null) return const SizedBox();

    // Determine position for the tutorial text
    double textTop = nextRenderBox.top > 100
        ? nextRenderBox.top - 40
        : nextRenderBox.bottom + 20;

    debugPrint('build: ${nextRenderBox.toString()}');

    return Stack(
      children: [
        // Paint the background
        Positioned.fill(
          key: ValueKey('tutorial_paint:$_currentIndex'),
          left: 0.0,
          right: 0.0,
          top: 0.0,
          bottom: 0.0,
          child: CustomPaint(
            painter: HolePainter(
              repaint: _repaintKey,
              targetRect: nextRenderBox,
              shapeBorder: _currentTooltip?.shapeBorder ??
                  const RoundedRectangleBorder(),
              color: _currentTooltip?.color ?? const Color(0x90000000),
              direction: _currentTooltip?.direction ?? TextDirection.ltr,
              padding: _currentTooltip?.padding ?? EdgeInsets.zero,
            ),
          ),
        ),
        // Tutorial text box
        Positioned(
          top: textTop,
          left: nextRenderBox.left,
          child: Material(
            color: Colors.transparent,
            child: Container(
              padding: const EdgeInsets.all(8),
              color: Colors.white,
              child: GestureDetector(
                behavior: HitTestBehavior.translucent,
                onTap: () {
                  if (_currentIndex + 1 < _overlayKeys.length) {
                    return setState(() {
                      _currentIndex = _currentIndex + 1;
                      _repaintKey.value = _currentIndex;
                    });
                  }
                  widget.onTutorialFinished?.call();
                },
                child: _currentTooltip?.overlayTooltip ?? const SizedBox(),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

/// Contains information for drawing a tutorial overlay over a given widget
/// based on the provided global key.
class TutorialOverlayTooltip {
  /// The key of the widget to highlight in the cutout of the tutorial overlay
  final GlobalKey overlayKey;

  /// The widget to render by the cutout of the totorial overlay
  final Widget overlayTooltip;

  /// The padding around the widget to render by the cutout of the totorial
  /// overlay. Default is EdgeInsets.zero
  final EdgeInsets padding;

  /// The shape of the cutout of the totorial overlay. Default is a rounded
  /// rectangle with no border radius
  final ShapeBorder shapeBorder;

  /// The color of the barrier of the totorial overlay. Default is
  /// Black with 50% opacity
  final Color color;

  /// The direction of the cutout of the totorial overlay. Default is
  /// [TextDirection.ltr]
  final TextDirection direction;

  const TutorialOverlayTooltip({
    required this.overlayKey,
    required this.overlayTooltip,
    this.padding = EdgeInsets.zero,
    this.shapeBorder = const RoundedRectangleBorder(),
    this.color = const Color(0x90000000), // Black with 50% opacity
    this.direction = TextDirection.ltr,
  });
}

/// A painter that covers the area with a shaped hole around a target box
class HolePainter extends CustomPainter {
  /// The key of the widget to highlight in the cutout of the tutorial overlay
  final ValueNotifier? repaint;

  /// The target rect to paint a hole around
  final Rect targetRect;

  /// The padding around the target rect in the hole
  final EdgeInsets padding;

  /// The shape of the hole to paint around the target rect
  final ShapeBorder shapeBorder;

  /// The color of the barrier that the hole is cut from.
  final Color color;

  /// The direction of the hole. Default is [TextDirection.ltr]
  final TextDirection direction;

  const HolePainter({
    this.repaint,
    required this.targetRect,
    this.shapeBorder =
        const RoundedRectangleBorder(borderRadius: BorderRadius.zero),
    this.color = const Color(0x90000000), // Black with 50% opacity
    this.padding = EdgeInsets.zero,
    this.direction = TextDirection.ltr,
  }): super(repaint: repaint);

  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = color
      ..blendMode = BlendMode.dstOver;

    // Create a padded rectangle from the targetRect using padding
    final Rect paddedRect = Rect.fromLTRB(
      targetRect.left - padding.left,
      targetRect.top - padding.top,
      targetRect.right + padding.right,
      targetRect.bottom + padding.bottom,
    );

    // Create the background path covering the entire canvas
    Path backgroundPath = Path()
      ..addRect(
        Rect.fromLTWH(
          0,
          0,
          size.width,
          size.height,
        ),
      );

    // Create the hole path depending on the shapeBorder
    Path holePath = Path();
    if (shapeBorder is RoundedRectangleBorder) {
      BorderRadiusGeometry borderRadiusGeometry =
          (shapeBorder as RoundedRectangleBorder).borderRadius;
      BorderRadius borderRadius = borderRadiusGeometry.resolve(direction);
      holePath.addRRect(
        RRect.fromRectAndCorners(
          paddedRect,
          topLeft: borderRadius.topLeft,
          topRight: borderRadius.topRight,
          bottomLeft: borderRadius.bottomLeft,
          bottomRight: borderRadius.bottomRight,
        ),
      );
    } else if (shapeBorder is CircleBorder) {
      // Use the smaller side to ensure it fits within the padded rect
      double radius = paddedRect.width < paddedRect.height
          ? paddedRect.width / 2
          : paddedRect.height / 2;
      holePath.addOval(
        Rect.fromCircle(
          center: paddedRect.center,
          radius: radius,
        ),
      );
    } else {
      // Only support RoundedRectangleBorder and CircleBorder for now
      throw Exception('Unsupported shape border type');
    }

    // Combine the paths to create a cut-out effect
    Path combinedPath = Path.combine(
      PathOperation.difference,
      backgroundPath,
      holePath,
    );
    // Draw to the canvas
    canvas.drawPath(
      combinedPath,
      paint,
    );
    debugPrint('paint: ${targetRect.toString()}');
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    if (oldDelegate is HolePainter)
      debugPrint(
        'repaint: ${oldDelegate.targetRect.toString()} => ${targetRect.toString()}',
      );
    return true;
  }
}