Flutter中如何避免Backdrop的模糊效果和TabBar的飞溅效果冲突？

Posted 2023-02-23

【中文标题】Flutter中如何避免Backdrop的模糊效果和TabBar的飞溅效果冲突？

【英文标题】：How to avoid the conflict between the blur effect of Backdrop and the splash effect of TabBar in Flutter?

【发布时间】：2021-06-27 07:18:56

【问题描述】：

class Sample extends StatelessWidget 
  List<Tab> get tabs => ["Intro", "Flow", "Market"]
      .map((e) => Tab(
            text: e,
          ))
      .toList(growable: false);

  @override
  Widget build(BuildContext context) 
    return Layout(
      title: "Title",
      body: CustomScrollView(
        slivers: [
          _buildHeader(),
          _buildStickyBar(),
        ],
      ),
    );
  

  Widget _buildHeader() 
    return SliverToBoxAdapter(
      child: Stack(
        children: [
          Positioned(child: Image.assets("some.jpg"), top: 40, bottom: -20, right: -20),
          BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 40.0, sigmaY: 40.0),
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                color: Colors.white.withOpacity(0.06),
              ),
              child: Text("effect")),
          ),
        ],
      ),
    );
  

  Widget _buildStickyBar() 
    return SliverPersistentHeader(
      pinned: true,
      floating: true,
      delegate: SliverPersistentHeaderEx(//some simple impl
        minHeight: 32,
        maxHeight: 32,
        child: TabBar(
          controller: tabController, //it's not the point
          tabs: tabs),
      ),
    );
  

使用的主题是黑色主题，飞溅是白色的。

所以，blur 效果和 splash 效果会发生冲突。详细来说，TabBar 的飞溅效果会传播到上层小部件（本例中为堆栈）。如果去掉withOpacity，模糊效果会丢失，但扩散问题会解决。

我想保留这些效果。如何限制 TabBar 的 splash 效果只出现在 TabBar 中？

effect

【参考方案1】：

如文档所述：

过滤器将应用于其父级内的所有区域或 祖先小部件的剪辑。如果没有剪辑，将应用过滤器 到全屏。

尝试用 ClipRect 包装你的 BackdropFilter

ClipRect(
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 40.0, sigmaY: 40.0),
          child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                color: Colors.white.withOpacity(0.06),
              ),
              child: Text("effect")),
        ),
      ),

【讨论】：

这样做并没有改变任何东西。相同的行为