Flutter achieve different styles (with style) of TextField (customizable), a similar topic # # microblogging, @ users (TextField to add TextSpan)

description

The first renderings

In the project, there are @ and topics, you need to echo while editing, but TextField official native support on the part of the text does not define different styles, so a package. ?

Note: This is not a rich-text plugin does not support the display of pictures in the input box, only TextField extension, allowed support custom TextSpan.

This article describes the package of ideas, if you want to apply directly in the project, can be introduced directly in the following ways:

Plug Address: https://pub.dev/packages/text_span_field

text_span_field: 1.0.0

Use way:

TextSpanField(
    controller: TextEditingController(
      text: "This is a test message, you see his color" ,
    ),
    rangeStyles: [
      RangeStyle(
        range: TextRange(start: 0, end: 1),
        style: TextStyle(color: Color(0xFF5BA2FF)),
      ),
      RangeStyle(
        range: TextRange(start: 3, end: 4),
        style: TextStyle(color: Color(0xFF9C7BFF)),
      ),
    ],
),

 

text

Project Address: https://github.com/JiangJuHong/FlutterTextSpanField

Project structure:

First of all, we want to expand in TextField necessary to view the source code, jump directly to build rendered, we found the following code:

 

 

 TextField internal use is EditableText, the official website Flutter as follows:

 

 

 "The basic text entry field."

EditableText internal component has a rewritable method buildTextSpan , which defines how the content displayed in the input box, the default is not processed, we need to display different content, the method needs to be rewritten and packaged as required.

The first step: rewriting buildTextSpan property and inheritance EditableText

So we created a component called "EditableTextSpan" and inherited EditableText, then rewrite buildTextSpan, after code is rewritten as follows:

Code Address: https://github.com/JiangJuHong/FlutterTextSpanField/blob/master/lib/editable_text_span.dart

 

 

Wherein rangeStyle custom styles range class pass component using convenience, rangeStyle code:

. 1 Import ' Package: Flutter / cupertino.dart ' ;
 2  
. 3  /// range of styles, different predetermined range of different styles 
. 4  class RangeStyle the extends the Comparable <RangeStyle> {
 . 5    RangeStyle ({@ required the this .Range, the this .style});
 . 6  
. 7    /// range 
. 8    Final range the TextRange;
 . 9  
10    /// specified style 
. 11    Final the TextStyle style;
 12 is  
13 is    @override
 14    int the compareTo (RangeStyle OTHER) {
 15      return range.start.compareTo(other.range.start);
16   }
17 
18   @override
19   String toString() {
20     return 'RangeStyle(range:$range, style:$style)';
21   }
22 }

Code Address: https://github.com/JiangJuHong/FlutterTextSpanField/blob/master/lib/range_style.dart

BuildTextSpan main business logic is rewritten in accordance with the range defined TextRange, different applications TextStyle

Step Two: repackaging TextField

After buildTextSpan rewrite is completed, the default file TextField and we will not use after the rewrite, so we need to follow these steps:

1. Copy the file out TextField named TextSpanField, then alternative methods EditableText build into EditableTextSpan.

 

2. In the disclosed rangeStyle TextSpanField properties, and passed to EditabledTextSpan

Code Address: https://github.com/JiangJuHong/FlutterTextSpanField/blob/master/lib/text_span_field.dart

End

At this point, we have the component package complete, you can achieve different rendering styles for different ranges.

Instructions:

TextSpanField(
    controller: TextEditingController(
      text: "This is a test message, you see his color"
    ),
    rangeStyles: [
      RangeStyle(
        range: TextRange(start: 0, end: 1),
        style: TextStyle(color: Color(0xFF5BA2FF)),
      ),
      RangeStyle(
        range: TextRange(start: 3, end: 4),
        style: TextStyle(color: Color(0xFF9C7BFF)),
      ),
    ],
),

　　

Since this article does not accurately explain each line of code, the source code may require a combination of research together, the source address is: https://github.com/JiangJuHong/FlutterTextSpanField/tree/master/lib

The content has been packaged as a plug-in  text_span_field  , not due to primary content changes, so compatible with TextField, in theory, TextField support operations, also supports the TextSpanField.

My Home: https://github.com/JiangJuHong