Flutter叠加页面，详情账户页面

Question

我正在尝试制作一个应用程序，但我需要社区的帮助：我正在尝试制作一个叠加层（这将是一个新页面）出现在其他页面的顶部。看看 dribbble 上的这些屏幕截图，然后我会尝试更好地解释。

所以，假设您在第一个屏幕截图所示的页面上。我想要做的是，当您单击 "contact page" 按钮时，windows 会从屏幕底部出现一个线性动画，并显示视图，如屏幕截图所示在屏幕的右侧。但我不希望它成为 "real new page" 因为正如您在第二张屏幕截图中看到的那样，我们可以透明地看到第一页后面...

当然，当您单击十字按钮时，window 弹出...

有什么不清楚的可以问我。

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

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

Answer 2

您也可以使用 Bottomsheet 实现同样的效果。

查看 https://api.flutter.dev/flutter/material/BottomSheet-class.html

Flutter叠加页面，详情账户页面

Flutter overlay page, details account page

mobile

overlay

concept

dart

flutter