Flutter CircularProgressIndicator() not smooth when image is compressing

Question

So I have a CircularProgressIndicator that shows up in alert dialog while the app is compressing an array of images using copyResize, and pop the alert dialog when compression is done. However, while the image compression is ongoing, the indicator animation seems laggy while rotating. Is there any way I can solve this?

Codes to compress image

Future getGalleryFiles() async {
   galleryFilesToUpload = [];
   Directory tempDir = await getTemporaryDirectory();
   String tempPath = tempDir.path;
   if (assets.isNotEmpty) {
     for (int i = 2; i < 12; i++) {
       Future<File> getFile() {
         return assets[i].file;
       }

       File temp = await getFile();
       img.Image image = img.decodeImage(temp.readAsBytesSync());
       img.Image compressed = img.copyResize(image, height: 500);
       File compressedFile = File('$tempPath/image_$i.png')
         ..writeAsBytesSync(img.encodePng(compressed), flush: true);
       galleryFilesToUpload.add(compressedFile);
     }
   }
   return galleryFilesToUpload;
 }

Codes to show and hide loading indicator

RaisedButton(
   onPressed: (){
       showLoadingIndicator();
       getGalleryFiles().then((value){
         if(value.isNotEmpty){
            stopLoadingIndicator();
         }
     });
   },
   child: Text('Compress Image')
)

Codes for custom widget loading indicator

import 'package:flutter/material.dart';

Widget _buildLoadingIndicator() {
  return WillPopScope(
    onWillPop: () => Future.value(false),
    child: const Center(
      child: CircularProgressIndicator(),
    ),
  );
}

Widget _buildMaterialDialogTransitions(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child) {
  return FadeTransition(
    opacity: CurvedAnimation(
      parent: animation,
      curve: Curves.easeOut,
    ),
    child: child,
  );
}

Future<T> showLoadingIndicator<T>({
  @required BuildContext context,
  bool barrierDismissible = false,
  bool useRootNavigator = true,
}) {
  assert(useRootNavigator != null);
  assert(debugCheckHasMaterialLocalizations(context));

  final ThemeData theme = Theme.of(context, shadowThemeOnly: true);
  return showGeneralDialog(
    context: context,
    pageBuilder: (BuildContext buildContext, Animation<double> animation,
        Animation<double> secondaryAnimation) {
      final Widget pageChild = _buildLoadingIndicator();
      return SafeArea(
        child: Builder(builder: (BuildContext context) {
          return theme != null
              ? Theme(data: theme, child: pageChild)
              : pageChild;
        }),
      );
    },
    barrierDismissible: barrierDismissible,
    barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
    barrierColor: Colors.black54,
    transitionDuration: const Duration(milliseconds: 150),
    transitionBuilder: _buildMaterialDialogTransitions,
    useRootNavigator: useRootNavigator,
  );
}

void stopLoadingIndicator(BuildContext context) {
  Navigator.pop(context);
}

question from:https://stackoverflow.com/questions/65868792/flutter-circularprogressindicator-not-smooth-when-image-is-compressing

Answer 1

Waitting for answers