2

I'm trying to build a GridView in Flutter that consists of about 20-30 hi-res images, but running into memory issues (with memory usage in the android studio profiler reaching up-to 1.2g, eventually leading to a blackout).

Here's how I'm building the GridView,

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: new SafeArea(
        child: new Center(
          child: _imageSectionFutureBuilder(), // <-- The core component
        )),
  );
}

Widget _imageSectionFutureBuilder() {
    // Pseudocode is as follows,
    return new FutureBuilder(
        future: _FetchImageLocationsFromDb().then(results) {
        // Some data pre-processing
        preProcessData(results);
    },
    builder: (context, snapshot){
        if (snapshot.hasData) {
        // Here's where I'm building the GridView Builder.
        return new GridView.builder(
          gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          itemBuilder: (BuildContext context, int index) {
            return _getCurrentItem(snapshot.data[index]); // <-- This function loads a particular image
            }
          );
        } else {
        // Display a different widget saying no data is available.
          return _showNoDataWidget();
        }
      },
    );
  }

  Widget _getCurrentItem(String imagePath) {
    if (FileSystemEntity.typeSync(imagePath) != FileSystemEntityType.notFound) {
      File imageFile = new File(imagePath);
      return new Container(
          child: new Image.file(
            imageFile,
            fit: BoxFit.cover
          ) // <-- Box fitting to ensure specific height images to the gridview
      );
    }
  }

Apart from this implementation, I've also implemented a pagination mechanism to load just about 10 images at a time, then implemented the same thing using ListView.builder(), Even tried using GridView.count with cacheExtent set to 0 and addAutomaticKeepAlives to false, and in all the cases the memory issue still persists.

Anyway I can resolve this problem? Thank You.

agile telescope
  • 21
  • 1
  • 2
  • Why use high res images for the grid view? You're only going to need as many pixels fit the box. You could load the high res images on their own pages so to only use the memory needed for that specific image. – Adrian Murray Jun 07 '19 at 22:21
  • Thanks for the comment, the real usage of the gridview is to display the images taken by the user within the app, the low res images sure do hold up for a longer time before crashing, but I wanted to simulate the situation wherein say the Pixel camera is in use. How do I show a low res image of an image ?, or is there any way I can display around 10 images (of high res or low res) reliably at a time without crashing? – agile telescope Jun 08 '19 at 05:29
  • Any update? to improve? – Uttam Panchasara Jun 18 '20 at 08:21
  • Any Update?? I have the same problem? – AH Rasel Jun 28 '20 at 09:57
  • I recommend to generate low-resolution images (thumbnails). This problem is common (not only in mobile). – David SK Aug 10 '20 at 19:06

1 Answers1

0

Out of Memory error is thrown because the images being displayed and cached are full-sized images that are most likely resized (still takes a chunk of memory). I suggest generating thumbnails for the images that you'll display to save memory. There are a lot of helpful answers on this post that you can choose from.

Do you have a specific use case where you need to build a grid that displays images from local storage from scratch? If not, you may want to consider using image_picker plugin if you'll just use this feature as an image picker.

Omatt
  • 8,564
  • 2
  • 42
  • 144