在叠加层前制作一个小部件

我正在尝试在 Flutter 中重现与 Pinterest 相同的上下文菜单。所以我有一个叠加层，它显示我的上下文菜单和背景，我还想将当前元素保留在叠加层前面。

这里有 2 个视频：Pinterest 菜单与我的 Flutter 菜单。

为了制作叠加层，我正在使用 flutter_portal 包。

这是带有覆盖层的蓝卡小部件的代码：

import 'package:flutter/material.dart';
import 'package:flutter_portal/flutter_portal.dart';
import 'package:vector_math/vector_math.dart' show radians;

class CardWidget extends StatefulWidget {
  @override
  _CardWidgetState createState() => _CardWidgetState();
}

class _CardWidgetState extends State<CardWidget> with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late Animation<double> degreeAnimation;
  late Animation<double> opacityAnimation;
  bool isMenuOpen = false;
  double menuPosX = 0;
  double menuPosY = 0;

  @override
  void initState() {
    controller = AnimationController(vsync: this, duration: Duration(milliseconds: 200))
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((status) {
        if (status == AnimationStatus.forward) {
          isMenuOpen = true;
        } else if (status == AnimationStatus.dismissed) {
          isMenuOpen = false;
        }
      });
    degreeAnimation =
        Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(parent: controller, curve: Curves.easeOutBack));
    opacityAnimation =
        Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(parent: controller, curve: Curves.easeOutExpo));

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 63.5 / 88.9,
      child: PortalEntry(
        visible: isMenuOpen,
        portal: Container(
          color: Colors.black.withOpacity(opacityAnimation.value / 2),
          child: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {
              controller.reverse();
            },
          ),
        ),
        child: PortalEntry(
          visible: isMenuOpen,
          child: GestureDetector(
            onTapDown: (details) {

              if (controller.isCompleted) {
                controller.reverse();
              } else {
                menuPosX = details.globalPosition.dx;
                menuPosY = details.globalPosition.dy;

                controller.forward();
              }
            },
            // Blue card content
            child: Container(
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.all(
                  Radius.circular(8),
                ),
              ),
              child: Center(
                child: Text(
                  'Card Widget',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
          // Current contextual Menu
          portal: ContextualMenuWidget(),
        ),
      ),
    );
  }
}

感谢您的帮助！