flutter - 带有拖动手势的颤动动画底部抽屉

Question

所以，我正在尝试制作一个发射器并努力应对这种拖动效果。如果我从屏幕上的任意位置点击并向上拖动，抽屉就会开始打开。如果可能的话，任何人都可以解释或编码这种效果吗？我尝试了一些东西，但它并不是那么顺利

https://youtu.be/Ywj9pLqJqvc

我试过这个，但它不是很顺利

 double customHeight;
  bool animationEnded;
  @override
  void initState() {
    super.initState();
    animationEnded = true;
    customHeight = 0;
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text("Live Test"),
      ),
      body: GestureDetector(
        onPanEnd: (details) {
         
          if (customHeight < size.height / 2) {
            animationEnded = true;
            setState(() {
              customHeight = 0;
            });
          } else {
            animationEnded = true;
            setState(() {
              customHeight = -size.height;
            });
            log("opening full");
          }
          // log("onpanend ${details.velocity}");
        },
        onPanUpdate: (DragUpdateDetails details) {
          if (animationEnded) {
            animationEnded = false;
            setState(() {
              customHeight += details.delta.dy;
            });
          } else {
            customHeight += details.delta.dy;
          }
        },
        child: Stack(
          children: [
            Positioned.fill(
                child: Container(
              child: Text("This is the home screen"),
            )),
            AnimatedPositioned(
                duration: Duration(
                  milliseconds: 80,
                ),
                onEnd: () {
                  animationEnded = true;
                },
                left: 0,
                bottom: (-size.height - customHeight),
                child: Container(
                  width: size.width,
                  height: size.height,
                  color: Colors.pink,
                  alignment: Alignment.center,
                  child: Text("This is the swipe up screen"),
                ))
          ],
        ),
      ),
    );
  }

标签： flutterflutter-layoutflutter-animation