[Question] As soon as I select image from gallery or camera the by default crop screen open.

[usa-12]

Please use the discuss tab to ask a question.

No response

[hm21]

I'm not sure, but is this a question or an issue?

For the case, it's an issue, can you post a code example on how to reproduce this issue?

In the case, it's a question, can you describe a bit more in detail what exactly you mean?

[usa-12]

When I select the image from the camera or gallery, the default image is open, But I want the default crop screen to be open.

By default this image open:

But I want to open crop screen / by default crop image open

This is my code:

// Get Images from Camera & Gallery
  Future<void> _getImage(
    ImageSource source,
    void Function(bool) setLoader,
  ) async {
    final serialNumber = widget.serialNumber;

    try {
      setLoader(true);

      // Request Permissions (PermissionHandler)
      await PermissionHandler.requestPermissions();

      // Open the image picker
      var pickedFile = await ImagePicker().pickImage(source: source);

      if (pickedFile != null) {
        _selectedImage = File(pickedFile.path);

        // Save image to gallery before editing
        var isNewProduct = productFetchObject?.id == null;
        if (!isNewProduct && serialNumber != null) {
          await saveImageToGallery(serialNumber);
        }

        // await cropImage(); // Crop the selected image

        // Create the ProImageEditor instance
        final image = ProImageEditor.file(
          _selectedImage!,
          configs: const ProImageEditorConfigs(
            designMode: ImageEditorDesignModeE.cupertino,
            imageEditorTheme:
                ImageEditorTheme(cropRotateEditor: CropRotateEditorTheme()),
            cropRotateEditorConfigs: CropRotateEditorConfigs(
              initAspectRatio: 1.0 / 1.0,
              aspectRatios: [AspectRatioItem(text: 'Square', value: 1.0 / 1.0)],
            ),
          ),
          callbacks: ProImageEditorCallbacks(
            onImageEditingComplete: (Uint8List bytes) async {
              // Save the edited image to a temporary file
              final tempFile = File(
                  '${(await getTemporaryDirectory()).path}/edited_image.jpg');
              await tempFile.writeAsBytes(bytes);

              // Update the selected image with the edited image
              _selectedImage = tempFile;

              // Image uploaded to the server
              String? imageUrl = await uploadImage(_selectedImage);

              // Save the edited image to the gallery
              if (!isNewProduct && serialNumber != null) {
                showSnackBar(
                  // ignore: use_build_context_synchronously
                  context: context,
                  content: "Image uploaded successfully",
                  backgroundColor: AppColors.successMessageColor,
                  upAndDown: DismissDirection.up,
                );

                // If the upload was successful, connect the image URL
                await connectImage(widget.artistProductId!, imageUrl!);
              } else {
                // Since it is a new product, update the productImageUrl
                productFetchObject?.productImgUrl = imageUrl;
                showSnackBar(
                  // ignore: use_build_context_synchronously
                  context: context,
                  content:
                      "Image uploaded successfully. You can save more images after you save this item",
                  backgroundColor: AppColors.successMessageColor,
                  upAndDown: DismissDirection.up,
                );
              }

              // ignore: use_build_context_synchronously
              Navigator.pop(context);
            },
          ),
        );

        // Open the image editor
        await Navigator.push(
          // ignore: use_build_context_synchronously
          context,
          MaterialPageRoute(builder: (context) => image),
        );
      } else {
        showSnackBar(
          // ignore: use_build_context_synchronously
          context: context,
          content: "Image not selected",
        );
      }
    } catch (e) {
      showSnackBar(
        // ignore: use_build_context_synchronously
        context: context,
        content: "Error occurred while processing image: ${e.toString()}",
      );
    } finally {
      setLoader(false);
    }
  }

[hm21]

Okay, got it, if you want to open the crop-rotate-editor or any other editor without opening the main-editor first, you can follow the standalone example here.
Maybe also the example of the round cropper here is interesting for you.

[bapla6]

