dart - 创建从上到下的滑动效果

Question

我正在寻找一种解决方案，我可以在其中隐藏小部件，并且仅当按下某个按钮时，视觉效果应该是容器从上到下下降。

示例:通过按下操作按钮，容器会从上到下显示为动画。这个容器高于一切。

目前我的Widget Build结构如下:

Container
  Stack
    TheBlueContainerHere()
    Flex
      Flexible
        ListView Builder

我不确定这是否是继续进行的正确结构，但我还没有找到更好的结构。

我怎样才能构建这样的东西？

Answer 1

已解决。

按照这个例子flutter notify from top of the screen我能够创造出我想要的东西。

按下操作按钮时:

Navigator.push(
  context,
  PageRouteBuilder(
    opaque: false,
    pageBuilder: (BuildContext context, _, __) {
      return FunkyNotification();
    },
  ),
);

而FunkyNotification()各自的代码是:

class FunkyNotification extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => FunkyNotificationState();
}

class FunkyNotificationState extends State<FunkyNotification>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<Offset> position;

  @override
  void initState() {
    super.initState();

    controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 750));
    position = Tween<Offset>(begin: Offset(0.0, -4.0), end: Offset.zero)
        .animate(CurvedAnimation(parent: controller, curve: Curves.decelerate));

    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Material(
        color: Colors.transparent,
        child: Align(
          alignment: Alignment.topCenter,
          child: Padding(
            padding: EdgeInsets.only(top: 56.0),
            child: SlideTransition(
              position: position,
              child: Container(
                height: 200,
                width: double.infinity,
                margin: EdgeInsets.only(left: 10, right: 10),
                padding: EdgeInsets.all(15),
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(5),
                    bottomRight: Radius.circular(5),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}