[Question] How to change Loading Dialog onImageEditingComplete

[bacuong312]

When the callback onImageEditingComplete is called, the Loading Dialog is showed. How can I change that to a CircularProgressIndicator?

[hm21]

You can use customWidgets in the configuration settings to create your own dialog, as demonstrated below:

ProImageEditor.asset(
  ExampleConstants.of(context)!.demoAssetPath,
  key: editorKey,
  callbacks: ProImageEditorCallbacks(
    onImageEditingStarted: onImageEditingStarted,
    onImageEditingComplete: onImageEditingComplete,
    onCloseEditor: onCloseEditor,
  ),
  configs: ProImageEditorConfigs(
    customWidgets: ImageEditorCustomWidgets(
      loadingDialog: (message, configs) => Stack(
        children: [
          ModalBarrier(
            onDismiss: kDebugMode ? LoadingDialog.instance.hide : null,
            color: Colors.black54,
            dismissible: kDebugMode,
          ),
          Center(
            child: Theme(
              data: ThemeData.dark(),
              child: AlertDialog(
                contentPadding: const EdgeInsets.symmetric(
                    vertical: 16, horizontal: 20),
                content: ConstrainedBox(
                  constraints: const BoxConstraints(maxWidth: 500),
                  child: Padding(
                    padding: const EdgeInsets.only(top: 3.0),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Padding(
                          padding: const EdgeInsets.only(right: 20.0),
                          child: SizedBox(
                            height: 40,
                            width: 40,
                            child: FittedBox(
                             /// TODO: replace the CircularProgressIndicator below
                              child: PlatformCircularProgressIndicator(
                                configs: configs,
                              ),
                            ),
                          ),
                        ),
                        Expanded(
                          child: Text(
                            message,
                            style: platformTextStyle(
                              context,
                              configs.designMode,
                            ).copyWith(
                              fontSize: 16,
                              color: configs.imageEditorTheme
                                  .loadingDialogTheme.textColor,
                            ),
                            textAlign: TextAlign.start,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  ),
);

[bacuong312]

Thanks for your suggestion, it's worked.