Flutter中如何将横向拍摄图片在竖屏模式下正常显示？

你遇到的拉伸问题是因为使用了BoxFit.fill，这个属性会强制图片完全填满容器，完全忽略图片的原始宽高比，导致横向图片在竖屏容器中变形。以下是几种可行的解决方法：

方案1：按比例填充，裁剪多余部分 #

将fit属性改为BoxFit.cover，它会按照图片的原始比例缩放，让图片填满容器，超出容器的部分自动裁剪，保证图片不会变形：

SizedBox(
  height: 230.h,
  width: double.infinity,
  child: Image.file(
    File(image!.path),
    fit: BoxFit.cover,
  ),
)

方案2：完整显示图片，保留空白区域 #

如果不想裁剪图片，使用BoxFit.contain，它会按比例缩放图片，让图片完整显示在容器内，容器剩余的区域会留空白：

SizedBox(
  height: 230.h,
  width: double.infinity,
  child: Image.file(
    File(image!.path),
    fit: BoxFit.contain,
    alignment: Alignment.center, // 可根据需求调整对齐方式，默认居中
  ),
)

方案3：自适应容器宽度（推荐） #

如果希望固定图片高度为230.h，宽度根据图片原始比例自动适配，可以去掉width: double.infinity，改用BoxFit.fitHeight：

SizedBox(
  height: 230.h,
  child: Image.file(
    File(image!.path),
    fit: BoxFit.fitHeight,
  ),
)

或者提前获取图片的宽高比，用AspectRatio组件包裹，更精准控制：

// 先通过ImageProvider获取图片宽高
final imageProvider = FileImage(File(image!.path));
Completer<ui.Image> completer = Completer();
imageProvider.resolve(const ImageConfiguration()).addListener(
  ImageStreamListener((ImageInfo info, bool _) {
    completer.complete(info.image);
  }),
);
ui.Image img = await completer.future;

// 然后使用AspectRatio
AspectRatio(
  aspectRatio: img.width / img.height,
  child: Image.file(
    File(image!.path),
    fit: BoxFit.fill,
  ),
)

内容的提问来源于stack exchange，提问作者wolfsoft Developer