Flutter如何仅设置Container为透明色且不影响内部TextField显示

解决方法 #

你只需要给目标Container组件添加color: Colors.transparent配置即可，该操作完全不会影响内部TextField的显示效果。

修改后的代码示例：

Material(
  elevation: 30.0,
  shadowColor: Colors.grey,
  child: Container(            
    width: 300,
    color: Colors.transparent, // 仅新增这行即可实现Container透明
    child: SingleChildScrollView(
      child: TextField(
        controller: controller,
        style: TextStyle(
          color: Colors.black,
          fontSize: 30,
        ),
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          hintText: 'hinttText',
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10.0),
            borderSide: BorderSide(
              color: Colors.black,
              width: 2.0,
            ),
          ),
        ),
      ),
    ),
  ),
)

补充说明 #

• Container的color属性仅控制自身的背景填充，不会向下传递给子组件，因此设置透明后内部TextField会完全按照自身的decoration、style配置正常渲染，不会出现样式变动。
• 如果设置后仍然看到非透明背景，说明展示的是外层Material组件的默认主题背景色，如果你需要让整个区域都透明，可额外给Material组件也添加color: Colors.transparent配置即可，该操作同样不会影响TextField的显示效果。

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