6 Best Flutter Text Libraries

Text is one of the most popular widgets in Flutter. There are many features we want the widget can support. Therefore, we need these best Text libraries for our Flutter apps.

auto_size_text

Text is bound by font size. This widget can display text that automatically resizes its font size to fit perfectly within its bounds.

//fit in 2 lines
AutoSizeText(
  'This String will be automatically resized to fit on two lines',
  style: TextStyle(fontSize: 20),
  maxLines: 2,
)
//fit in 4 lines, the rest becomes ellipsis 
AutoSizeText(
  'A really long String',
  style: TextStyle(fontSize: 30),
  minFontSize: 18,
  maxLines: 4,
  overflow: TextOverflow.ellipsis,
)
//group: All Text in the same group will fit their boundaries and have the same size. 
var myGroup = AutoSizeGroup();

AutoSizeText(
  'This is 1st text from myGroup',
  group: myGroup,
);

AutoSizeText(
  'This is 2nd text from myGroup',
  group: myGroup,
);
//presets: size is reduced based on presetFontSizes
AutoSizeText(
  'This string will resize its font size according to presetFontSizes',
  presetFontSizes: [40, 20, 14],
  maxLines: 4,
)

animated_text_kit

This library contains a collection of some cool and awesome text animations. it supports these animation types: Rotate, Fade, Typer, Typewriter, Scale, Colorize, TextLiquidFill, Wavy.

Row(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    SizedBox(width: 30.0, height: 100.0),
    Text(
      "Be",
      style: TextStyle(fontSize: 40.0),
    ),
    SizedBox(width: 20.0, height: 100.0),
    RotateAnimatedTextKit(
      onTap: () {
        print("Tap Event");
      },
      text: ["COOL", "STYLISH", "DIFFERENT"],
      textStyle: TextStyle(fontSize: 36.0, fontFamily: "Horizon"),
      textAlign: TextAlign.start
    ),
  ],
);

flutter_linkify

This widget turns text URLs and emails into clickable inline links in text. In combination with url_launcher, it can open URL in web browser.

Linkify(
  onOpen: (link) async {
    if (await canLaunch(link.url)) {
        await launch(link.url);
      } else {
        throw 'Could not launch $link';
      }
  },
  text: "My firts link by https://tltemplates.com",
  style: TextStyle(color: Colors.red),
  linkStyle: TextStyle(color: Colors.orange),
);

flutter_markdown

Flutter doesn’t use HTML renderer like a web browser so a need for WYSIWYG viewer arises. This package renders Markdown, a lightweight markup language, into a Flutter widget containing a rich text representation. flutter_markdown is built on top of the Dart markdown package.

//simple usage
Markdown(
    controller: controller,
    selectable: true,
    data: 'here is an emoji😀 ',
)

Img tag is supported but limited to URL, file, resource.

extended_text

This package extends the official Text package to add more features. it can be used to build special text like inline image or @somebody quickly,it also support custom background, custom over flow and custom selection toolbar and handles.

It can show inline image by using ImageSpan as following.

class ImageSpan extends ExtendedWidgetSpan {
  ImageSpan(
    ImageProvider image, {
    Key key,
    @required double imageWidth,
    @required double imageHeight,
    EdgeInsets margin,
    int start = 0,
    ui.PlaceholderAlignment alignment = ui.PlaceholderAlignment.bottom,
    String actualText,
    TextBaseline baseline,
    BoxFit fit= BoxFit.scaleDown,
    ImageLoadingBuilder loadingBuilder,
    ImageFrameBuilder frameBuilder,
    String semanticLabel,
    bool excludeFromSemantics = false,
    Color color,
    BlendMode colorBlendMode,
    AlignmentGeometry imageAlignment = Alignment.center,
    ImageRepeat repeat = ImageRepeat.noRepeat,
    Rect centerSlice,
    bool matchTextDirection = false,
    bool gaplessPlayback = false,
    FilterQuality filterQuality = FilterQuality.low,
    GestureTapCallback onTap,
    HitTestBehavior behavior = HitTestBehavior.deferToChild,
  })

blinking_text

if you want to create a blinking text with configurable duration, counter, color, this library is a good choice. It is suitable to notify users about new items.

BlinkText(
	'New Product',
	style: TextStyle(fontSize: 12.0, color: Colors.black),
	endColor: Colors.red,
),

Leave a Comment

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close