Hi,
first of all, thx for the great editor! I have the exactly the same question / problem. My users have to crop every picture, as they will be used for social media. Right now, i have a workaround that they get an error Toast, whenever they try to save an uncropped picture with the wrong dimensions. Is there any possibility to start the cropping mode immediately (as it happens in your round cropper example) or is it possible to use the round cropper example and then immediately repon the full editor with the newly cropped picture? Thanks!

[hm21]

There are many possible ways to achieve this, but in my opinion, the two solutions below are the best.
Btw I released version 5.1.2, which resolves a small issue in the crop editor, ensuring that both solutions below work without any extra code.

Solution 1 Crop-Rotate-Editor => Main-Editor

In this solution, we first open the Crop-Rotate Editor. Once the user finishes their tasks there, the Main Editor, with all other functions, is then opened.

Show code

import 'package:flutter/material.dart';
import 'package:pro_image_editor/models/crop_rotate_editor/transform_factors.dart';
import 'package:pro_image_editor/models/history/state_history.dart';
import 'package:pro_image_editor/pro_image_editor.dart';

void main() async {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pro-Image-Editor',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue.shade800),
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _cropEditorKey = GlobalKey<CropRotateEditorState>();
  final _mainEditorKey = GlobalKey<ProImageEditorState>();
  TransformConfigs? _transformations;

  void _openCropEditor() {
    _transformations = null;
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => _buildCropEditor(),
      ),
    );
  }

  void _openMainEditor() {
    if (_transformations == null) return;

    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => _buildMainEditor(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FilledButton(
          onPressed: _openCropEditor,
          child: const Text('Run Example'),
        ),
      ),
    );
  }

  Widget _buildCropEditor() {
    return CropRotateEditor.network(
      'https://picsum.photos/id/230/2000',
      key: _cropEditorKey,
      initConfigs: CropRotateEditorInitConfigs(
        theme: ThemeData.dark(),
        onDone: (transformations, fitToScreenFactor) {
          _transformations = transformations;

          /// Skip one frame before open the main-editor cuz the crop-editor
          /// will call Navigator.pop(context)
          WidgetsBinding.instance.addPostFrameCallback((_) {
            _openMainEditor();
          });
        },
        configs: const ProImageEditorConfigs(
          cropRotateEditorConfigs: CropRotateEditorConfigs(
            /// TODO: set initinal aspect ratio
            initAspectRatio: 9 / 16,

            /// Optional set below all allowed aspect ratios
            /// aspectRatios: [
            ///   AspectRatioItem(text: 'Free', value: -1),
            ///   AspectRatioItem(text: 'Original', value: 0.0),
            ///   AspectRatioItem(text: '1*1', value: 1.0 / 1.0),
            ///   AspectRatioItem(text: '4*3', value: 4.0 / 3.0),
            ///   AspectRatioItem(text: '3*4', value: 3.0 / 4.0),
            ///   AspectRatioItem(text: '16*9', value: 16.0 / 9.0),
            ///   AspectRatioItem(text: '9*16', value: 9.0 / 16.0)
            /// ],
          ),
        ),
      ),
    );
  }

  Widget _buildMainEditor() {
    return ProImageEditor.network(
      'https://picsum.photos/id/230/2000',
      key: _mainEditorKey,
      callbacks: ProImageEditorCallbacks(
        mainEditorCallbacks: MainEditorCallbacks(
          onInit: () {
            var mainEditor = _mainEditorKey.currentState!;

            /// Remove the first initial state history if exists
            mainEditor.stateManager.stateHistory.removeLast();

            /// Add the new cropped transformConfigs
            mainEditor.stateManager.stateHistory.add(EditorStateHistory(
              transformConfigs: _transformations!,
              blur: 0,
              layers: [],
              filters: [],
            ));
          },
        ),
        onImageEditingComplete: (bytes) async {
          /// TODO: Handle final image
          print(bytes.length);
        },
      ),
      configs: const ProImageEditorConfigs(
        cropRotateEditorConfigs: CropRotateEditorConfigs(
          enabled: false,
        ),
      ),
    );
  }
}

Solution 2 An alert that informs the user they need to crop the image.

In this solution, when the user presses "Done", we check if the image has the correct ratio. If not, an alert will inform them that they need to crop the image.

Show code

