一、先来看下实现的效果

• 实现上面的效果需要解决俩个问题
  • 当列表进行向下滑动到顶部的时候，继续滑动可以让弹窗向下收起来
  • 弹出上下拖动的时候，视图内容跟着上下移动、缩放大小

二、实现弹窗上下滑动的时候，动态改变内容区的位置和大小

• 通过showModalBottomSheet显示底部对话框

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  backgroundColor: Colors.white,
  transitionAnimationController: _controller,
 
  builder: (_) {
   
    ///省略部分代码...
  },
);

1、那问题来了，怎么去监听对话框当前显示的高度呢？

可以发现showModalBottomSheet有一个transitionAnimationController参数，这个就是对话框显示的动画控制器了值为[0,1]，当全部显示是为1。
那么当将弹窗设为固定高度时，就可以通过这个值进行计算了

• 假设我们顶部留的最小空间为：宽度 = 屏幕宽度，高度 = 屏幕宽度 / (16 / 9)，那么对话框的高度就等与 屏幕高度 - 顶部高度

///屏幕宽度
double get screenWidth => MediaQuery.of(context).size.width;
///屏幕高度
double get screenHeight => MediaQuery.of(context).size.height;
///顶部留的高度
double get topSpaceHeight => screenWidth / (16 / 9);
///对话框高度
double get bottomSheetHeight => screenHeight - topSpaceHeight;

2、监听对话框高度改变

@override
void initState() {
   
  super.initState(