如何使用Flutter构建能够拖动到全屏的底部小部件？

Question

我想构建一个底部表格小部件，该部件可以拖动到全屏。

谁能告诉我该怎么做？

Google地图有一个小部件能够执行此操作。这是屏幕截图（请查看附件图像）：

向上拖动之前：

向上拖动后：

Answer 1

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

这是此^ GIF中整个页面的gist，或尝试使用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地图是最底层。
-页眉（搜索字段+水平滚动的筹码）在地图上方。
-DraggableBottomSheet在页眉上方。

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;

Answer 2

您可以参考以下博客https://flutterdoc.com/bottom-sheets-in-flutter-ec05c90453e7，您所指的底表是“持久底表”

Answer 3

无论是模式底部还是持久性底部，都不能拖动到视图中。永久性底片必须被触发打开（例如，通过按下按钮），然后将其向上或向下拖动，直到最终看不见为止。我希望有一个选项可以将其拖动到视图中...

Rubber应该满足您的需求；我试了一下，但是当我打电话给setstate时，它总是很奇怪（所以对我来说是个不行）...让我知道您是否也遇到同样的问题。