Flutter. High GPU load with list of high resolution images - performance

Question

I've started to learn Flutter Framework and high GPU load when I'm trying to render a list of images which come from the network and have high resolution.
I've created test project on github for demo https://github.com/troublediehard/flutter_imageList_high_gpu_load
Am I doing anything wrong? Is there way to optimise images before render?
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Image loading test'),
),
body: buildLists(),
),
);
}
Widget buildLists() {
final imageUrls1 = [
'https://via.placeholder.com/2000',
'https://via.placeholder.com/2001',
'https://via.placeholder.com/2002',
];
final imageUrls2 = [
'https://via.placeholder.com/2003',
'https://via.placeholder.com/2004',
'https://via.placeholder.com/2005',
];
return Column(
children: <Widget>[
buildList(imageUrls1),
buildList(imageUrls2),
],
);
}
buildList(List<String> urls) {
return Container(
height: 150,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: urls.length,
itemBuilder: (context, index) {
return Image.network(
urls[index],
height: 130,
width: 130,
);
}),
);
}
}

Answer 1

There is an open issue in Flutter that characterizes this problem (see this github issue, in particular the links to three issues created from it) as of mid-January 2019. Hopefully it will be resolved sooner rather than later, as more people have been running into it, but I get the impression there's quite a lot of internal discussion around how to properly handle high-res images as it needs to be a flexible and robust solution that works for many use-cases. I believe the high GPU load you're seeing is probably the result of loading up the entire set of images into the GPUs texture buffer, although as a comment states you should expect much difference performance on a real device and in release mode.
The current advice from the flutter devs is to use lower resolution images (i.e. set up your server to serve thumbnails). While this is a slightly annoying response, it is actually something you should think about doing anyways as when you download high-res photos you're 1) using bandwidth, 2) using server memory/processing power, and 3) using additional phone memory (even if images are resized before showing this would still be true). Serving thumbnails should result in a better user experience, even if it means that the both the low-res and high res photos are downloaded separately (when the user taps on the thumbnail for example).