import 'dart:async';

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

void main() async {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pro-Image-Editor',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue.shade800),
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _mainEditorKey = GlobalKey<ProImageEditorState>();

  final String _demoUrl = 'https://picsum.photos/id/230/2000';

  /// TODO: Add here all allowed aspect ratios
  final List<AspectRatioItem> _allowedAspectRatios = [
    const AspectRatioItem(text: '9*16', value: 9.0 / 16.0),
    const AspectRatioItem(text: '4*3', value: 4.0 / 3.0),
    const AspectRatioItem(text: '16*9', value: 16.0 / 9.0),
  ];

  late double _originalImageRatio;
  final Completer _originalImageRatioCompleter$ = Completer();

  @override
  void initState() {
    super.initState();
    _calculateOriginalImageRatio();
  }

  @override
  void dispose() {
    super.dispose();
    _originalImageRatioCompleter$.complete();
  }

  void _calculateOriginalImageRatio() async {
    /// Check if the original image has already the correct ratio.
    var originalImage = EditorImage(
      networkUrl: _demoUrl,

      /// Other types below
      /// assetPath: ,
      /// byteArray: ,
      /// file: ,
    );
    var decodedOriginalImage = await decodeImageFromList(
      await originalImage.safeByteArray(context),
    );

    _originalImageRatio = Size(
      decodedOriginalImage.width.toDouble(),
      decodedOriginalImage.height.toDouble(),
    ).aspectRatio;

    _originalImageRatioCompleter$.complete();
  }

  void _doneEditing(ProImageEditorState editor) async {
    var transformConfigs = editor.stateManager.transformConfigs;

    /// Await until the original image ratio is set
    if (!_originalImageRatioCompleter$.isCompleted) {
      await _originalImageRatioCompleter$.future;
      if (!mounted) return;
    }

    var ratioIndex = _allowedAspectRatios
        .indexWhere((el) => el.value == _originalImageRatio);

    if (transformConfigs.isEmpty && ratioIndex < 0) {
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: const Text('Image Not Cropped'),
            content: const Text('Please crop the image before proceeding.'),
            actions: <Widget>[
              TextButton(
                child: const Text('OK'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          );
        },
      );
    } else {
      editor.doneEditing();
    }
  }

  void _openMainEditor() {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => _buildMainEditor(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FilledButton(
          onPressed: _openMainEditor,
          child: const Text('Run Example'),
        ),
      ),
    );
  }

  Widget _buildMainEditor() {
    return ProImageEditor.network(
      _demoUrl,
      key: _mainEditorKey,
      callbacks: ProImageEditorCallbacks(
        onImageEditingComplete: (bytes) async {
          /// TODO: Handle final image
          print(bytes.length);
        },
      ),
      configs: ProImageEditorConfigs(
        customWidgets: ImageEditorCustomWidgets(
          mainEditor: CustomWidgetsMainEditor(
            appBar: _buildMainAppBar,
          ),
        ),
        cropRotateEditorConfigs: CropRotateEditorConfigs(
          initAspectRatio: _allowedAspectRatios.first.value,
          aspectRatios: _allowedAspectRatios,
        ),
      ),
    );
  }

  ReactiveCustomAppbar _buildMainAppBar(
    ProImageEditorState editor,
    Stream rebuildStream,
  ) {
    return ReactiveCustomAppbar(
      stream: rebuildStream,
      builder: (_) => AppBar(
        automaticallyImplyLeading: false,
        foregroundColor: editor.imageEditorTheme.appBarForegroundColor,
        backgroundColor: editor.imageEditorTheme.appBarBackgroundColor,
        actions: [
          IconButton(
            tooltip: editor.i18n.cancel,
            padding: const EdgeInsets.symmetric(horizontal: 8),
            icon: Icon(editor.icons.closeEditor),
            onPressed: editor.closeEditor,
          ),
          const Spacer(),
          IconButton(
            key: const ValueKey('MainEditorUndoButton'),
            tooltip: editor.i18n.undo,
            padding: const EdgeInsets.symmetric(horizontal: 8),
            icon: Icon(
              editor.icons.undoAction,
              color: editor.stateManager.position > 0
                  ? editor.imageEditorTheme.appBarForegroundColor
                  : editor.imageEditorTheme.appBarForegroundColor.withAlpha(80),
            ),
            onPressed: editor.undoAction,
          ),
          IconButton(
            key: const ValueKey('MainEditorRedoButton'),
            tooltip: editor.i18n.redo,
            padding: const EdgeInsets.symmetric(horizontal: 8),
            icon: Icon(
              editor.icons.redoAction,
              color: editor.stateManager.position <
                      editor.stateHistory.length - 1
                  ? editor.imageEditorTheme.appBarForegroundColor
                  : editor.imageEditorTheme.appBarForegroundColor.withAlpha(80),
            ),
            onPressed: editor.redoAction,
          ),

          /// We add here our own logic to the done button
          IconButton(
            key: const ValueKey('MainEditorDoneButton'),
            tooltip: editor.i18n.done,
            padding: const EdgeInsets.symmetric(horizontal: 8),
            icon: Icon(editor.icons.doneIcon),
            iconSize: 28,
            onPressed: () => _doneEditing(editor),
          ),
        ],
      ),
    );
  }
}

