https://github.com/ali-thowfeek/simple_html_css_flutter
This Flutter package allows you to use HTML and inline CSS to style your text. A fork of css_text_for_flutter (https://github.com/hathibelagal-dev/css_text_for_flutter)
https://github.com/ali-thowfeek/simple_html_css_flutter
css dart flutter hacktoberfest html
Last synced: 4 months ago
JSON representation
This Flutter package allows you to use HTML and inline CSS to style your text. A fork of css_text_for_flutter (https://github.com/hathibelagal-dev/css_text_for_flutter)
- Host: GitHub
- URL: https://github.com/ali-thowfeek/simple_html_css_flutter
- Owner: ali-thowfeek
- License: apache-2.0
- Created: 2020-04-23T21:31:12.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2024-05-19T10:14:22.000Z (about 2 years ago)
- Last Synced: 2025-04-13T10:08:21.474Z (about 1 year ago)
- Topics: css, dart, flutter, hacktoberfest, html
- Language: Dart
- Homepage:
- Size: 492 KB
- Stars: 45
- Watchers: 1
- Forks: 29
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Simple Html CSS
[](https://pub.dev/packages/simple_html_css) [](https://github.com/ali-thowfeek/simple_html_css_flutter/blob/master/LICENSE)
This is a fork of [css_text_for_flutter](https://github.com/hathibelagal-dev/css_text_for_flutter)
This package makes it easy for you to convert HTML with inline CSS content
into `RichText` widgets. It supports most CSS properties that are
relevant to **text** content, except for a few. Also gives the ability to
override the styles of the content passed in.
>NOTE: This is not an alternative to webview packages. This package only deals with text.
Here's a sample HTML content with inline CSS styles:
```html
Hello word!
Convert your
HTML and CSS
easily into RichText
Lorem ipsum dolor sit, consectetur adipiscing elit. Pellentesque in leo
id dui bibendum fringilla in et arcu. In vehicula vel est sed mattis.
We all spell recieve wrong.
Some times we
delete stuff
We write things that are
Big, bold or
colorful
Some different FONT with
this part highlighted
Finally some line heights. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque in leo id dui bibendum fringilla
in et arcu. In vehicula vel est sed mattis. Duis varius, sem non mattis.
```
This package can automatically convert all the HTML content above into
`TextSpan` objects or a `RichText` widget. Here's what the render will look like:
## Getting Started
Using `simple_html_css` is extremely easy. First import the library in
your Dart code:
```
import 'package:simple_html_css/simple_html_css.dart';
```
You can then create `TextSpan` from any HTML content by calling the `HTML.toTextSpan()` method. Which you can use to create a `RichText` widget.
```dart
String htmlContent = """
Hello World
""";
RichText(
text: HTML.toTextSpan(context, htmlContent),
maxLines: 4,
//...
);
```
As a shortcut, you can also use the `HTML.toRichText()` method.
```dart
var myRichText = HTML.toRichText(context, htmlContent);
Container(
child: myRichText,
);
```
## Handling Links
Your HTML content can have links. To handle them, you must use the
`linksCallback` optional parameter.
```dart
String htmlContent = """
Please click here or
here.
Go ahead! Try it.
""";
var myRichText = HTML.toRichText(context, htmlContent, linksCallback: (link) {
// You can now use the url_launcher library to open the link.
// Or you can handle the link in your app itself. This gives you
// complete control over your links.
// For now, let's just print it
print(link);
});
```
## Apply a default style
You can apply a global text sytle. This acts as the base text style of all content.
```dart
HTML.toTextSpan(
context,
htmlContent,
defaultTextStyle: TextStyle(
color: Colors.grey[700],
fontSize: 12,
// etc etc
),
);
```
## Overriding styles
You can override the inline styles and apply global styles for each of the
HTML tags in your HTML content.
```dart
String htmlContent =
"""
This has no font size css property, but global style will be applied
The inline color for this is orange, but it will
get overridden by global style defined below
""";
HTML.toTextSpan(
context,
htmlContent,
overrideStyle: {
"p": TextStyle(fontSize: 17.3),
"a": TextStyle(color: Colors.red),
// specify any tag not just the supported ones,
// and apply TextStyles to them and/override them
},
);
```
## Supported HTML Tags
Supports all tags which prints text normally like `p`, `div`, `span`, `body` etc.
And the following special tags which change the text appearance
* `
- `
* `` ``
* `
` `
`
* `` ``
* ``
* `` `` ``
* `` - anchor tags with link click `callback`
## Supported CSS properties (text related)
| supported Css property | supported value(s) |
|:-----------------------|:------------------------------------------------------------------------------------------------------------------------------|
| font-weight | `100 to 900`, `normal`, `medium`, `bold` |
| color | css color name like: `red`, `orangered` etc. or `rgb(0, 0, 255)` or `rgba(0, 0, 50, 0.5)` or Hex `#eee`/`#ff00ff`/`#ff005522` |
| background-color | same as above |
| font-style | `italic` and `normal` |
| font-family | any valid font family. eg: `times` |
| font-size | eg: `18px` or `1.5em` |
| text-decoration | `underline`, `overline`, `none`, `line`, `dotted`, `dashed`, `wavy` |
| line-height | any valid value. eg: `1.5` |
## Partially supported HTML tags
`
` `` `- `
These tags will be rendered on new lines, but without the number or symbol
## Workaround for text not rendering properly
If you experienced any rendering issue like this,
It is becuase you need to have the build `context` of a Material parent
Widget such as a `Scaffold` or `Material`.
To get the context directly a quick workaround is adding a `Builder`
```dart
Scaffold(
body: Builder(
builder: (context) {
return RichText(
text: HTML.toTextSpan(context, htmlContent),
);
},
),
)
```
## TODO
* Add support `
` tag with correct indentation
* Add support `` tag with correct indentation