Animating cubical perspective in flutter

Viewed 105

I'm trying to implement the cubical swipe as outlined by Marcin Szalek in his Flutter talk for the different pages in my app. I was able to implement it for the left side, as he had shown. But if I want to implement it for the right hand side of the main page, or if I want to add a Gesture detector for another action, how can I stack these GDs on top of one another, if at all possible? Or should I restrict the GDs to certain sections of the screen? Thanks in advance.

      GestureDetector(
          onHorizontalDragStart: _onDragStart,
          onHorizontalDragUpdate: _onDragUpdate,
          onHorizontalDragEnd: _onDragEnd,
          behavior: HitTestBehavior.translucent,
          onTap: toggle,
          child: AnimatedBuilder(
            animation: animationController,
            builder: (context, _) {
              return Material(
                color: Colors.black,
                child: Stack(
                  children: <Widget>[
                    Transform.translate(
                      offset: Offset(maxSlide * (animationController.value - 1), 0),
                      child: Transform(
                        transform: Matrix4.identity()
                          ..setEntry(3, 2, 0.001)
                          ..rotateY(math.pi / 2 * (1 - animationController.value)),
                        alignment: Alignment.centerRight,
                        child: SettingsDrawer(),
                      ),
                    ),
                    Transform.translate(
                      offset: Offset(maxSlide * animationController.value, 0),
                      child: Transform(
                        transform: Matrix4.identity()
                          ..setEntry(3, 2, 0.001)
                          ..rotateY(-math.pi * animationController.value / 2),
                        alignment: Alignment.centerLeft,
                        child: widget.child,
                      ),
                    ),
                  ],
                ),
              );
            },
          ),
        ),
    ]);
  }
  void _onDragStart(DragStartDetails details) {
    bool isDragOpenFromLeft = animationController.isDismissed;
    bool isDragCloseFromRight = animationController.isCompleted;
    _canBeDragged = isDragOpenFromLeft || isDragCloseFromRight;
  }

  void _onDragUpdate(DragUpdateDetails details) {
    if (_canBeDragged) {
      double delta = details.primaryDelta / maxSlide;
      animationController.value += delta;
    }
  }

  void _onDragEnd(DragEndDetails details) {
    //I have no idea what it means, copied from Drawer
    double _kMinFlingVelocity = 365.0;

    if (animationController.isDismissed || animationController.isCompleted) {
      return;
    }
    if (details.velocity.pixelsPerSecond.dx.abs() >= _kMinFlingVelocity) {
      double visualVelocity = details.velocity.pixelsPerSecond.dx /
          MediaQuery.of(context).size.width;

      animationController.fling(velocity: visualVelocity);
    } else if (animationController.value < 0.5) {
      animationController.reverse();
    } else {
      animationController.forward();
    }
  }
0 Answers
Related