The Extended Text Field is an exciting extension of Flutter’s official TextField, allowing for the inclusion of special texts and inline images quickly and efficiently. This guide will walk you through the features, installation, and usage of the Extended Text Field.

Installation

To get started with the Extended Text Field, you need to add it to your project’s dependencies. Edit your pubspec.yaml file to include the following:

dependencies:
  extended_text_field: 11.0.1-ohos

Features

• Mix inline images with text.
• Support for copying the actual text value.
• Quick construction of rich text formats.
• Customizable selection toolbar and controls.

Creating Special Text

To create special text, you can leverage the AtText class for “@somebody” mentions. Here’s how it works:

class AtText extends SpecialText {
  static const String flag = '@';
  final int start;
  final bool showAtBackground;
  
  AtText(TextStyle textStyle, SpecialTextGestureTapCallback onTap, 
         this.showAtBackground: false, this.start)
      : super(flag, textStyle, onTap);
  
  @override
  InlineSpan finishText() {
    TextStyle textStyle = this.textStyle?.copyWith(color: Colors.blue, fontSize: 16.0);
    final String atText = toString();
    return showAtBackground
        ? BackgroundTextSpan(
            background: Paint()..color = Colors.blue.withOpacity(0.15),
            text: atText,
            actualText: atText,
            start: start,
            deleteAll: true,
            style: textStyle,
            recognizer: (TapGestureRecognizer()..onTap = () {
              if (onTap != null) onTap(atText);
            }))
        : SpecialTextSpan(
            text: atText,
            actualText: atText,
            start: start,
            style: textStyle,
            recognizer: (TapGestureRecognizer()..onTap = () {
              if (onTap != null) onTap(atText);
            }));
  }
}

The Analogy

Think of the Extended Text Field like a scrapbook where you can stick in pictures and handwrite notes around them. Just like you would select pictures to paste in and print lovely captions that accompany them, the Extended Text Field allows you to blend textual information with images and special formats seamlessly. In this sense, using AtText is akin to crafting a special label for a photo of a friend, like tagging them with “My Bestie” while making the text highlighted with a nice background. Every detail in your text field is customizable and crafted with care.

Working with Images

To display inline images, you would use the ImageSpan class. Here’s how it can be done:

ImageSpan(
    AssetImage('xxx.jpg'),
    imageWidth: size,
    imageHeight: size,
    margin: EdgeInsets.only(left: 2.0, bottom: 0.0, right: 2.0)
);

Customizing Selection Controls

To customize the text selection toolbar, you can override the method to provide your own widget. For example:

class MyTextSelectionControls extends TextSelectionControls {
  @override
  Widget buildHandle(BuildContext context, TextSelectionHandleType type, double textLineHeight, ...) {
    ...
  }
}

Troubleshooting

Here are a few troubleshooting tips:

• If you encounter issues with special text not displaying correctly:
  • Check the TextDirection. It doesn’t support special text for TextDirection.rtl.
• If you are unable to copy text with special formats, ensure your implementation of the SpecialText classes is correct.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.