如何让 Flutter Draggable 与 Agora Video 框架一起工作

Question

我正在开发这个视频通话应用程序。一切似乎都在原地踏步。我尝试实现的一种 UI 效果存在一个小问题。

所以情况如下： 在进行实时通话时，例如在 messenger 或任何其他视频通话应用程序上，我希望用户 0 能够将他们的视频帧拖放到屏幕的不同位置。

我尝试使用颤振可拖动：

/// Video 0 View Customization to include draggable effect
  Offset? position;
  double prevScale = 1;
  double scale = 1;

  void updatePosition(Offset newPosition) =>
      setState(() => position = newPosition);
  ValueNotifier<Offset?> positionNotifier = ValueNotifier(null);

/// Video layout wrapper

  Widget _viewRows() {
    final views = _getRenderViews();
    switch (views.length) {
      case 1:
        return Container(
            child: Column(
          children: <Widget>[_videoView(views[0])],
        ));
      case 2:
        return Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: Stack(
              children: <Widget>[
                _expandedVideoRow([views[1]]),
                Positioned(
                  left: position == null
                      ? MediaQuery.of(context).size.width / 1.5
                      : position!.dx,
                  top: position == null ? 50 : position!.dy,
                  child: Draggable(
                    maxSimultaneousDrags: 1,
                    feedback: Transform.scale(
                      scale: scale,
                      child: Container(
                          height: MediaQuery.of(context).size.height / 4.5,
                          width: MediaQuery.of(context).size.width / 3.2,
                          decoration: BoxDecoration(
                            color: Colors.green,
                            borderRadius: BorderRadius.circular(20.0),
                          ),
                          child: ClipRRect(
                              borderRadius: BorderRadius.circular(20),
                              child: _expandedVideoRow([views[0]]))),
                    ),
                    childWhenDragging: Opacity(
                      opacity: .3,
                      child: Transform.scale(
                        scale: scale,
                        child: Container(
                            height: MediaQuery.of(context).size.height / 4.5,
                            width: MediaQuery.of(context).size.width / 3.2,
                            decoration: BoxDecoration(
                              color: Colors.green,
                              borderRadius: BorderRadius.circular(20.0),
                            ),
                            child: ClipRRect(
                                borderRadius: BorderRadius.circular(20),
                                child: _expandedVideoRow([views[0]]))),
                      ),
                    ),
                    onDragEnd: (details) => updatePosition(details.offset),
                    child: Transform.scale(
                      scale: scale,
                      child: Container(
                          height: MediaQuery.of(context).size.height / 4.5,
                          width: MediaQuery.of(context).size.width / 3.2,
                          decoration: BoxDecoration(
                            color: Colors.green,
                            borderRadius: BorderRadius.circular(20.0),
                          ),
                          child: ClipRRect(
                              borderRadius: BorderRadius.circular(20),
                              child: _expandedVideoRow([views[0]]))),
                    ),
                  ),
                ),
              ],
            ));
   
      default:
    }
    return Container();
  }

这些然后显示在另一个主堆栈中：@override 小部件构建（BuildContext 上下文）{ 堆（ 适合：StackFit.expand， 孩子们：[

       if (widget.calltype == 'videocall') ...[
           child: _viewRows(),
      ]
     ...

有没有更好的方法来实现这种 UI Draggable 效果？

Answer 1

您可以使用此小部件使其可拖动 https://pub.dev/packages/draggable_widget