An extended package of RichTrex
package which is used to encode list of TextSpan
into String
, and decode String
into list of TextSpan
.
![]() |
![]() |
- Font Color ✅
- Font Weight ✅
- Font Size ✅
- Font Family ✅
- Custom ❌
- Italic ✅
- Underline ✅
- Strikethrough ✅
- Background Color ✅
- Image ✅
- Alignment ✅
- Ordered List ❌
- Unordered List ❌
- Block Quote ✅
- Hyperlink ✅
- Superscript ❌
- Subscript ❌
- Shadow ✅
- Vertical Space ✅
- Horizontal Space ✅
- Overline ✅
- Padding ✅
- Table ❌
- Video ❌
Add this line to your pubspec.yaml.
dependencies:
richtrex_span: ^1.2.0
First, import the RichTrex: Span package.
import 'package:richtrex_span/richtrex_span.dart';
And to encode, you need to set a list of RichTrexSpan
just like this.
const List<RichTrexSpan> span = [
RichTrexSpan(
text: "RichTrex: Format",
fontWeight: FontWeight.bold,
fontSize: 25,
align: Alignment.center),
RichTrexSpan(
text: "\n This is an Example of using RichTrexFormat.")
];
String result = RichTrex.encode(span);
or if you want to decode list of RichTrexSpan
from String
you can use this.
String text = """<style="font-weight:6;font-size:25.0;align-x:0.0;align-y:0.0;">RichTrex: Format</style>
This is an Example of using RichTrexFormat.""";
List<RichTrexSpan> result = RichTrex.decode(text);
and implement the decoded result into Text.rich
just like this.
return Text.rich(
TextSpan(children: RichTrexSpan.decode(text)),
key: UniqueKey(),
);
Definition | RichTrexSpan | String |
Alignment |
RichTrexSpan(text: "value", align: Alignment.center)
|
<style="align-x:0.0;align-y:0.0;">value</style>
|
Background Color |
RichTrexSpan(text:"value", backgroundColor: Colors.red)
|
<style="background-color:0xFFF44336;">value</style>
|
Blockquote |
RichTrexSpan(text:"value", blockquote: true)
|
<style="decoration:blockquote;">value</style>
|
Color |
RichTrexSpan(text:"value", color: Colors.red)
|
<style="font-color:0xFFF44336;">value</style>
|
Font Family |
RichTrexSpan(text: "value", fontFamily: "Dancing")
|
<style="font-family:Dancing;">value</style>
|
Font Size |
RichTrexSpan(text:"value", fontSize: 30.0)
|
<style="font-size:30;">value</style>
|
Font Weight |
RichTrexSpan(text: "value", fontWeight: FontWeight.bold)
|
<style="font-weight:6;">value</style>
|
Horizontal Space |
RichTrexSpan(text:"value", horizontalSpace: 10.0)
|
<style="horizontal-space:10;">value</style>
|
Hyperlink |
RichTrexSpan(text: "value", hyperlink: "https://github.com/Nialixus")
|
<style="hyperlink:https://github.com/Nialixus;">value</style>
|
Image |
RichTrexSpan.image(image: RichTrexImage.network("https://avatars.githubusercontent.com/u/45191605?v=4", size: Size(70, 70)))
|
<widget="image-network:https://avatars.githubusercontent.com/u/45191605?v=4;image-width:70;image-height:70;"/>
|
Italic |
RichTrexSpan(text: "value", italic: true)
|
<style="decoration:italic;">value</style>
|
Overline |
RichTrexSpan(text: "value", overline: true)
|
<style="decoration:overline;">value</style>
|
Padding |
RichTrexSpan(text: "value", padding: EdgeInsets.all(20.0))
|
<style="padding-left:20.0;padding-top:20.0;padding-right:20.0;padding-bottom:20.0;">value</style>
|
Shadow |
RichTrexSpan(text: "value", shadow: Shadow(color: Colors.red, blurRadius: 10, offset: Offset(-1, -1)))
|
<style="shadow-color:0xFFF44336;shadow-blur:10.0;shadow-vertical:-1.0;shadow-horizontal:-1.0;">value</style>
|
Strikethrough |
RichTrexSpan(text: "value", strikeThrough: true)
|
<style="decoration:strikethrough;">value</style>
|
Underline |
RichTrexSpan(text: "value", underline: true)
|
<style="decoration:underline;">value</style>
|
Vertical Space |
RichTrexSpan(text:"value", verticalSpace: 10.0)
|
<style="vertical-space:10;">value</style>
|