如何在有色Container上方实现文本颜色透明效果

用Flutter的Stack配合BlendMask就能实现这个需求，核心是让文本区域挖空有色容器，透出下方内容，代码示例如下：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.deepPurple[900], // 底层背景色
        body: Center(
          child: SizedBox(
            width: 320,
            height: 160,
            child: Stack(
              fit: StackFit.expand,
              children: [
                // 有色容器层
                Container(color: Colors.white.withOpacity(0.8)),
                // 透明文本层
                BlendMask(
                  blendMode: BlendMode.dstOut,
                  child: const Center(
                    child: Text(
                      "WIDGET TEXT",
                      style: TextStyle(
                        fontSize: 36,
                        fontWeight: FontWeight.w900,
                        color: Colors.black, // 颜色不影响，仅作为BlendMode的载体
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

关键说明 #

• BlendMode.dstOut是核心：它会让文本所在区域清除掉下方的有色容器，从而透出最底层的背景
• 如果需要透出的是图片而非纯色背景，把Scaffold的backgroundColor换成Image组件即可

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