Flutter. High GPU load with list of high resolution images

2,183

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

Share:
2,183
Dima Portenko
Author by

Dima Portenko

Open-minded software developer :) My YouTube channel - https://www.youtube.com/channel/UCReKeeIMZywvQoaZPZKzQbQ/

Updated on December 08, 2022

Comments

  • Dima Portenko
    Dima Portenko over 1 year

    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.

    enter image description here

    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,
            );
          }),
        );
      }
    }
    
  • Dima Portenko
    Dima Portenko about 5 years
    yep, it is working just fine in release mode on the iOS device. But still, it is very poor developer experience to have high load in debug for such simple task. Dev expirience is one of the key feature of Flutter, so I hope it will be fixed.