markup_text 1.0.5

Flutter widget to use Markup to easily create formatted Text with colors, style and links.

markup_text

Flutter widget to use Markup to easily create formatted Text.

Please star the repo to support the project

Resources:

• Pub Package
• GitHub Repository

Usage

MarkupText is a wrapper for RichText that simplifies the creation of text with mixed styles.

MarkupText("This is a (b)Markup(/b) example with (c deepPurple)a purple text(/c)")

style

The style parameter works as with the Text widget. Styles defined will merge with default Style for Text.

  MarkupText(
    "This is a (b)bold(/b) text (a http://flutter.dev)with a link(/a),"
    " an (u)underlined(/u) word (a http://pub.dev)with"
    " a second link containing a word in (i)italics(/i)(/a) and (c #ff0000)colored(/c) words"
    " (c deepPurpleAccent)here(/c) and (c green)there(/c).",
    style: TextStyle(fontSize: 18),
  ),

  MarkupText(
    "(c purple)(icon flight_takeoff) Departures(/c)\n"
    "(c teal)(icon flight_land) Arrivals(/c)",
    style: TextStyle(fontSize: 18),
  ),

Markup language

The following tags are recognized by the widget

Bold

Use tag (b)..(/b) for bold text

MarkupText("This is a (b)bold(/b) text")

Italic

Use tag (i)..(/i) for italic text

MarkupText("This is an (i)italic(/i) text")

Underlined

Use tag (u)..(/u) for underlined text

MarkupText("This is an (u)underlined(/u) text")

Links

Use tag (a <url>)..(/a) to create links

MarkupText("(a http://example.com)This is a link(/a)")

Colors

Use tag (c <color>)..(/c) to create colored text

MarkupText("(c #ff0000)Colors from RGB codes(/c)")

MarkupText("(c amber)You can also use named colors(/c)")

You can use all the colors included in the Material Colors class from Flutter. You can check the full list below.

Icons

Use tag (icon <icon name>) to insert an icon. The icon will be colored when affected by a color tag.

MarkupText("(c red)(icon error) An error has occurred(/c)")

You can use all the icons included in the Material Icons class from Flutter.

Colors list

<color> can be either a RGB color code started with # or a named color. Valid names are the ones defined on the Flutter Colors class:

Color Name	Color
amber
amberAccent
black
black12
black26
black38
black45
black54
black87
blue
blueAccent
blueGrey
brown
cyan
cyanAccent
deepOrange
deepOrangeAccent
deepPurple
deepPurpleAccent
green
greenAccent
grey
indigo
indigoAccent
lightBlue
lightBlueAccent
lightGreen
lightGreenAccent
lime
limeAccent
orange
orangeAccent
pink
pinkAccent
purple
purpleAccent
red
redAccent
teal
tealAccent
transparent
white
white10
white12
white24
white30
white38
white54
white60
white70
yellow
yellowAccent