https://github.com/hathibelagal-dev/css_text_for_flutter

This Flutter library allows you to use CSS to style your text
https://github.com/hathibelagal-dev/css_text_for_flutter

css dart flutter html

Last synced: 3 months ago
JSON representation

This Flutter library allows you to use CSS to style your text

• Host: GitHub
• URL: https://github.com/hathibelagal-dev/css_text_for_flutter
• Owner: hathibelagal-dev
• License: apache-2.0
• Created: 2019-03-06T17:23:21.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-05-26T08:52:54.000Z (over 1 year ago)
• Last Synced: 2023-08-20T21:39:50.806Z (over 1 year ago)
• Topics: css, dart, flutter, html
• Language: C++
• Homepage: https://pub.dev/packages/css_text
• Size: 515 KB
• Stars: 53
• Watchers: 4
• Forks: 16
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# CSS Text

This library makes it easy for you to convert HTML and CSS content into `RichText` widgets. It supports most CSS properties that are relevant to text content, except those related to text alignment.

Here's some sample HTML content with inline CSS styles:

```html

This is a test

So is this

And this!









Hello World!!




How are you today?




But why are you doing this?





Can you tell me?




Multiple font 

weights



Please visit Flutter docs









This text is slightly transparent, and has a slightly transparent background too.





```

This library can automatically convert all the HTML content above into a `TextSpan` object or a `RichText` widget. Here's what the rendered HTML will look like:

![](sample.png)

## Getting Started

Using `css_text` is extremely easy. First import the library in your Dart code:

```

import 'package:css_text/css_text.dart';

```

You can then create `RichText` widget from any HTML content by calling the `HTML.toTextSpan()` method.

```

String htmlContent = """

Hello World

""";

var myRichText = RichText(text: HTML.toTextSpan(context, htmlContent));

```

As a shortcut, you can also use the `HTML.toRichText()` method.

```

myRichText = HTML.toRichText(context, htmlContent);

```

## Handling Links

Your HTML content can have links. To handle them, you must use the `linksCallback` optional parameter.

```

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

});

```