[bapla6]

simply perfect, thx for the support!

[bapla6]

Sorry to bother you again, i have on more issue, that I cannot solve.
Your example Solution 1 starts with the cropping screen, but the cropping feature is actually not activated until we touch the screen. The picture will not be cropped when the user is satisfied with the inital cropping screen and doesnt change the position of the cropping border. Is there any setting to change this beahivour or can we just simulate, that the cropping feature was used bevor opening the main editor?

thx!

[bapla6]

Hey, issue is not totally solved right now.

• Whenever the user does not edit the cropped picture in the main editor (which is now correctly cropped in the main editor), the orginal picture from the beginning (without cropping) will be saved. This happens 80 % of the time.

• If the user also uses the main editor, the problem doesn't occur anymore. Can you see any problems with my code or do you know the problem?

Show code

void openCropEditor(BuildContext context, File imageFile, Function(ImageData) onImagePicked, bool isSquare) {
  final _cropEditorKey = GlobalKey<CropRotateEditorState>();
  TransformConfigs? _transformations;

  _transformations = null;
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => CropRotateEditor.file(
        imageFile,
        key: _cropEditorKey,
        initConfigs: CropRotateEditorInitConfigs(

          onDone: (transformations, fitToScreenFactor) async {

            _transformations = transformations;

            /// Skip one frame before opening the main-editor
            WidgetsBinding.instance.addPostFrameCallback((_) {
              openMainEditor(context, imageFile, onImagePicked,transformations);
            });
          },
          configs: ProImageEditorConfigs(

            i18n: I18n(
              cropRotateEditor: I18nCropRotateEditor(
                bottomNavigationBarText: 'cropRotateEditorBottomNavigationBarText'.tr,
                rotate: 'cropRotateEditorRotate'.tr,
                flip: 'cropRotateEditorFlip'.tr,
                ratio: 'cropRotateEditorRatio'.tr,
                back: 'cropRotateEditorBack'.tr,
                done: 'cropRotateEditorDone'.tr,
                cancel: 'cropRotateEditorCancel'.tr,
                undo: 'cropRotateEditorUndo'.tr,
                redo: 'cropRotateEditorRedo'.tr,
                smallScreenMoreTooltip: 'cropRotateEditorSmallScreenMoreTooltip'.tr,
                reset: 'cropRotateEditorReset'.tr,
              ),
              filterEditor: I18nFilterEditor(
                bottomNavigationBarText: 'filterEditorBottomNavigationBarText'.tr,
                back: 'filterEditorBack'.tr,
                done: 'filterEditorDone'.tr,
                filters: I18nFilters(
                  none: 'filterNone'.tr,
                  addictiveBlue: 'filterAddictiveBlue'.tr,
                  addictiveRed: 'filterAddictiveRed'.tr,
                  aden: 'filterAden'.tr,
                  amaro: 'filterAmaro'.tr,
                  ashby: 'filterAshby'.tr,
                  brannan: 'filterBrannan'.tr,
                  brooklyn: 'filterBrooklyn'.tr,
                  charmes: 'filterCharmes'.tr,
                  clarendon: 'filterClarendon'.tr,
                  crema: 'filterCrema'.tr,
                  dogpatch: 'filterDogpatch'.tr,
                  earlybird: 'filterEarlybird'.tr,
                  f1977: 'filterF1977'.tr,
                  gingham: 'filterGingham'.tr,
                  ginza: 'filterGinza'.tr,
                  hefe: 'filterHefe'.tr,
                  helena: 'filterHelena'.tr,
                  hudson: 'filterHudson'.tr,
                  inkwell: 'filterInkwell'.tr,
                  juno: 'filterJuno'.tr,
                  kelvin: 'filterKelvin'.tr,
                  lark: 'filterLark'.tr,
                  loFi: 'filterLoFi'.tr,
                  ludwig: 'filterLudwig'.tr,
                  maven: 'filterMaven'.tr,
                  mayfair: 'filterMayfair'.tr,
                  moon: 'filterMoon'.tr,
                  nashville: 'filterNashville'.tr,
                  perpetua: 'filterPerpetua'.tr,
                  reyes: 'filterReyes'.tr,
                  rise: 'filterRise'.tr,
                  sierra: 'filterSierra'.tr,
                  skyline: 'filterSkyline'.tr,
                  slumber: 'filterSlumber'.tr,
                  stinson: 'filterStinson'.tr,
                  sutro: 'filterSutro'.tr,
                  toaster: 'filterToaster'.tr,
                  valencia: 'filterValencia'.tr,
                  vesper: 'filterVesper'.tr,
                  walden: 'filterWalden'.tr,
                  willow: 'filterWillow'.tr,
                  xProII: 'filterXProII'.tr,
                ),
              ),
              blurEditor: I18nBlurEditor(
                bottomNavigationBarText: 'blurEditorBottomNavigationBarText'.tr,
                back: 'blurEditorBack'.tr,
                done: 'blurEditorDone'.tr,
              ),
              emojiEditor: I18nEmojiEditor(
                bottomNavigationBarText: 'emojiEditorBottomNavigationBarText'.tr,
                search: 'emojiEditorSearch'.tr,
                categoryRecent: 'emojiEditorCategoryRecent'.tr,
                categorySmileys: 'emojiEditorCategorySmileys'.tr,
                categoryAnimals: 'emojiEditorCategoryAnimals'.tr,
                categoryFood: 'emojiEditorCategoryFood'.tr,
                categoryActivities: 'emojiEditorCategoryActivities'.tr,
                categoryTravel: 'emojiEditorCategoryTravel'.tr,
                categoryObjects: 'emojiEditorCategoryObjects'.tr,
                categorySymbols: 'emojiEditorCategorySymbols'.tr,
                categoryFlags: 'emojiEditorCategoryFlags'.tr,
              ),
              stickerEditor: I18nStickerEditor(
                bottomNavigationBarText: 'stickerEditorBottomNavigationBarText'.tr,
              ),
              paintEditor: I18nPaintingEditor(
                bottomNavigationBarText: 'paintEditorBottomNavigationBarText'.tr,
                moveAndZoom: 'paintEditorMoveAndZoom'.tr,
                freestyle: 'paintEditorFreestyle'.tr,
                arrow: 'paintEditorArrow'.tr,
                line: 'paintEditorLine'.tr,
                rectangle: 'paintEditorRectangle'.tr,
                circle: 'paintEditorCircle'.tr,
                dashLine: 'paintEditorDashLine'.tr,
                lineWidth: 'paintEditorLineWidth'.tr,
                eraser: 'paintEditorEraser'.tr,
                toggleFill: 'paintEditorToggleFill'.tr,
                changeOpacity: 'paintEditorChangeOpacity'.tr,
                undo: 'paintEditorUndo'.tr,
                redo: 'paintEditorRedo'.tr,
                done: 'paintEditorDone'.tr,
                back: 'paintEditorBack'.tr,
                smallScreenMoreTooltip: 'paintEditorSmallScreenMoreTooltip'.tr,
              ),
              textEditor: I18nTextEditor(
                inputHintText: 'textEditorInputHintText'.tr,
                bottomNavigationBarText: 'textEditorBottomNavigationBarText'.tr,
                done: 'textEditorDone'.tr,
                back: 'textEditorBack'.tr,
                textAlign: 'textEditorTextAlign'.tr,
                fontScale: 'textEditorFontScale'.tr,
                backgroundMode: 'textEditorBackgroundMode'.tr,
                smallScreenMoreTooltip: 'textEditorSmallScreenMoreTooltip'.tr,
              ),
              layerInteraction: I18nLayerInteraction(
                remove: 'layerInteractionRemove'.tr,
                edit: 'layerInteractionEdit'.tr,
                rotateScale: 'layerInteractionRotateScale'.tr,
              ),
              various: I18nVarious(
                loadingDialogMsg: 'variousLoadingDialogMsg'.tr,
                closeEditorWarningTitle: 'variousCloseEditorWarningTitle'.tr,
                closeEditorWarningMessage: 'variousCloseEditorWarningMessage'.tr,
                closeEditorWarningConfirmBtn: 'variousCloseEditorWarningConfirmBtn'.tr,
                closeEditorWarningCancelBtn: 'variousCloseEditorWarningCancelBtn'.tr,
              ),
              cancel: 'generalCancel'.tr,
              undo: 'generalUndo'.tr,
              redo: 'generalRedo'.tr,
              done: 'generalDone'.tr,
              remove: 'generalRemove'.tr,
              doneLoadingMsg: 'generalDoneLoadingMsg'.tr,
            ),
            cropRotateEditorConfigs: CropRotateEditorConfigs(
            //  canRotate: isSquare ?true:false,
          canChangeAspectRatio: false,
              initAspectRatio: isSquare ? 1.0 : 9.0 / 16.0,
              aspectRatios: isSquare
                  ? [AspectRatioItem(text: '1*1', value: 1.0 / 1.0)]
                  : [AspectRatioItem(text: '9*16', value: 9.0 / 16.0)],

            ),

          ),

          theme: ThemeData.light(),
        ),
      ),
    ),
  );
}

