A Flutter package to parse text and make them into linkified text widget

flutter parse text

a flutter package to parse text and extract parts using predefined types like url, phone and email and also supports regex.

usage ��

to use this package, add flutter_parsed_text as a dependency in your pubspec.yaml file.

import 'package:flutter_parsed_text/flutter_parsed_text.dart';

working ⚙️

parsedtext can receive this paramters & all the richtext parameters:

text: text that will be parsed and rendered.

style: it takes a textstyle object as it’s property to style all the non links text objects.

parse: array of matchtext object – used for defining structure for pattern matching .

matchtext(
  type: "email", // predefined type can be any of this email, phone, url or custom
  style: textstyle(
    color: colors.red,
    fontsize: 24,
  ), // custom style to be applied to this matched text
  ontap: (url) {
    // do something here with passed url
  }, // callback funtion when the text is tapped on
),

you can also define a custom pattern like this:

matchtext(
  pattern: r"b#+([w]+)b", // a custom pattern to match
  style: textstyle(
    color: colors.pink,
    fontsize: 24,
  ), // custom style to be applied to this matched text
  ontap: (url) async {
  // do something here with passed url
  }, // callback funtion when the text is tapped on
)

a boolean that show a diffrent text and passes a diffrent text to the callback

eg: your str is "mention [@michel:5455345]" where 5455345 is id of this user which will be passed as parameter to the callback funtion and @michel the value to display on interface. your pattern for id & username extraction : /[(@[^:]+):([^]]+)]/i

displayed text will be : mention ^^@michel^^

matchtext(
  pattern: r"[(@[^:]+):([^]]+)]",
  style: textstyle(
    color: colors.green,
    fontsize: 24,
  ),
  // you must return a map with two keys
  // [display] - the text you want to show to the user
  // [value] - the value underneath it
  rendertext: ({string str, string pattern}) {
    map<string, string> map = map<string, string>();
    regexp customregexp = regexp(pattern);
    match match = customregexp.firstmatch(str);
    map['display'] = match.group(1);
    map['value'] = match.group(2);
    return map;
  },
  ontap: (url) {
    // do something here with passed url
  },
),

example

find the complete example wiring in the flutter_parsed_text example application.

a small example of the parsedtext widget.

parsedtext(
  text:
    "[@michael:51515151] hello this is an example of the parsedtext, links like http://www.google.com or http://www.facebook.com are clickable and phone number 444-555-6666 can call too. but you can also do more with this package, for example bob will change style and david too. [email protected] and the magic number is 42! #react #react-native",
  parse: <matchtext>[
    matchtext(
      type: "email",
      style: textstyle(
        color: colors.red,
        fontsize: 24,
      ),
      ontap: (url) {
        launch("mailto:" + url);
      },
    ),
  ],
)

found this project useful? ❤️

if you found this project useful, then please consider giving it a ⭐️ on github and sharing it with your friends via social media.

api details ��

see the flutter_parsed_text.dart for more api details