Flutter如何禁用Stepper步骤标题的点击功能？含波纹效果禁用

当使用Flutter的Stepper组件时，即使将onStepTapped设为null，步骤标题区域仍会触发Material的波纹点击效果，以下是两种简单的解决方法：

方法一：用IgnorePointer包裹标题组件 #

直接在Step的title外层包裹IgnorePointer组件，阻止所有点击事件传递，彻底禁用点击和波纹效果：

Step(
  title: const IgnorePointer(
    child: BrandText(text: 'Name'),
  ),
  content: Column(
    children: <Widget>[
      BrandTextInput(
          controller: _groupNameController,
          hintText: 'Name',
          iconName: Icons.label)
    ],
  ),
  isActive: _currentStep >= 0,
  state: _currentStep >= 0
      ? StepState.complete
      : StepState.disabled,
),

方法二：自定义Step头部区域 #

如果需要更灵活的布局控制，可以通过Step的header属性自定义头部内容，同时隐藏默认的title，这样默认的可点击容器就不会生效：

Step(
  header: const BrandText(text: 'Name'),
  title: const SizedBox.shrink(), // 隐藏默认可点击的title容器
  content: Column(
    children: <Widget>[
      BrandTextInput(
          controller: _groupNameController,
          hintText: 'Name',
          iconName: Icons.label)
    ],
  ),
  isActive: _currentStep >= 0,
  state: _currentStep >= 0
      ? StepState.complete
      : StepState.disabled,
),

原理说明 #

Flutter默认的Step标题是被InkWell组件包裹的，即使onStepTapped为null，InkWell仍会响应点击并显示波纹。上面两种方法分别通过阻止事件传递和替换默认可点击容器的方式，解决了这个问题。

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