我想构建一个能够拖动到全屏的底部工作表小部件。

谁能告诉我怎么做？

谷歌地图有一个小部件可以做到这一点。这是屏幕截图(查看附件图片):

向上拖动之前:

拖动后:

最佳答案

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

这里是 gist对于此^ GIF 中的整个页面，或尝试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(),
              );
            },
          ),
        ],
      ),
    );
  }

在堆栈中:
- 谷歌地图是最低层。
- 标题(搜索字段 + 水平滚动条)位于 map 上方。
- 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;

https://stackoverflow.com/questions/53379577/