如何使用 Flutter 构建一个底部 sheet 可以拖动到全屏的小部件？

Question

我想构建一个底部 sheet 小部件，它可以向上拖动到全屏。

谁能告诉我怎么做？

Google 地图有一个小部件可以做到这一点。这是屏幕截图（查看附图）：

上拉前:

向上拖动后：

Answer 1

模态和永久底页都不能拖入视图。持久性底部表必须被触发打开（例如，通过按下按钮）然后它可以被上下拖动直到最终离开视图。我希望有一个选项可以将其拖入视图...

Rubber应该能满足你的需求；我尝试了一下，但是当我调用 setstate 时它总是会出错（所以我不行）...如果您遇到同样的问题，请告诉我。

Answer 2

将 DraggableBottomSheet 小部件与 Stack 小部件一起使用：

这是 gist for the entire page in this^ GIF, or try the Codepen。

这是整个页面的结构：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          CustomGoogleMap(),
          CustomHeader(),
          DraggableScrollableSheet(
            initialChildSize: 0.30,
            minChildSize: 0.15,
            builder: (BuildContext context, ScrollController scrollController) {
              return SingleChildScrollView(
                controller: scrollController,
                child: CustomScrollViewContent(),
              );
            },
          ),
        ],
      ),
    );
  }

在Stack中：
- Google 地图是最下层。
- Header（搜索字段 + 水平滚动条）位于地图上方。
- DraggableBottomSheet 在 Header.

之上

draggable_scrollable_sheet.dart中定义的一些有用参数：

  /// The initial fractional value of the parent container's height to use when
  /// displaying the widget.
  ///
  /// The default value is `0.5`.
  final double initialChildSize;

  /// The minimum fractional value of the parent container's height to use when
  /// displaying the widget.
  ///
  /// The default value is `0.25`.
  final double minChildSize;

  /// The maximum fractional value of the parent container's height to use when
  /// displaying the widget.
  ///
  /// The default value is `1.0`.
  final double maxChildSize;

如何使用 Flutter 构建一个底部 sheet 可以拖动到全屏的小部件？

How to use Flutter to build a bottom sheet widget which is able to drag up to full screen?

android

ios

flutter

flutter-animation