Flutter中如何移除SizedBox背景色及消除ElevatedButton默认背景色

一、移除SizedBox的背景色 #

首先明确：SizedBox本身没有默认背景色，你看到的背景其实是父组件（比如Wrap、SingleChildScrollView或者页面Scaffold）的背景透过来的。

如果是你之前给SizedBox手动加了背景装饰（比如BoxDecoration(color: ...)），直接删掉对应的decoration属性就行。举个例子：

SizedBox(
  width: double.infinity,
  height: 50,
  // 删掉下面这一行即可移除背景
  // decoration: BoxDecoration(color: Colors.grey),
)

删掉后SizedBox就会完全透明，不会显示任何背景。

二、清除ElevatedButton的默认蓝/灰色背景 #

ElevatedButton的默认背景色来自它自带的Material组件和内置状态样式（比如未点击的蓝色、按下时的灰色），要彻底清除，有两种可行方案：

方案1：修改ElevatedButton样式 #

在styleFrom里把背景、阴影、状态色都设为透明，同时去掉默认内边距让图片填满按钮：

SizedBox(
  height: 80,
  width: 80,
  child: ElevatedButton(
    onPressed: () {
      onGoogleSignIn(context);
    },
    style: ElevatedButton.styleFrom(
      primary: Colors.transparent, // 基础背景透明
      shadowColor: Colors.transparent, // 移除阴影
      elevation: 0, // 取消 elevation 凸起效果
      padding: EdgeInsets.zero, // 去掉按钮默认内边距
      onPrimary: Colors.transparent, // 按下等状态的背景透明
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.zero), // 可根据图片形状调整圆角
    ),
    child: Image.asset('images/gm.png'),
  ),
)

方案2：用InkWell替代ElevatedButton（更轻量） #

如果不需要ElevatedButton的凸起特性，直接用InkWell包裹图片更简单，完全没有默认背景：

SizedBox(
  height: 80,
  width: 80,
  child: InkWell(
    onTap: () {
      onGoogleSignIn(context);
    },
    child: Image.asset('images/gm.png'),
  ),
)

内容的提问来源于stack exchange，提问作者EMahan K