如何使用GestureDetector将一页拖到另一页上?

时间:2020-05-12 11:09:22

标签: flutter flutter-animation gesturedetector

我想从另一页面的右向左拖动页面。

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 1050),
    );
    _animationController.forward();
    _animationController.reverse();
  }

  Container topicPage = Container(
    color: Colors.blueAccent,
    width: double.infinity,
  );

  Container conversationPage = Container(
    color: Colors.redAccent,
    width: double.infinity,
  );

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: GestureDetector(
      onTap: () {
        setState(
          () {
            _animationController.forward();

          },
        );
      },
          onDoubleTap: () {
            setState(
                  () {
                    _animationController.reverse();
              },
            );
          },

      child: Stack(
        children: [
          topicPage,
          AnimatedBuilder(
            animation: _animationController,
            builder: (context, _) {
              double width = MediaQuery.of(context).size.width *
                  _animationController.value;
              print("Value: " + _animationController.value.toString());
              return Transform(
                alignment: Alignment.centerLeft,
                transform: Matrix4.identity()..translate(width),
                child: conversationPage,
              );
            },
          )
        ],
      ),
    ));
  }

项目文件:GitHub Repo

准确地说,我想获得以下结果: https://www.youtube.com/watch?v=kRO5UrxfOZQ

这是新版松弛版的设计,最初的首页是频道列表,当我们从右向左滑动时,新的对话页会覆盖频道页/首页。 同样,当“对话页面”处于从右到左的过渡中时,即使主页中有一个很小的向左过渡。 我想达到类似的结果。 如何使用GestureDetector,Transformer和Animation实现它?

0 个答案:

没有答案