Flutter 底部容器向上滑动

Question

我正在制作一个应用程序，当在 Google 地图上单击某个地点时，它会显示地点详细信息。我可以在页面底部打开一个容器，但我想这样做，当用户将这个容器向上滑动并带有动画时，该容器将覆盖整个页面，我将获得有关该位置的额外信息并向用户展示。我如何使用 Flutter 做到这一点？

Answer 1

我想 DragableScrollableSheet 符合您的需要。文档中有很好的解释here。

Answer 2

您可以使用DraggableScrollableSheet

此处提供文档和视频教程： https://api.flutter.dev/flutter/widgets/DraggableScrollableSheet-class.html

Answer 3

您可以尝试使用这里的包：

https://pub.dev/packages/sliding_up_panel

但是，如果这不能满足您的要求，请尝试以下方法：使用 GestureDetector 和 AnimatedController 包裹您的 Widget：

double containerHeight = 0;
GestureDetector(
  onVerticalDragEnd: (dragUpdateDetails) {
    setState(){
       containerHeight = //device height or use MediaQuery.of(context).size.height//
    }
  },
  child: AnimatedContainer(
         duration: Duration(milliseconds: //how long should it take//), 
         height: containerHeight,
         child: //whatever you want//
   )
),

AnimatedController 在属性更改之间自动设置动画。但是，您可能想尝试将 onVertivalDragEnd 更改为 onVerticalDragUpdate 之类的其他内容，以完全满足您的愿望。如果您希望全屏显示该行为，请使用 GestureDetector 包装您的第一个 return 小部件。

Flutter 底部容器向上滑动

Flutter Bottom Container Swipe Up

flutter

maps

google-places-api