Flutter中移除ExpansionTile展开时的灰色分隔线问题

需求：移除Flutter中ExpansionTile展开状态下，标题区域与展开内容之间的灰色分隔线。

尝试过的方法均无效：

• 通过Theme设置dividerColor属性，仅影响外部独立的Divider组件，无法作用于ExpansionTile内部的目标分隔线
• 尝试两种不同的ExpansionTile实现写法，问题依旧存在

相关代码示例：

// 第一种写法：Theme包裹的ExpansionTile
return Theme(
  data: Theme.of(context).copyWith(dividerColor: Colors.yellow),
  child: Column(
    children: [
      ExpansionTile(
        shape: Border.all(color: Colors.yellow),
        backgroundColor: CoreColor.neutral0,
        collapsedBackgroundColor: CoreColor.neutral0,
        tilePadding: const EdgeInsets.only(left: 16, right: 16, bottom: 8),
        title: Text(
          faq.question!,
          style: CoreTextStyle.mRegular.copyWith(color: CoreColor.neutral900),
        ),
        trailing: state.faq![index].isExpanded
            ? Assets.coreSvgs.downwardArrow.svg()
            : Assets.coreSvgs.forwardArrow.svg(),
        onExpansionChanged: (value) {
          setState(() {
            state.faq![index].isExpanded = value;
          });
        },
        children: [
          Padding(
            padding: const EdgeInsets.only(left: 16, right: 16, bottom: 8),
            child: Text(
              faq.answer!,
              style: CoreTextStyle.mRegular.copyWith(color: CoreColor.neutral600),
            ),
          ),
        ],
      ),
      const Divider(
        color: CoreColor.dangerMain,
        height: 0,
      ),
    ],
  ),
);

// 第二种写法：直接使用ExpansionTile
return ExpansionTile(
  backgroundColor: CoreColor.neutral0,
  collapsedBackgroundColor: CoreColor.neutral0,
  tilePadding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
  shape: Border.all(color: Colors.red),
  onExpansionChanged: (value) {
    setState(() {
      state.faq![index].isExpanded = value;
    });
  },
  trailing: state.faq![index].isExpanded
      ? Assets.coreSvgs.downwardArrow.svg()
      : Assets.coreSvgs.forwardArrow.svg(),
  title: Text(
    faq.question!,
    style: CoreTextStyle.mRegular.copyWith(color: CoreColor.neutral900),
  ),
  children: [
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Text(
        faq.answer!,
        style: CoreTextStyle.mRegular.copyWith(color: CoreColor.neutral600),
      ),
    ),
  ],
);

问题截图：

可行解决方案 #

1. 直接设置ExpansionTile的dividerColor为透明

ExpansionTile自带dividerColor属性，专门控制标题与展开内容之间的分隔线颜色，设置为透明即可隐藏：

ExpansionTile(
  dividerColor: Colors.transparent, // 关键配置
  // 其余原有配置保持不变
  backgroundColor: CoreColor.neutral0,
  collapsedBackgroundColor: CoreColor.neutral0,
  tilePadding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
  shape: Border.all(color: Colors.red),
  onExpansionChanged: (value) {
    setState(() {
      state.faq![index].isExpanded = value;
    });
  },
  trailing: state.faq![index].isExpanded
      ? Assets.coreSvgs.downwardArrow.svg()
      : Assets.coreSvgs.forwardArrow.svg(),
  title: Text(
    faq.question!,
    style: CoreTextStyle.mRegular.copyWith(color: CoreColor.neutral900),
  ),
  children: [
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Text(
        faq.answer!,
        style: CoreTextStyle.mRegular.copyWith(color: CoreColor.neutral600),
      ),
    ),
  ],
);

2. 局部Theme控制（批量处理场景）

如果需要给多个ExpansionTile统一设置，可通过Theme包裹并配置DividerThemeData：

return Theme(
  data: Theme.of(context).copyWith(
    dividerTheme: const DividerThemeData(color: Colors.transparent),
  ),
  child: ExpansionTile(
    // 你的ExpansionTile配置
  ),
);

3. 自定义展开面板（完全可控）

若上述方法仍不满足需求，可放弃使用原生ExpansionTile，用AnimatedContainer或SizeTransition实现自定义展开动画，完全控制UI元素，彻底避免默认分隔线。

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