Flutter：SearchBar设置透明后仍残留底色，如何自定义颜色？

这个问题是因为SearchBar基于Material3设计，默认会自带一层surface tint（表面色调），就算你设置了backgroundColor，这个tint也会和自定义颜色叠加，导致出现残留的淡蓝色。

直接加个参数就能解决：

• 在SearchBar的参数里添加surfaceTintColor: const MaterialStatePropertyAll(Colors.transparent)，关闭默认的表面色调，这样自定义的背景色就能完全生效。

修改后的完整代码：

SearchBar(
  hintText: "Search",
  side: const MaterialStatePropertyAll(
      const BorderSide(color: Colors.black45)),
  shadowColor: const MaterialStatePropertyAll(Colors.transparent),
  overlayColor: const MaterialStatePropertyAll(Colors.transparent),
  backgroundColor: const MaterialStatePropertyAll(Colors.transparent),
  // 新增这行关闭surface tint
  surfaceTintColor: const MaterialStatePropertyAll(Colors.transparent),
  padding: const MaterialStatePropertyAll<EdgeInsets>(
      EdgeInsets.symmetric(horizontal: 16.0)),
  shape: const MaterialStatePropertyAll<RoundedRectangleBorder>(
      RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(10.0)))),
  onTap: () {
    // controller.openView();
  },
  onChanged: (e) {
    print(e);
    setState(() {
      _productList = searchProducts(e);
    });
  },
  leading: const Icon(Icons.search),
),

添加后，SearchBar的背景色就会和你设置的完全一致，不会再出现淡蓝色叠加的情况。

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