Flutter中如何实现父Widget透明而子Widget不透明？

问题分析 #

如果Container的透明度影响到了内部Text，大概率是错误使用了Opacity组件（它会对整个子树应用透明度），或是误解了Container的color属性作用。

正确解决方案 #

1. 容器完全透明 #

直接给Container的color设置Colors.transparent或const Color(0x00000000)，此时仅容器背景透明，内部Text不受任何影响：

import 'package:flutter/cupertino.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return CupertinoApp(
      home: Center(
        child: Container(
          color: Colors.transparent, // 或const Color(0x00000000)
          width: size.width,
          height: size.height,
          child: const Center(
            child: Text(
              'Hello, World!',
              style: TextStyle(
                  fontSize: 24,
                  color: CupertinoColors.activeBlue),
            ),
          ),
        ),
      ),
    );
  }
}

2. 容器半透明，子组件不透明 #

不要用Opacity包裹容器，而是直接给Container的color设置带透明度的颜色值（比如半透明黑色0x80000000），这样只有容器背景是半透明，内部Text保持原本的不透明状态：

import 'package:flutter/cupertino.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return CupertinoApp(
      home: Center(
        child: Container(
          color: const Color(0x80000000), // 半透明黑色背景
          width: size.width,
          height: size.height,
          child: const Center(
            child: Text(
              'Hello, World!',
              style: TextStyle(
                  fontSize: 24,
                  color: CupertinoColors.activeBlue),
            ),
          ),
        ),
      ),
    );
  }
}

错误写法的坑 #

如果使用Opacity组件包裹Container，会导致整个容器和子组件都变透明，这是因为Opacity是对整个子树的绘制结果应用透明度，而非仅容器背景：

// 错误写法：文本会跟着变透明
Opacity(
  opacity: 0.5,
  child: Container(
    child: Text('Hello, World!'),
  ),
)

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