Question

我正在寻找一种可以隐藏小部件的解决方案，并且只有当按下某些按钮时，视觉效果才应该是容器从上到下的下落。

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

目前，我的 Widget构建结构如下：

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),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

从上到下创建幻灯片效果

1 个答案: