Flutter Image.memory() loading animation with slow large files

Question

I am fetching an image from the gallery and displaying it in my cropper with Image.memory(). But sometimes (with large files) it takes a few seconds for the image to show. I want to show a loading animation but how do I detect when it is loading or finished? There is no loadingBuilder like for Image.network(). Any ideas?

final XFile? image = await _picker.pickImage(source: ImageSource.gallery);

Image.memory(_imageToCrop!)

score 3 · Answer 1 · answered Mar 10 '22 at 21:24

Like Ankit Kumar Maurya said I studied the frameBuilder documentation and this solved my issue:

 Image.memory(
                      _imageToCrop!,
                      frameBuilder:
                          ((context, child, frame, wasSynchronouslyLoaded) {
                        if (wasSynchronouslyLoaded) return child;
                        return AnimatedSwitcher(
                          duration: const Duration(milliseconds: 200),
                          child: frame != null
                              ? child
                              : SizedBox(
                                height: 60,
                                width: 60,
                                child: CircularProgressIndicator(
                                    strokeWidth: 6),
                              ),
                        );
                      }),
                    ),

Ankit Kumar Maurya · Answer 2 · 2022-03-09T14:57:36.020

You should once check this documentation provided by flutter frame_builder. You could also use frameBuilder for your requirement.

May be my code will help you:-

import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

void main() {
  runApp(const MaterialApp(
    title: 'Temp',
    home: const MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool loading = false;
  late Uint8List image;
  XFile? file = null;

  ImagePicker imagePicker = ImagePicker();

  Future<void> pickImage() async {
    print('starting');
    setState(() {
      loading = true;
    });

    file = await imagePicker.pickImage(source: ImageSource.gallery);
    print('file');
    if(file != null){
      print(file.toString());
      image = await file!.readAsBytes();
    }

    setState(() {
      loading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Image Picker'),
      ),
      body: loading
          ? Container(
              child: const Center(child: CircularProgressIndicator()),
            )
          : file != null?Container(child: Center(child: Image.memory(image),)) : Container(
            child: const Center(child: Text('Pick an Image')),
          ),
          floatingActionButton: FloatingActionButton(
            child: const Icon(
              Icons.image,
            ),
            onPressed: (){
              pickImage();
            }),
    );
  }
}

Short Description - my code will fetch an image from the system and then show … I have used a loading widget while the image is fetching and being converted to bytes.

It might be helpful if you share your logic here to figure out the main problem(if missing any thing).

Yes sure, but readAsBytes seems to be executed almost instantly the issue is loading the image to memory. In Image.memory. — AntEdote, Mar 10 '22 at 21:18

score 0 · Answer 3 · answered Mar 09 '22 at 14:51

you can maintain an enum for this,

enum State {idle, loading, done ,error}

now,

State fetchState = State.idle

void fetch()async{
      setState((){
         fetchState = State.loading;
        });

     try{
      final XFile? image = await _picker.pickImage(source: 
            ImageSource.gallery);
      Image.memory(_imageToCrop!);

      setState((){
        fetchState = State.done;
      });

    }catch(e){
    setState((){
     fetchState = State.error;
     });
  }
}

Now use this states in your widget tree to show loader when state is loading.

you can use a single boolean variable as said in other answer but with this method you can catch errors at run time. You can use this method for api calls also.

Yes sure, but the issue is that Image.memory loads the image asynchronously. So, in this case, the image animation would finish almost immediately and the image would not be loaded. — AntEdote, Mar 10 '22 at 21:16

Flutter Image.memory() loading animation with slow large files

3 Answers3