void openMainEditor(BuildContext context, File imageFile, Function(ImageData) onImagePicked, TransformConfigs? _transformations) {

  final _mainEditorKey = GlobalKey<ProImageEditorState>();

  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => ProImageEditor.file(
        imageFile,
        key: _mainEditorKey,
        callbacks: ProImageEditorCallbacks(
          mainEditorCallbacks: MainEditorCallbacks(
            onInit: () {

              var mainEditor = _mainEditorKey.currentState!;

              mainEditor.stateManager.stateHistory.removeLast();

              mainEditor.stateManager.stateHistory.add(EditorStateHistory(
                transformConfigs: _transformations!,
                blur: 0,
                layers: [],
                filters: [],
              ));


            },
          ),
          onImageEditingComplete: (Uint8List bytes) async {

            try {
            final directory = await getApplicationDocumentsDirectory();

            final file = File('${directory.path}/edited_image_${DateTime.now().millisecondsSinceEpoch}.jpg'); // Verwende eindeutigen Dateinamen
            print(bytes.length);
            await file.writeAsBytes(bytes);
            ImageData imageData = ImageData(
              currentPic: basename(file.path),
              newPic: true,
              kIsWebTemp: false,
              image: XFile(file.path),
              webImage: Uint8List(0),
              localPath: file.path,
            );
            _transformations = null;

            onImagePicked(imageData);
  } catch (e) {
  print("Fehler beim Verarbeiten des Bildes: $e");
  } finally {

  Navigator.pop(context);
  }
          },


        ),

        configs:  ProImageEditorConfigs(
          i18n: I18n(
            cropRotateEditor:
            I18nCropRotateEditor(
              bottomNavigationBarText: 'cropRotateEditorBottomNavigationBarText'.tr,
              rotate: 'cropRotateEditorRotate'.tr,
              flip: 'cropRotateEditorFlip'.tr,
              ratio: 'cropRotateEditorRatio'.tr,
              back: 'cropRotateEditorBack'.tr,
              done: 'cropRotateEditorDone'.tr,
              cancel: 'cropRotateEditorCancel'.tr,
              undo: 'cropRotateEditorUndo'.tr,
              redo: 'cropRotateEditorRedo'.tr,
              smallScreenMoreTooltip: 'cropRotateEditorSmallScreenMoreTooltip'.tr,
              reset: 'cropRotateEditorReset'.tr,
            ),
            filterEditor: I18nFilterEditor(
              bottomNavigationBarText: 'filterEditorBottomNavigationBarText'.tr,
              back: 'filterEditorBack'.tr,
              done: 'filterEditorDone'.tr,
              filters: I18nFilters(
                none: 'filterNone'.tr,
                addictiveBlue: 'filterAddictiveBlue'.tr,
                addictiveRed: 'filterAddictiveRed'.tr,
                aden: 'filterAden'.tr,
                amaro: 'filterAmaro'.tr,
                ashby: 'filterAshby'.tr,
                brannan: 'filterBrannan'.tr,
                brooklyn: 'filterBrooklyn'.tr,
                charmes: 'filterCharmes'.tr,
                clarendon: 'filterClarendon'.tr,
                crema: 'filterCrema'.tr,
                dogpatch: 'filterDogpatch'.tr,
                earlybird: 'filterEarlybird'.tr,
                f1977: 'filterF1977'.tr,
                gingham: 'filterGingham'.tr,
                ginza: 'filterGinza'.tr,
                hefe: 'filterHefe'.tr,
                helena: 'filterHelena'.tr,
                hudson: 'filterHudson'.tr,
                inkwell: 'filterInkwell'.tr,
                juno: 'filterJuno'.tr,
                kelvin: 'filterKelvin'.tr,
                lark: 'filterLark'.tr,
                loFi: 'filterLoFi'.tr,
                ludwig: 'filterLudwig'.tr,
                maven: 'filterMaven'.tr,
                mayfair: 'filterMayfair'.tr,
                moon: 'filterMoon'.tr,
                nashville: 'filterNashville'.tr,
                perpetua: 'filterPerpetua'.tr,
                reyes: 'filterReyes'.tr,
                rise: 'filterRise'.tr,
                sierra: 'filterSierra'.tr,
                skyline: 'filterSkyline'.tr,
                slumber: 'filterSlumber'.tr,
                stinson: 'filterStinson'.tr,
                sutro: 'filterSutro'.tr,
                toaster: 'filterToaster'.tr,
                valencia: 'filterValencia'.tr,
                vesper: 'filterVesper'.tr,
                walden: 'filterWalden'.tr,
                willow: 'filterWillow'.tr,
                xProII: 'filterXProII'.tr,
              ),
            ),
            blurEditor: I18nBlurEditor(
              bottomNavigationBarText: 'blurEditorBottomNavigationBarText'.tr,
              back: 'blurEditorBack'.tr,
              done: 'blurEditorDone'.tr,
            ),
            emojiEditor: I18nEmojiEditor(
              bottomNavigationBarText: 'emojiEditorBottomNavigationBarText'.tr,
              search: 'emojiEditorSearch'.tr,
              categoryRecent: 'emojiEditorCategoryRecent'.tr,
              categorySmileys: 'emojiEditorCategorySmileys'.tr,
              categoryAnimals: 'emojiEditorCategoryAnimals'.tr,
              categoryFood: 'emojiEditorCategoryFood'.tr,
              categoryActivities: 'emojiEditorCategoryActivities'.tr,
              categoryTravel: 'emojiEditorCategoryTravel'.tr,
              categoryObjects: 'emojiEditorCategoryObjects'.tr,
              categorySymbols: 'emojiEditorCategorySymbols'.tr,
              categoryFlags: 'emojiEditorCategoryFlags'.tr,
            ),
            stickerEditor: I18nStickerEditor(
              bottomNavigationBarText: 'stickerEditorBottomNavigationBarText'.tr,
            ),
            paintEditor: I18nPaintingEditor(
              bottomNavigationBarText: 'paintEditorBottomNavigationBarText'.tr,
              moveAndZoom: 'paintEditorMoveAndZoom'.tr,
              freestyle: 'paintEditorFreestyle'.tr,
              arrow: 'paintEditorArrow'.tr,
              line: 'paintEditorLine'.tr,
              rectangle: 'paintEditorRectangle'.tr,
              circle: 'paintEditorCircle'.tr,
              dashLine: 'paintEditorDashLine'.tr,
              lineWidth: 'paintEditorLineWidth'.tr,
              eraser: 'paintEditorEraser'.tr,
              toggleFill: 'paintEditorToggleFill'.tr,
              changeOpacity: 'paintEditorChangeOpacity'.tr,
              undo: 'paintEditorUndo'.tr,
              redo: 'paintEditorRedo'.tr,
              done: 'paintEditorDone'.tr,
              back: 'paintEditorBack'.tr,
              smallScreenMoreTooltip: 'paintEditorSmallScreenMoreTooltip'.tr,
            ),
            textEditor: I18nTextEditor(
              inputHintText: 'textEditorInputHintText'.tr,
              bottomNavigationBarText: 'textEditorBottomNavigationBarText'.tr,
              done: 'textEditorDone'.tr,
              back: 'textEditorBack'.tr,
              textAlign: 'textEditorTextAlign'.tr,
              fontScale: 'textEditorFontScale'.tr,
              backgroundMode: 'textEditorBackgroundMode'.tr,
              smallScreenMoreTooltip: 'textEditorSmallScreenMoreTooltip'.tr,
            ),
            layerInteraction: I18nLayerInteraction(
              remove: 'layerInteractionRemove'.tr,
              edit: 'layerInteractionEdit'.tr,
              rotateScale: 'layerInteractionRotateScale'.tr,
            ),
            various: I18nVarious(
              loadingDialogMsg: 'variousLoadingDialogMsg'.tr,
              closeEditorWarningTitle: 'variousCloseEditorWarningTitle'.tr,
              closeEditorWarningMessage: 'variousCloseEditorWarningMessage'.tr,
              closeEditorWarningConfirmBtn: 'variousCloseEditorWarningConfirmBtn'.tr,
              closeEditorWarningCancelBtn: 'variousCloseEditorWarningCancelBtn'.tr,
            ),
            cancel: 'generalCancel'.tr,
            undo: 'generalUndo'.tr,
            redo: 'generalRedo'.tr,
            done: 'generalDone'.tr,
            remove: 'generalRemove'.tr,
            doneLoadingMsg: 'generalDoneLoadingMsg'.tr,
          ),
          cropRotateEditorConfigs: CropRotateEditorConfigs(
            enabled: false,
          ),

        ),
      ),
    ),
  );
}

