考虑提前调整资产大小,提供cachewidth参数和cacheheight参数

发布于 2025-01-18 03:07:46 字数 1806 浏览 1 评论 0原文

我是 flutter 新手,我正在使用 flutter web。 并尝试将背景滤镜应用于图像。 这是我的代码:

import 'dart:ui';

import 'package:flutter/material.dart';

class WebsiteBackground extends StatelessWidget {
  const WebsiteBackground({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      decoration: const BoxDecoration(
        image: DecorationImage(
          fit: BoxFit.fill,
          image: AssetImage('assets/images/office1.jpeg'),
        ),
      ),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
        child: Container(
          decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
        ),
      ),
    );
  }
}

它一直为我吐出这个错误

 ======== Exception caught by painting library ======================================================
The following message was thrown while painting an image:
Image assets/images/office1.jpeg has a display size of 3024×1732 but a decode size of 6000×4000, which uses an additional 97721KB.

Consider resizing the asset ahead of time, supplying a cacheWidth parameter of 3024, a cacheHeight parameter of 1732, or using a ResizeImage.

====================================================================================================
[{"id":655,"result":{"value":"macOS","type":"Response","method":"ext.flutter.platformOverride"}}]

任何帮助将不胜感激,谢谢!

编辑:通过更改以下内容来修复对 @Ruchit' 评论的感谢

image: AssetImage('assets/images/office1.jpeg'),

image: ResizeImage(AssetImage('assets/images/office1.jpeg'),
              width: 1000, height: 1000),
        ),

I'm new to flutter, I'm using flutter web.
and trying to apply and backdrop filter to an image.
this is my code :

import 'dart:ui';

import 'package:flutter/material.dart';

class WebsiteBackground extends StatelessWidget {
  const WebsiteBackground({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      decoration: const BoxDecoration(
        image: DecorationImage(
          fit: BoxFit.fill,
          image: AssetImage('assets/images/office1.jpeg'),
        ),
      ),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
        child: Container(
          decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
        ),
      ),
    );
  }
}

It keeps spitting this error for me

 ======== Exception caught by painting library ======================================================
The following message was thrown while painting an image:
Image assets/images/office1.jpeg has a display size of 3024×1732 but a decode size of 6000×4000, which uses an additional 97721KB.

Consider resizing the asset ahead of time, supplying a cacheWidth parameter of 3024, a cacheHeight parameter of 1732, or using a ResizeImage.

====================================================================================================
[{"id":655,"result":{"value":"macOS","type":"Response","method":"ext.flutter.platformOverride"}}]

Any help would be appreciated, thank you!

Edit: Fixed thank to @Ruchit' comment by changing the following

image: AssetImage('assets/images/office1.jpeg'),

To

image: ResizeImage(AssetImage('assets/images/office1.jpeg'),
              width: 1000, height: 1000),
        ),

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

辞别 2025-01-25 03:07:46

这里我假设发生的情况是你有一个尺寸为 3024×1732 的图像,但你正在以 6000×4000 的尺寸渲染图像,这对于颤振来说是一项繁重的工作。因此 flutter 建议您尽早指定图像尺寸,以便它预渲染您的图像。

为此,您使用 ResizeImage() 类, https://api.flutter.dev /flutter/painting/ResizeImage-class.html

Here i am assuming what's happening is you have a image which dimensions are 3024×1732 but you are rendering you image at dimensions 6000×4000, which a heavy work for flutter. so flutter is suggesting you specify the image dimension early so it prerender your image.

For that you use ResizeImage() class, https://api.flutter.dev/flutter/painting/ResizeImage-class.html.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文