如何在颤动中将图像从视图中推出？

Question

我是Flutter新手，想知道如何在我的项目中实现这样的设计。

我如何 transform/translate 我的背景在视图中上升和下降？
如何在几毫秒后在我的背景之上添加另一个容器（位于屏幕底部）？

gif demonstrating the design I'd like to achieve

Answer 1

使用 showModalBottomSheet。这是一个例子

 onPressed: () {
              showModalBottomSheet(
                  context: context,
                  builder: (BuildContext ctx) {
                    return Container(
                      padding: EdgeInsets.only(top: 20),
                      child: Container() //add any widget here
                    );
              
                  });
            }

对于第一个问题，将您的图像放在 AnimatedAlign 小部件中

Answer 2

你可以用这个，sliding_up_panel有视差效果：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("SlidingUpPanelExample"),
    ),
    body: SlidingUpPanel(
      parallaxEnabled: true,
      panel: Center(
        child: Text("This is the sliding Widget"),
      ),
      body: Center(
        child: Text("This is the Widget behind the sliding panel"),
      ),
    ),
  );
}

如何在颤动中将图像从视图中推出？

How to push image out from the view in flutter?

flutter

flutter-layout

flutter-animation