Consider resizing the asset ahead of time, supplying a cacheWidth parameter and cacheHeight parameter

114

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.

Share:
114
Abel
Author by

Abel

Updated on January 04, 2023

Comments

  • Abel
    Abel 10 months

    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),
            ),