# simple_html_css_flutter
**Repository Path**: kurumi/simple_html_css_flutter
## Basic Information
- **Project Name**: simple_html_css_flutter
- **Description**: No description available
- **Primary Language**: Dart
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-07-09
- **Last Updated**: 2024-07-09
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## 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.
Need more? click this link
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
* `