Flutter web app hangs on large image load with Image.network() - any workarounds?
I'm upgrading from an older version and I'm working with a important performance scenario with my Flutter web app (Flutter 3.7.0). When I attempt to load a large image using `Image.network()`, the entire app hangs for a few seconds, which leads to a poor user experience. Here's a simplified version of the code that's causing the question: ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Image Load Test')), body: Center( child: Image.network('https://example.com/large-image.jpg'), ), ), ); } } ``` I’ve tried using a placeholder image while the large image is loading, but the scenario continues. The placeholder shows up, but as soon as the large image starts loading, the app freezes momentarily. I also implemented a `FutureBuilder`, but it didn't seem to mitigate the freezing either: ```dart FutureBuilder( future: precacheImage(NetworkImage('https://example.com/large-image.jpg'), context), builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.done) { return Image.network('https://example.com/large-image.jpg'); } return CircularProgressIndicator(); }, ), ``` Unfortunately, this still results in noticeable performance optimization. I suspect it could be a rendering scenario or the way Flutter handles image decoding. Is there an alternative approach or a best practice to load large images in a Flutter web app without these performance hits? Any insights or recommendations would be greatly appreciated! The project is a web app built with Dart. What would be the recommended way to handle this? For reference, this is a production application. Is this even possible?