How can I get the transformconfigs with my editorKey? I basically want to switch from croproateeditor to filtereditor and maintain the cropped image

[ember11498]

So I know onDone: (transformations, fitToScreenFactor) {} this gives us the transformationconfigs but there is the problem that this pop the page, so my initial code doesnt work:

            onDone: (transformations, fitToScreenFactor) {
              context.pushNamed(
                  Routes.myfiltereditor.name,
                  extra: {
                    'image_bloc': widget.imageBloc,
                    'transformations':
                        transformations
                  });

this is not pushing the filtereditor its just poping the page.

So i am trying to create my own ReactiveCustomAppBar in order to create an icon which can push the filtereditor but now i dont know how to get the transformationconfigs

[hm21]

To retrieve the current transform configurations, you can use a GlobalKey to access the editor as shown below.

/// Create a GlobalKey
final _cropRotateEditorKey = GlobalKey<CropRotateEditorState>();

/// Read the active transformConfigs
_cropRotateEditorKey.currentState!.transformConfigs ?? TransformConfigs.empty();

/// Add the GlobalKey to your editor
return CropRotateEditor.asset(
    ExampleConstants.of(context)!.demoAssetPath,
    key: _cropRotateEditorKey,

Btw if this answers your question and your other question is resolved, I would appreciate it if you could click 'Mark as answer' on the post that you believe resolves it. This will help other users quickly find the solution when they encounter the same question.

[ember11498]

@hm21 Am I doing something wrong when setting up the editorKey? because when i do editorKey.currentState!.transformConfigs and then i print its map i am getting {} which is basically an empty map.

and i have cropped, fliped, rotated the image in the croprotateeditor before tapping on the button which gets the transformationConfigs and print

    class MyCropEditor extends StatefulWidget {
      final SelectedAssetBloc imageBloc;

      const MyCropEditor({super.key, required this.imageBloc});

      @override
      State<MyCropEditor> createState() => _MyCropEditorState();
    }

    class _MyCropEditorState extends State<MyCropEditor> {
      late final GlobalKey<CropRotateEditorState> editorKey;

      @override
      void initState() {
        super.initState();
        editorKey = GlobalKey<CropRotateEditorState>();
      }

      @override
      Widget build(BuildContext context) {
        return BlocProvider.value(
          value: widget.imageBloc,
          child: Builder(
            builder: (context) {
              return BlocBuilder<SelectedAssetBloc, SelectedAssetState>(
                builder: (context, state) {
                  return CropRotateEditor.file(
                    state.file!,
                    key: editorKey,
                    initConfigs: CropRotateEditorInitConfigs(
                      theme: Theme.of(context),
                      configs: ProImageEditorConfigs(
                        designMode: platformDesignMode,
                        imageEditorTheme: const ImageEditorTheme(
                          uiOverlayStyle: SystemUiOverlayStyle(
                            statusBarColor: Colors.black,
                            statusBarIconBrightness: Brightness.light,
                            systemNavigationBarIconBrightness: Brightness.light,
                            statusBarBrightness: Brightness.dark,
                            systemNavigationBarColor: Colors.black,
                          ),
                        ),
                        cropRotateEditorConfigs: const CropRotateEditorConfigs(
                          //roundCropper: true,
                          canChangeAspectRatio: false,
                          initAspectRatio: 1,
                        ),
                        customWidgets: ImageEditorCustomWidgets(
                          cropRotateEditor: CustomWidgetsCropRotateEditor(
                            appBar: (editorState, rebuildStream) {
                              return ReactiveCustomAppbar(
                                stream: rebuildStream,
                                builder: (context) {
                                  return PreferredSize(
                                    preferredSize: const Size(double.infinity, 100),
                                    child: ColoredBox(
                                      color: Colors.black,
                                      child: SafeArea(
                                        child: Padding(
                                          padding: const EdgeInsets.symmetric(
                                            horizontal: Spacing.large,
                                            vertical: Spacing.small,
                                          ),
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.spaceBetween,
                                            children: [
                                              GestureDetector(
                                                onTap: () => context.pop(),
                                                child: const FaIcon(
                                                  FontAwesomeIcons.arrowLeftLong,
                                                  color: Colors.white,
                                                ),
                                              ),
                                              GestureDetector(
                                                onTap: () {
                                                  final transformations = editorKey
                                                          .currentState!
                                                          .transformConfigs ??
                                                      TransformConfigs.empty();
                                                  print(
                                                      'transformations:${transformations.toMap()}');
                                                },
                                                child: FaIcon(
                                                  FontAwesomeIcons.solidCircleCheck,
                                                  color: context.primary,
                                                ),
                                              ),
                                            ],
                                          ),
                                        ),
                                      ),
                                    ),
                                  );
                                },
                              );
                            },
                          ),
                        ),
                      ),
                    ),
                  );
                },
              );
            },
          ),
        );
      }
    }

[hm21]

Sorry my bad, your code is correct, but you need to call activeHistory instead of transformConfigs, as shown below.

onTap: () {
    final transformations = _cropRotateEditorKey.currentState!.activeHistory;
    print('transformations:${transformations.toMap()}');
}

[ember11498]

@hm21 Thanks everything is working perfectly now. my only feature request is that you also add roundCropper in other editorconfigs not only in the cropratatoteeditorconfigs.

because the transformationconfigs are working properly when i move to the filtereditor but the image is displayed as a ClipRect and not ClipOval

[ember11498]

@hm21 also one last question but how can i fire the onImageEditingComplete of the filtereditor with my editorKey?

I want this because i want a custom appbar and i need to trigger the onImageEditingComplete so I get the bytes of the generated image

i tried this but didnt work:

    onTap: () {
      editorKey
          .currentState
          ?.filterEditorCallbacks
          ?.onDone!();
    },




  class MyFilterEditor extends StatefulWidget {
    final TransformConfigs transformations;
    final SelectedAssetBloc imageBloc;
    const MyFilterEditor(
        {super.key, required this.transformations, required this.imageBloc});

    @override
    State<MyFilterEditor> createState() => _MyFilterEditorState();
  }

  class _MyFilterEditorState extends State<MyFilterEditor> {
    late final GlobalKey<FilterEditorState> editorKey;

    @override
    void initState() {
      super.initState();
      editorKey = GlobalKey<FilterEditorState>();
    }

    @override
    Widget build(BuildContext context) {
      return BlocProvider.value(
        value: widget.imageBloc,
        child: Builder(
          builder: (context) {
            return VoidTextFieldTheme(
              child: IconTheme(
                data: IconTheme.of(context).copyWith(color: Colors.white),
                child: BlocConsumer<SelectedAssetBloc, SelectedAssetState>(
                  listener: (context, state) {
                    if (state is LatestFile && state.file == null) {
                      context.pop();
                    }
                  },
                  builder: (context, state) {
                    if (state is LoadingAsset) {
                      return const Center(child: CupertinoActivityIndicator());
                    }
                    if (state.file == null) {
                      return const SizedBox.shrink();
                    }
                    return FilterEditor.file(
                      state.file!,
                      key: editorKey,
                      initConfigs: FilterEditorInitConfigs(
                        transformConfigs: widget.transformations,
                        onImageEditingComplete: (bytes) async {
                          // HOW TO TRIGGER THIS FUNCTION? onImageEditingComplete
                          BlocProvider.of<SelectedAssetBloc>(context)
                              .add(SaveEdit(edited: bytes));
                          GoRouter.of(context)
                              .popUntilPath(Routes.createaccount.path);
                        },
                        theme: Theme.of(context),
                        convertToUint8List: true,
                        configs: ProImageEditorConfigs(
                          designMode: platformDesignMode,
                          heroTag: 'avatar',
                          imageEditorTheme: const ImageEditorTheme(
                            uiOverlayStyle: SystemUiOverlayStyle(
                              statusBarColor: Colors.black,
                              statusBarIconBrightness: Brightness.light,
                              systemNavigationBarIconBrightness: Brightness.light,
                              statusBarBrightness: Brightness.dark,
                              systemNavigationBarColor: Colors.black,
                            ),
                          ),
                          imageGenerationConfigs: const ImageGeneratioConfigs(),
                          customWidgets: ImageEditorCustomWidgets(
                            filterEditor: CustomWidgetsFilterEditor(
                              appBar: (editorState, rebuildStream) {
                                return ReactiveCustomAppbar(
                                  stream: rebuildStream,
                                  builder: (context) {
                                    return PreferredSize(
                                      preferredSize:
                                          const Size(double.infinity, 100),
                                      child: ColoredBox(
                                        color: Colors.black,
                                        child: SafeArea(
                                          child: Padding(
                                            padding: const EdgeInsets.symmetric(
                                              horizontal: Spacing.large,
                                              vertical: Spacing.small,
                                            ),
                                            child: Row(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.spaceBetween,
                                              children: [
                                                GestureDetector(
                                                  onTap: () => context.pop(),
                                                  child: const FaIcon(
                                                    FontAwesomeIcons
                                                        .arrowLeftLong,
                                                    color: Colors.white,
                                                  ),
                                                ),
                                                GestureDetector(
                                                  onTap: () {
                                                    editorKey
                                                        .currentState
                                                        ?.filterEditorCallbacks
                                                        ?.onDone!();
                                                  },
                                                  child: FaIcon(
                                                    FontAwesomeIcons
                                                        .solidCircleCheck,
                                                    color: context.primary,
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ),
                                      ),
                                    );
                                  },
                                );
                              },
                            ),
                          ),
                        ),
                      ),
                    );
                  },
                ),
              ),
            );
          },
        ),
      );
    }
  }

[hm21]

You can use editorState.done() to achieve this functionality. When you create a custom app bar, you can utilize the editorState value, which is equivalent to editorKey.currentState but offers easier access.

If you're interested in creating a custom app bar, I recommend reviewing this example for guidance. It demonstrates the best practices for implementing a custom app bar.