Add text to the editor programatically

[sabinjose]

Hi, I am trying to add text layer programatically using the below code. The text is not wrapped within the bounds of the image. Is there a way to wrap the text?

callbacks: ProImageEditorCallbacks(
       mainEditorCallbacks: MainEditorCallbacks(
         onAfterViewInit: () {
           if (editorKey.currentState != null) {
             if (editorKey.currentState != null) {
               editorKey.currentState!.addLayer(TextLayerData(
                 text:
                     'For God so loved the world that he gave his one and only Son, that whoever believes in him shall not perish but have eternal life.',
                 align: TextAlign.center,
                 fontScale: 1.0,
                 colorMode: LayerBackgroundMode.onlyColor,
                 color: Colors.white,
                 background: Colors.transparent,
               ));
             }
           }
         },
       ),
     ),

Thank you for creating this awesome library!

[hm21]

Hi,

Thank you for your kind words, I’m glad you appreciate my package. Below is an example of how you can wrap your text directly.

final String _bibleText =
    'For God so loved the world that he gave his one and only Son, that whoever believes in him shall not perish but have eternal life.';

String _wrapText(String text, double maxWidth) {
  final words = text.split(' ');
  String wrappedText = '';
  String currentLine = '';

  for (var word in words) {
    final testLine = currentLine.isEmpty ? word : '$currentLine $word';
    final textPainter = TextPainter(
      text: TextSpan(
          text: testLine,
          style: const TextStyle(
            /// The default fontSize from the editor is 24.
            fontSize: 24,
          )),
      maxLines: 1,
      textDirection: TextDirection.ltr,
    );
    textPainter.layout();

    if (textPainter.size.width > maxWidth) {
      if (currentLine.isEmpty) {
        // Word itself is longer than maxWidth
        wrappedText += '$word\n';
      } else {
        // Wrap the current line
        wrappedText += '$currentLine\n';
        currentLine = word;
      }
    } else {
      currentLine = testLine;
    }
  }

  // Add any remaining text
  if (currentLine.isNotEmpty) {
    wrappedText += currentLine;
  }

  return wrappedText;
}

Widget _buildEditor() {
  return ProImageEditor.asset(
    ExampleConstants.of(context)!.demoAssetPath,
    key: editorKey,
    callbacks: ProImageEditorCallbacks(
      onImageEditingStarted: onImageEditingStarted,
      onImageEditingComplete: onImageEditingComplete,
      onCloseEditor: onCloseEditor,
      mainEditorCallbacks: MainEditorCallbacks(
        onAfterViewInit: () {
          /// We add the layer directly to the first state history because
          /// if we don't, the user might see an option to undo changes
          /// even though no changes have actually been made.
          editorKey.currentState!.stateManager.stateHistory[0].layers.add(
            TextLayerData(
              text: _wrapText(
                _bibleText,
                // Set the maximum text width which you prefer below.
                300,
              ),
              align: TextAlign.center,
              fontScale: 1.0,
              colorMode: LayerBackgroundMode.onlyColor,
              color: Colors.white,
              background: Colors.transparent,

              /// If you want to set a fixed initial position, you can do so
              /// by adjusting the offset from the default position. The zero
              /// position is located at the center of the image, so you'll
              /// need to calculate the offset from that central point.
              /// Below is an example how you can fix the text to the top.
              /// offset: Offset(
              ///   0,
              ///   -editorKey.currentState!.sizesManager.bodySize.height / 2 +
              ///       100,
              /// ),
            ),
          );
        },
      ),
    ),
    configs: ProImageEditorConfigs(
      designMode: platformDesignMode,
    ),
  );
}