已设置elevation为0，如何移除Flutter AppBar下方的蓝色线条？

问题诊断 #

你尝试了修改背景色、设置elevation: 0等方法仍未解决，这是因为即使elevation为0，AppBar默认的shadowColor或surfaceTintColor（Flutter 3.10+）仍可能渲染出细微的线条，部分主题配置也会保留这个底线。

解决方案 #

针对你的代码，以下两种方法可以彻底移除线条：

方法1：清除阴影与表面着色

在AppBar中添加两个属性，直接禁用相关视觉效果：

appBar: AppBar(
  backgroundColor: kTextfieldBorderColor,
  elevation: 0,
  // 新增：清除阴影颜色
  shadowColor: Colors.transparent,
  // 新增：清除表面着色（适配Flutter 3.10+版本）
  surfaceTintColor: Colors.transparent,
  actions: <Widget>[
    IconButton(
        icon: Icon(Icons.close),
        onPressed: () {
          _auth.signOut();
          Navigator.pop(context);
        }),
  ],
  title: Text('⚡️Chat'),
),

方法2：自定义无底线AppBar（兜底方案）

如果方法1无效，直接用PreferredSize实现完全自定义的AppBar，从根源避免底线：

appBar: PreferredSize(
  preferredSize: const Size.fromHeight(kToolbarHeight),
  child: Container(
    color: kTextfieldBorderColor,
    padding: const EdgeInsets.symmetric(horizontal: 16),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        const Text('⚡️Chat', style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600)),
        IconButton(
          icon: const Icon(Icons.close),
          onPressed: () {
            _auth.signOut();
            Navigator.pop(context);
          },
        ),
      ],
    ),
  ),
),

注意事项 #

你代码中的kMessageContainerDecoration包含顶部蓝色边框，但该组件位于页面底部的输入区域，与AppBar下方的线条无关，无需修改。

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