在Flutter中,如何创建一个像Uber这样的UI,使其中间有地图和AppBar,并导航到不同类型的视图



我是Flutter的新手。我正在做一个项目,创建一个像优步这样的用户界面,以谷歌地图为背景,并具有不同类型的视图,如全屏地址输入视图(看起来是全屏的,但部分视图可以隐藏起来,以显示后面的地图并与之交互(、持久的底页和顶部的一些浮动按钮。使用堆叠在地图上放一张最下面的纸并不困难。但是,当涉及到在不同类型的视图之间来回导航,同时将地图保持在背景中,并且地图仍然可以触摸时,我不知道如何管理它。有时它会导航2-3次,然后返回到第一个底部页面。所以问题是:

如何实现在不同类型的视图之间导航的方法,如首先调出全屏地址视图,输入地址后弹出地址视图,然后调出汽车类型视图,如下面链接所示的示例图像。按下左上角的后退按钮将返回地址视图。

如果你对如何设计这个导航流程有任何想法,请分享。谢谢。样本图像

更新:发现这个GitHub存储库演示了如何实现类似Uber的UI。我正在检查。https://github.com/iamSahdeep/fu_uber

对于顶部有元素的背景贴图,Stack是最好的,正如您所提到的。

对于持久的底页,请使用BottomSheet类

对于浮动按钮,请使用FloatingActionButton类

对于BottomSheets之间的导航,您可能想了解更多关于此插件Modal BottomSheet的信息。它正是你所需要的。检查"带内部导航的Cupertino模态"。

相关内容

  • 没有找到相关文章

最新更新