Flutter BottomSheet触发手势时抛出NoSuchMethodError错误求助

嘿，我来帮你搞定这个BottomSheet的错误！你遇到的问题根源其实是使用BottomSheet组件的方式不对——这个组件不能直接作为Scaffold的bottomSheet参数传入，它需要依赖Scaffold提供的状态管理来维护内部的拖拽状态，直接使用的话内部的状态控制器会是null，所以拖拽时访问status属性就会抛出错误。

错误原因拆解 #

你直接把BottomSheet组件塞到Scaffold的bottomSheet里，但BottomSheet本身是一个需要被Scaffold的状态系统托管的组件，它的内部状态（比如拖拽中的状态）需要通过BottomSheetController来管理。你的写法里，这个控制器是null，所以当触发拖拽结束的回调时，_BottomSheetState._dismissUnderway方法尝试访问_controller.status就会报"The getter 'status' was called on null"的错误。

正确的解决方案 #

根据你的需求，有两种常用的正确实现方式：

1. 常驻可拖拽的底部面板（Persistent Bottom Sheet）

如果你需要一个可以随时显示/隐藏、并且挂在Scaffold底部的面板，应该通过Scaffold的showBottomSheet方法来创建，而不是直接设置bottomSheet参数：

import 'package:flutter/material.dart';

class MyBottomSheetDemo extends StatefulWidget {
  const MyBottomSheetDemo({super.key});

  @override
  State<MyBottomSheetDemo> createState() => _MyBottomSheetDemoState();
}

class _MyBottomSheetDemoState extends State<MyBottomSheetDemo> {
  final _scaffoldKey = GlobalKey<ScaffoldState>();
  PersistentBottomSheetController? _bottomSheetController;
  bool _isSheetShown = false;

  void _toggleBottomSheet() {
    if (_isSheetShown) {
      _bottomSheetController?.close();
      _bottomSheetController = null;
    } else {
      _bottomSheetController = _scaffoldKey.currentState?.showBottomSheet(
        (context) => Container(
          height: 200,
          width: double.infinity,
          color: Colors.red,
        ),
        enableDrag: true,
      );
    }
    setState(() => _isSheetShown = !_isSheetShown);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(title: const Text('Persistent Bottom Sheet')),
      body: Center(
        child: ElevatedButton(
          onPressed: _toggleBottomSheet,
          child: Text(_isSheetShown ? '隐藏面板' : '显示面板'),
        ),
      ),
    );
  }
}

2. 模态化底部弹窗（Modal Bottom Sheet）

如果你的需求是弹出一个模态的底部弹窗（点击外部可以关闭，或者拖拽关闭），更推荐使用showModalBottomSheet方法，这也是Flutter中最常用的底部弹窗实现方式：

void _showModalBottomSheet() {
  showModalBottomSheet(
    context: context,
    enableDrag: true, // 默认就是true，可以省略
    builder: (context) => Container(
      height: 200,
      width: double.infinity,
      color: Colors.red,
    ),
  );
}

// 在组件中调用这个方法，比如按钮点击
ElevatedButton(
  onPressed: _showModalBottomSheet,
  child: const Text('显示模态底部弹窗'),
)

额外说明 #

你不需要手动补充onDragEnd回调，问题的核心不是缺少这个方法，而是组件的初始化方式错误。只要用上面的正确方式创建BottomSheet，拖拽和关闭的逻辑都会被Flutter内部正确处理。

内容的提问来源于stack exchange，提问作者Steven Dz