Flutter - 我应该如何确定图像的大小？答案

【问题标题】：Flutter - How should I determine the size of the image?Flutter - 我应该如何确定图像的大小？
【发布时间】：2021-10-18 20:07:46
【问题描述】：

如何确定图片的大小？例如，我将使用一个图标进行底部导航。图标的大小应该是 20x20 吗？还是 25x25？我怎么知道这个？或者假设我要使用背景图像，它应该是 400x800 还是 600x1200 的大小。最佳优化内存管理和应用程序大小的标准大小应该是多少

默认不支持使用 SVG。所以我正在寻找一种方法来最好地优化 PNG 或 JPG。我还将图像分为 1.5x、2.0x、3.0x、4.0x 和原始图像。但我无法准确确定原始图像的大小。

例如，调试控制台给出如下错误：

════════ Exception caught by painting library ══════════════════════════════════
Image assets/images/2.0x/login_picture.png has a display size of 414×516 but a decode size of 828×707, which uses an additional 1936KB.

Consider resizing the asset ahead of time, supplying a cacheWidth parameter of 414, a cacheHeight parameter of 516, or using a ResizeImage.
════════════════════════════════════════════════════════════════════════════════

【问题讨论】：

flutter.dev/docs/development/ui/layout/adaptive-responsive。您正在寻找的是使应用程序具有响应性，这意味着您所说的这些尺寸取决于设备。您可以在链接中了解更多信息。
这不是我想要的。我的意思是图像的尺寸。

标签： android ios image flutter flutter-layout

【解决方案1】：

嗯，使用 1.0x、2.0x 和 3.0x 图像是一个好习惯，你应该让你的设计师给你这些尺寸的 .png 图像，或者去 figma 或 photoshop 并导出 2.0x 和 3.0 x 资产

对于调试错误，您应该使用fit: BoxFit.fill 像这里

Scaffold(
  backgroundColor: AppColor.backgroundPrimaryColor,
  body: Container(
    margin: const EdgeInsets.only(top: 100),
    decoration: BoxDecoration(
      image: DecorationImage(
          fit: BoxFit.fill, //Important
          image: AssetImage(BackgroundImages.backgroundShapes)
      ),
    ),
  )
);

【讨论】：