When building web apps using Flutter Web with CanvasKit as the rendering engine, you may run into an issue where some images fail to load, especially when they are hosted on external servers. This happens due to CORS (Cross-Origin Resource Sharing) restrictions enforced by web browsers.
Why Does This Happen?
When you try to load an image from a server that’s different from your website’s domain, the browser checks whether that server explicitly allows such access. If the server is not configured properly to allow cross-origin requests, the image will be blocked by the browser — and your app will appear broken or incomplete.
When Does It Affect You?
You are using CanvasKit instead of the HTML renderer.
You are loading images from external sources, not just Firebase Storage or your own domain.
You’re displaying images using Image.network() or similar widgets.
The Solution
Depending on where your images are hosted, there are two main solutions to fix this issue:
✅ If You’re Only Using Firebase Storage:
Select “None” for the CORS proxy setting and follow these steps in FlutterFlow’s official docs to enable public access:
✅ If You’re Using External Image URLs:
You need to set up a CORS Proxy, and FlutterFlow offers two options:
Deploy with Firebase
If you’re already using Firebase Hosting, you can easily deploy a ready-to-use proxy with one click from the FlutterFlow interface.
Custom Proxy URL
If you’re hosting elsewhere or have a specific proxy setup, you can specify your own proxy URL that FlutterFlow will use to load external images.
📘 Learn more from the official Flutter documentation:
Why This Matters
Without proper CORS configuration, images won’t load, breaking the visual experience.
This affects UI performance and user trust.
CanvasKit offers better rendering quality but comes with stricter cross-origin loading requirements.
Summary
Use “None” if loading only from Firebase Storage and follow the correct setup guide.
Use a CORS Proxy if you’re loading images from third-party servers.
Ensure everything is configured properly before deploying your app.
For more detailed help, check the full FlutterFlow documentation:
Happy Building
Jack