Flutter 如何停止颜色过滤混合？

我按照的答案创建了一个带有透明孔的小部件。我现在的问题是，我在屏幕上放置的任何其他小部件也有混合效果。我会的 如果可能的话，情况可能并非如此。这是我的密码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Stack(
        fit: StackFit.expand,
        children: [
          Image.network(
            'https://wallpaperplay.com/walls/full/8/3/a/35405.jpg',
            fit: BoxFit.cover,
          ),
          ColorFiltered(
            colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.8),
                BlendMode.srcOut), // This one will create the magic
            child: Column(
              children: [
                Expanded(
                  child: Stack(
                    fit: StackFit.expand,
                    children: [
                      Container(
                        decoration: BoxDecoration(
                            color: Colors.black,
                            backgroundBlendMode: BlendMode
                                .dstOut), // This one will handle background + difference out
                      ),
                      Align(
                        alignment: Alignment.topCenter,
                        child: Container(
                          margin: const EdgeInsets.only(top: 80),
                          height: 200,
                          width: 200,
                          decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius: BorderRadius.circular(10),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Text("Test",
                    style: TextStyle(
                        color: Colors.red,
                        fontSize: 64,
                        fontWeight: FontWeight.bold)),
              ],
            ),
          ),
          Align(
            alignment: Alignment.topCenter,
            child: Container(
              margin: const EdgeInsets.only(top: 80),
              height: 200,
              width: 200,
              decoration: BoxDecoration(
                //color: Colors.red,
                borderRadius: BorderRadius.circular(10),
                border: Border.all(
                  color: Colors.red,
                  width: 2,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
),
主页：MyHomePage（标题：“颤振演示主页”），
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage（{Key？Key，this.title}）：超级（Key:Key）；
最终字符串？标题；
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
@凌驾
小部件构建（构建上下文）{
退货(
子：堆栈(
fit:StackFit.expand，
儿童：[
图像网络(
'https://wallpaperplay.com/walls/full/8/3/a/35405.jpg',
适合：BoxFit.cover，
),
彩色滤光(
colorFilter:colorFilter.mode（颜色为黑色，不透明度为0.8），
BlendMode.srcOut），//这一个将创建魔法
子：列(
儿童：[
扩大(
子：堆栈(
fit:StackFit.expand，
儿童：[
容器(
装饰：盒子装饰(
颜色：颜色，黑色，
背景BlendMode:BlendMode
.dstOut），//这个将处理背景+差异输出
),
对齐(
对齐：alignment.topCenter，
子：容器(
边距：仅限常量边集（顶部：80），
身高：200，
宽度：200，
装饰：盒子装饰(
颜色：颜色，红色，
边界半径：边界半径。圆形（10），
),
),
),
],
),
),
文本（“测试”，
样式：TextStyle(
颜色：颜色，红色，
字体大小：64，
fontWeight:fontWeight.bold），
],
),
),
对齐(
对齐：alignment.topCenter，
子：容器(
边距：仅限常量边集（顶部：80），
身高：200，
宽度：200，
装饰：盒子装饰(
//颜色：颜色，红色，
边界半径：边界半径。圆形（10），
边界：边界(
颜色：颜色，红色，
宽度：2，
),
),
),
),
],
),
);
}
}

结果是：

---

我希望文本小部件“Test”是红色的，并且不显示下面的图像放置在颜色过滤器上方的任何小部件都不应与背景混合。我曾尝试将文本包装在ColorFiltered小部件中，并将BlendMode设置为“src”，这将丢弃目标图像（如果我正确理解文档），但没有成功。

因为您使用的是堆栈，只需从ColoredFilter小部件中取出文本wsidget并将其放在小部件之后。这样它将显示在顶部

类似于此（未经测试）：

---

嘿，谢谢，这很有效。有趣的是，这实际上是我尝试的第一件事，但与我给出的示例代码不同，我没有使文本变大。所以我从来没有在屏幕左上角注意到它。再次感谢！伟大的很高兴这有帮助

Stack(
        fit: StackFit.expand,
        children: [
          Image.network(
            'https://wallpaperplay.com/walls/full/8/3/a/35405.jpg',
            fit: BoxFit.cover,
          ),
          ColorFiltered(
            colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.8),
                BlendMode.srcOut), // This one will create the magic
            child: Column(
              children: [
                Expanded(
                  child: Stack(
                    fit: StackFit.expand,
                    children: [
                      Container(
                        decoration: BoxDecoration(
                            color: Colors.black,
                            backgroundBlendMode: BlendMode
                                .dstOut), // This one will handle background + difference out
                      ),
                      Align(
                        alignment: Alignment.topCenter,
                        child: Container(
                          margin: const EdgeInsets.only(top: 80),
                          height: 200,
                          width: 200,
                          decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius: BorderRadius.circular(10),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                
              ],
            ),
          ),

// I just moved text widget here, you may need to apply any Position, align, padding, margin you wish, since it is now outside of the Expand widget
            Text("Test",
                    style: TextStyle(
                        color: Colors.red,
                        fontSize: 64,
                        fontWeight: FontWeight.bold)),

          Align(
            alignment: Alignment.topCenter,
            child: Container(
              margin: const EdgeInsets.only(top: 80),
              height: 200,
              width: 200,
              decoration: BoxDecoration(
                //color: Colors.red,
                borderRadius: BorderRadius.circular(10),
                border: Border.all(
                  color: Colors.red,
                  width: 2,
                ),
              ),
            ),
          ),
        ],
      ),