[hm21]

This case is a bit tricky because, typically, if no changes are made in the main editor, it will return the original bytes directly. However, we can employ a small workaround in the callback where the generation starts. By adding an empty history, we can trick the editor into thinking it needs to generate a new image. Below is an example of how to implement this.

Additionally, if you want to save your images directly to the device’s native image gallery, I recommend using the package gal. It’s incredibly helpful for this purpose.

Another tip: If you would like to avoid declaring the I18n class twice, you can share it globally across all editors. This will help streamline your code and make it more concise.

  void openMainEditor(
    BuildContext context,
    TransformConfigs? transformations,
  ) {
    final mainEditorKey = GlobalKey<ProImageEditorState>();

    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => ProImageEditor.network(
          'https://picsum.photos/id/230/1200/2000',
          key: mainEditorKey,
          callbacks: ProImageEditorCallbacks( 
            /// TODO: add this callback
            onImageEditingStarted: () {
              var mainEditor = mainEditorKey.currentState!;

              /// Ensure the editor will generate a new image even there are
              /// no changes
              if (mainEditor.stateManager.position == 0) {
                mainEditor.addHistory();
              }
            },

[bapla6]

thank you once again :)

[hm21]

@bapla6 I've just released version 5.2.0, which includes an improved method for transitioning from the crop-rotate editor to the main editor. If you'd like to explore this new approach, you can check out this example.