https://github.com/nialixus/richtrex_span
An extended package of RichTrex package which is used to encode TextSpan into String, and decode String into TextSpan.
https://github.com/nialixus/richtrex_span
dart flutter flutter-package pub-dev wysiwyg
Last synced: 10 months ago
JSON representation
An extended package of RichTrex package which is used to encode TextSpan into String, and decode String into TextSpan.
- Host: GitHub
- URL: https://github.com/nialixus/richtrex_span
- Owner: Nialixus
- License: bsd-3-clause
- Created: 2022-06-19T03:02:34.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-28T07:26:37.000Z (about 3 years ago)
- Last Synced: 2025-03-12T17:06:39.735Z (11 months ago)
- Topics: dart, flutter, flutter-package, pub-dev, wysiwyg
- Language: Dart
- Homepage:
- Size: 186 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
```yaml
dependencies:
richtrex_span: ^1.2.0
```
## Usage
First, import the RichTrex: Span package.
```dart
import 'package:richtrex_span/richtrex_span.dart';
```
And to encode, you need to set a list of `RichTrexSpan` just like this.
```dart
const List 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.
```dart
String text = """RichTrex: Format
This is an Example of using RichTrexFormat.""";
List result = RichTrex.decode(text);
```
and implement the decoded result into `Text.rich` just like this.
```dart
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>