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

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

个

这是这个^GIF中整个页面的gist，或者试试Codepen.

下面是整个页面的 struct :

  @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 map 是最低层.
-标题(搜索域+水平滚动筹码)位于 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;