RichTrex: Span

An extended package of RichTrex package which is used to encode list of TextSpan into String, and decode String into list of TextSpan.

Preview

Primary Feature

• Font Color ✅
• Font Weight ✅
• Font Size ✅
• Font Family ✅
• Custom ❌
• Italic ✅
• Underline ✅
• Strikethrough ✅
• Background Color ✅
• Image ✅
• Alignment ✅
• Ordered List ❌
• Unordered List ❌
• Block Quote ✅
• Hyperlink ✅

Secondary Feature

• Superscript ❌
• Subscript ❌
• Shadow ✅
• Vertical Space ✅
• Horizontal Space ✅
• Overline ✅
• Padding ✅
• Table ❌
• Video ❌

Install

Add this line to your pubspec.yaml.

dependencies:
  richtrex_span: ^1.2.0

Usage

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(),
        );

Codelist

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>