flutter - Flutter重叠页面，详细信息帐户页面

Question

我正在尝试制作一个应用程序，并且需要社区的帮助:我正在尝试在另一个页面的顶部进行覆盖(这将是一个新页面)。查看在dribbble上找到的这些屏幕截图，然后我将尽力进行更好的解释。



因此，如第一个屏幕截图所示，您正在查看页面。我想做的是，当您单击时，例如，在“联系页面”按钮上，一个带有线性动画的窗口从屏幕底部弹出，并显示 View ，如屏幕右侧的屏幕截图所示。屏幕。但我不希望它成为“真正的新页面”，因为如您在第二张屏幕截图中所见，我们可以透明地看到第一页...

当然，当您单击十字按钮时，窗口会弹出...

如果我不够清楚，请问我任何问题。

欢迎任何帮助!
非常感谢，stackoverflow是一个非凡的社区!

Answer 1

这是一个最小的示例，说明如何使用AnimatedPositioned小部件来实现此目标，希望它可以帮助您入门。

class ExampleApp extends StatefulWidget {
  @override
  _ExampleAppState createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  final double containerHeight = 200.0;

  bool _showProfile;

  @override
  void initState() {
    _showProfile = false;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.teal,
        child: Stack(
          children: <Widget>[
            Container(
              color: Colors.redAccent,
              child: Center(
                child: FlatButton(
                  child: Text("Animate"),
                  onPressed: () {
                    setState(() {
                      _showProfile = true;
                    });
                  },
                ),
              ),
            ),
            AnimatedPositioned(
                bottom: _showProfile ? 0 : -containerHeight,
                right: 0,
                left: 0,
                duration: Duration(milliseconds: 300),
                child: Container(
                  color: Colors.white,
                  height: containerHeight,
                ))
          ],
        ),
      ),
    );
  }
}