Flutter中如何修改showModalBottomSheet底部弹窗的拖拽手柄颜色？

方法一：通过局部Theme覆盖默认颜色 #

你可以在showModalBottomSheet外层嵌套Theme组件，修改bottomSheetTheme里的dragHandleColor来指定拖拽手柄的颜色，这种方法无需自定义手柄，直接复用系统默认的拖拽样式：

Theme(
  data: Theme.of(context).copyWith(
    bottomSheetTheme: BottomSheetThemeData(
      dragHandleColor: Colors.red, // 替换为你需要的颜色
    ),
  ),
  child: showModalBottomSheet(
    context: context,
    showDragHandle: true,
    backgroundColor: Colors.transparent,
    builder: (context) => Container(
      height: screenHeight * 0.25,
      width: screenWidth,
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(25.0),
          topRight: Radius.circular(25.0),
        ),
      ),
      child: const Center(
        child: Text("Modal content goes here"),
      ),
    ),
  ),
);

方法二：自定义拖拽手柄（完全控制样式） #

如果需要调整手柄的大小、形状等更多样式，可以关闭默认的showDragHandle，在弹窗内容顶部手动添加DragHandle组件，通过color属性设置颜色：

showModalBottomSheet(
  context: context,
  showDragHandle: false, // 关闭默认手柄
  backgroundColor: Colors.transparent,
  builder: (context) => Container(
    height: screenHeight * 0.25,
    width: screenWidth,
    decoration: const BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(25.0),
        topRight: Radius.circular(25.0),
      ),
    ),
    child: Column(
      children: [
        DragHandle(
          color: Colors.blue, // 设置自定义颜色
          // 可额外通过size、thickness属性调整手柄尺寸
        ),
        const Expanded(
          child: Center(
            child: Text("Modal content goes here"),
          ),
        ),
      ],
    ),
  ),
);

内容的提问来源于stack exchange，提问作者VISHNU PRABHAKARAN