hm21 / pro_image_editor

The pro_image_editor is a Flutter widget designed for image editing within your application. It provides a flexible and convenient way to integrate image editing capabilities into your Flutter project.
https://hm21.github.io/pro_image_editor/
BSD 3-Clause "New" or "Revised" License
94 stars 59 forks source link

[Bug]: Text editor cursor Issue with long text #154

Closed haroke4 closed 2 months ago

haroke4 commented 2 months ago

Package Version

4.2.5

Flutter Version

3.22.2

Platforms

iOS

How to reproduce?

After copying the base code example code for customizing image editor from pub.dev and running it as-is, I noticed some unusual cursor behavior.

When I input a significant amount of text, the cursor starts behaving awkward:

https://github.com/hm21/pro_image_editor/assets/91789476/e0b243ea-13be-4b90-bbea-9f3f175dd75e

To reproduce the bug:

  1. Copy and paste the example code from example code section.
  2. Enter a long string of text into the text field, as demonstrated in the video.

Thank you for your amazing package and I am welcome to provide you with additional information if you wish

Logs (optional)

No response

Example code (optional)

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

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

  @override
  State<ChatEditSelectedMediaScreen> createState() =>
      _ChatEditSelectedMediaScreenState();
}

class _ChatEditSelectedMediaScreenState
    extends State<ChatEditSelectedMediaScreen> {
  @override
  Widget build(BuildContext context) {
    // copied from pub.dev of pro_image_editor / Highly configurable section
    return Scaffold(
      appBar: AppBar(title: const Text('Pro-Image-Editor')),
      body: ProImageEditor.network(
        'https://picsum.photos/id/237/2000',
        callbacks: ProImageEditorCallbacks(
          onImageEditingComplete: (Uint8List bytes) async {
            Navigator.pop(context);
          },
        ),
        configs: const ProImageEditorConfigs(
          i18n: I18n(
            various: I18nVarious(),
            paintEditor: I18nPaintingEditor(),
            textEditor: I18nTextEditor(),
            cropRotateEditor: I18nCropRotateEditor(),
            filterEditor: I18nFilterEditor(filters: I18nFilters()),
            emojiEditor: I18nEmojiEditor(),
            stickerEditor: I18nStickerEditor(),
            // More translations...
          ),
          helperLines: HelperLines(
            showVerticalLine: true,
            showHorizontalLine: true,
            showRotateLine: true,
            hitVibration: true,
          ),
          imageEditorTheme: ImageEditorTheme(
            // layerHoverCursor: SystemMouseCursors.move,
            helperLine: HelperLineTheme(
              horizontalColor: Color(0xFF1565C0),
              verticalColor: Color(0xFF1565C0),
              rotateColor: Color(0xFFE91E63),
            ),
            paintingEditor: PaintingEditorTheme(),
            textEditor: TextEditorTheme(),
            cropRotateEditor: CropRotateEditorTheme(),
            filterEditor: FilterEditorTheme(),
            emojiEditor: EmojiEditorTheme(),
            stickerEditor: StickerEditorTheme(),
            background: Color.fromARGB(255, 22, 22, 22),
            // loadingDialogTextColor: Color(0xFFE1E1E1),
            uiOverlayStyle: SystemUiOverlayStyle(
              statusBarColor: Color(0x42000000),
              statusBarIconBrightness: Brightness.light,
              systemNavigationBarIconBrightness: Brightness.light,
              statusBarBrightness: Brightness.dark,
              systemNavigationBarColor: Color(0xFF000000),
            ),
          ),
          icons: ImageEditorIcons(
            paintingEditor: IconsPaintingEditor(),
            textEditor: IconsTextEditor(),
            cropRotateEditor: IconsCropRotateEditor(),
            filterEditor: IconsFilterEditor(),
            emojiEditor: IconsEmojiEditor(),
            stickerEditor: IconsStickerEditor(),
            closeEditor: Icons.clear,
            doneIcon: Icons.done,
            applyChanges: Icons.done,
            backButton: Icons.arrow_back,
            undoAction: Icons.undo,
            redoAction: Icons.redo,
            removeElementZone: Icons.delete_outline_rounded,
          ),
          paintEditorConfigs: PaintEditorConfigs(),
          textEditorConfigs: TextEditorConfigs(),
          cropRotateEditorConfigs: CropRotateEditorConfigs(),
          filterEditorConfigs: FilterEditorConfigs(),
          emojiEditorConfigs: EmojiEditorConfigs(),
          designMode: ImageEditorDesignModeE.material,
          heroTag: 'hero',
        ),
      ),
    );
  }
}

Device Model (optional)

iPhone 13

hm21 commented 2 months ago

Thank you for reporting this issue with all the details. I can reproduce the problem and already know where the problem is. However, there are some other parts in the text editor that I didn't like, so I will rewrite some more code directly and maybe also replace the rounded_background_text package with my own solution. This will take a few days, but I will post here when I am done.

hm21 commented 2 months ago

I have released version 4.2.7 which should fix the cursor issue. Please let me know if you still have the issue after you updated.

Btw, I haven't finished optimizing the text editor completely, this update only resolves that issue, but I still have a plan to optimize some other stuff about performance, hit detection and text overflow.