Flutter app crashing when trying to display more than 10 images

Question

I am writing my first Flutter app. The app allows the user to take multiple images (from 1 to 50+), and displays each image on the screen all at once using the ListView.

The issue I am having is, the app crashes after roughly 10/12 pictures on the Samsung SM A520F, am guessing this is due to the fact that this is not a very powerful device.

Is there a way I can display the thumbnail of the image instead of loading the full size image?

Error message: I don't actually get any error messages, the app just seems to restart!

Here is my code

import 'package:flutter/material.dart';
import 'package:myapp/utilities/app_constants.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
import 'package:gallery_saver/gallery_saver.dart';

class FormCameraField extends StatefulWidget {
  final InputDecoration decorations;
  final Map field;
  // functions
  final Function onSaved;
  final Function onFieldSubmitted;

  FormCameraField({
    this.decorations,
    @required this.field,
    @required this.onSaved,
    @required this.onFieldSubmitted,
  });

  @override
  _FormCameraFieldState createState() => _FormCameraFieldState();
}

class _FormCameraFieldState extends State<FormCameraField> {
  List<File> images = [];

  Future<void> _takePhoto(ImageSource source) async {
    ImagePicker.pickImage(source: source, imageQuality: 90).then(
      (File recordedImage) async {
        if (recordedImage != null && recordedImage.path != null) {
          try {
            // store image to device gallery
            if (widget.field["StoreCaptureToDevice"] == true) {
              GallerySaver.saveImage(recordedImage.path,
                  albumName: kAppName.replaceAll(" ", "_"));
            }

            setState(() {
              images.add(recordedImage);
            });
          } catch (e) {
            print("ERROR SAVING THE FILE TO GALLERY");
            print(e);
          }
        }
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Expanded(
              child: MaterialButton(
                child: Text("Take Photo"),
                onPressed: () async {
                  await _takePhoto(ImageSource.camera);
                },
              ),
            ),
            Expanded(
              child: MaterialButton(
                child: Text("Select Photo"),
                onPressed: () async {
                  await _takePhoto(ImageSource.gallery);
                },
              ),
            ),
          ],
        ),
        ListView.builder(
          shrinkWrap: true,
          physics: ClampingScrollPhysics(),
          itemCount: images.length,
          itemBuilder: (BuildContext context, index) {
            return Container(
              child: Image.file(
                images[index],
              ),
            );
          },
        )
      ],
    );
  }
}

Answer 1

I faced the same problem.

This is because some images cause the crash of Flutter engine. The final issue is here https://github.com/flutter/flutter/issues/73767

The example image that always causes crash on ios is here https://github.com/flutter/flutter/issues/73932

So, waiting for the Flutter team fixes the bug.

Answer 2

Having a similiar problem. Replacing my images with smaller (~50kb) ones seems to be working fine so i think you are right, loading all those images on less powerfull devices seems to be the problem. There is an image package on pub.dev that should do the trick. I am using Firebase so i will lean more towards their new resize image extension. Goodluck and let us know if it works

Answer 3

I have the same problem. It's actually a bug in flutter. They are currently working to fix the bug in the next stable releases.