Flutter中如何调整图片宽度 解决图片撑满手机屏幕问题

图片撑满全屏是布局属性冲突+语法错误共同导致的：

• 外层Positioned同时设置了left: 0、right: 0，这个约束会强制子组件撑满父Stack的整个横向宽度，你在子组件写的width:100会被这个横向拉伸约束直接覆盖。
• 内层Stack设置了fit: StackFit.expand，该属性会强制Stack的所有子组件撑满Stack本身的可用空间，你写在Container、Image上的宽高50的设置都会失效。
• 代码存在括号未闭合的语法问题，Container、ClipOval、Image、Stack层级的闭合括号缺失，会导致布局渲染逻辑异常。

按以下步骤调整即可：

1. 移除Positioned的left: 0、right: 0属性，如果需要头像水平居中，在外层包裹Center组件实现居中效果，不要让Positioned直接拉伸子组件。
2. 移除Stack的fit: StackFit.expand属性，使用默认的StackFit.loose即可，这样子组件自定义的宽高才能生效。
3. 补全所有缺失的闭合括号，修正语法结构。

修复后的可运行代码：

class _SignupProfileImageState extends State<SignupProfileImage> {
  bool isUploadImage = false;
  var selectedImage;

  @override
  Widget build(BuildContext context) {
    return Positioned(
      top: 140,
      child: Center(
        child: SizedBox(
          height: 100,
          width: 100,
          child: Stack(
            clipBehavior: Clip.none,
            children: [
              Container(
                width: 50,
                child: ClipOval(
                  child: Image.asset(
                    'assets/face.jpg',
                    height: 50.0,
                    width: 50.0,
                    fit: BoxFit.fill,
                  ),
                ),
              ),
              // 其他Stack子组件（如上传按钮）可在此处添加
            ],
          ),
        ),
      ),
    );
  }
}

如果不需要100100的Stack占位，直接要5050的圆形头像，还可以把外层多余的SizedBox、Container都简化，直接给ClipOval设置宽高即可。

内容的提问来源于stack exchange，提问作者황희윤