Need help with making WhatsApp like formatting / italic / bold / underline

[developer-farhan]

im trying to get bold and italic and underline formatting like WhatsApp and im using the following but im getting no result

patternList: [ ///bold font EasyRichTextPattern( targetString: '()(.?)()', matchBuilder: (BuildContext context, RegExpMatch match) { print(match[0]); return TextSpan( text: match[0].replaceAll('', ''), style: TextStyle(fontWeight: FontWeight.bold), ); }, ),

                      ///italic font
                      EasyRichTextPattern(
                        targetString: '(\_)(.*?)(\_)',
                        matchBuilder:
                            (BuildContext context, RegExpMatch match) {
                          print(match[0]);
                          return TextSpan(
                            text: match[0].replaceAll('_', ''),
                            style:
                                TextStyle(fontStyle: FontStyle.italic),
                          );
                        },
                      ),
                    ],

the other text turns black idk why when default color is white could you help me out

[2000calories]

Need double \ in dart regular expression

                      EasyRichTextPattern(
                        targetString: '(\\_)(.*?)(\\_)',
                        matchBuilder:
                            (BuildContext context, RegExpMatch match) {
                          print(match[0]);
                          return TextSpan(
                            text: match[0].replaceAll('_', ''),
                            style:
                                TextStyle(fontStyle: FontStyle.italic),
                          );
                        },
                      ),

[developer-farhan]

@2000calories that was the first thing I did but I keep getting this error

The following FormatException was thrown building EasyRichText(dirty): Invalid identity escape in Unicode pattern((?<!\w)(_)(.*?)(_)(?!\w))

[2000calories]

can you show your flutter doctor result

[developer-farhan]

@2000calories Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.0.6, on macOS 11.5.1 20G80 darwin-arm, locale en-GB) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3) [✓] Xcode - develop for iOS and macOS [✓] Chrome - develop for the web [✓] Android Studio (version 2020.3) [✓] Connected device (2 available)

• No issues found!

[2000calories]

OK, I found a bug when using multiple WhatsApp-like EasyRichTextPattern, I will fix it soon.

[developer-farhan]

@2000calories do keep me posted please prompt fix would be very well appreciated

[2000calories]

@officialFlutterDeveloper Try the latest master branch. I will publish a new version if it works.

  easy_rich_text:
    git:
      url: https://github.com/2000calories/flutter_easy_rich_text.git
      ref: master

[developer-farhan]

@2000calories did not work for me

[2000calories]

try the following example

///WhatsApp like text formatter
EasyRichText(
  "what are *you* doing *and* hi ~hey~. _italic_ ",
  defaultStyle: TextStyle(color: Colors.white),
  patternList: [
    ///bold font
    EasyRichTextPattern(
      targetString: '(\\*)(.*?)(\\*)',
      matchBuilder:
          (BuildContext context, RegExpMatch match) {
        print(match[0]);
        return TextSpan(
          text: match[0].replaceAll('*', ''),
          style: TextStyle(fontWeight: FontWeight.bold),
        );
      },
    ),

    ///italic font
    EasyRichTextPattern(
      targetString: '(\_)(.*?)(\_)',
      matchBuilder:
          (BuildContext context, RegExpMatch match) {
        print(match[0]);
        return TextSpan(
          text: match[0].replaceAll('_', ''),
          style: TextStyle(fontStyle: FontStyle.italic),
        );
      },
    ),

    ///strikethrough
    EasyRichTextPattern(
      targetString: '(\~)(.*?)(\~)',
      matchBuilder:
          (BuildContext context, RegExpMatch match) {
        print(match[0]);
        return TextSpan(
          text: match[0].replaceAll('~', ''),
          style: TextStyle(
              decoration: TextDecoration.lineThrough),
        );
      },
    ),
  ],
),

[developer-farhan]

@2000calories worked perfectly well done!

[2000calories]

I published a new version.

dependencies:
  easy_rich_text: '^1.0.0'

[developer-farhan]

is it possible I can use the text changing in textfield? just like how WhatsApp does ? so people can play around before they even send it

[2000calories]

i think you cannot use RichText widget as input of TextFeld widget. Perhaps you can show the RichText widget as a preview just above the TextFeld widget if special format were detected in the input.

[radheyshyamjat]

With extend this one anyone please help me to implement both at a time like *_Bold Plus Italic_*

[radheyshyamjat]

With extend this one anyone please help me to implement both at a time like Bold Plus Italic

This also resolve it's just a matter or regex it's very good package for use formatting If anyone required help posting correct answer also

 EasyRichTextPattern(targetString: '([*_~]{3})(.*?)([_*~])',
          matchBuilder: (BuildContext context, RegExpMatch? match) {
            return TextSpan(
              text: gerReplacedTextBoldItalicStrike(match?[0]),
              style: TextStyle(
                  fontStyle: FontStyle.italic,
                  fontWeight: FontWeight.bold,
                  decoration: TextDecoration.lineThrough),
            );
          },
        )

     String gerReplacedTextBoldItalicStrike(String? msg){
       String? msgString = msg;
       if(msgString == null) return "";
       msgString = msgString.replaceAll("*", "");
       msgString = msgString.replaceAll("_", "");
       msgString = msgString.replaceAll("~", "");
       return msgString;
     }