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

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),
                              ),
                        );
                      }),
                    ),

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

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.