{"id":26720844,"url":"https://github.com/ali-thowfeek/simple_html_css_flutter","last_synced_at":"2026-03-09T19:40:20.776Z","repository":{"id":37796571,"uuid":"258335495","full_name":"ali-thowfeek/simple_html_css_flutter","owner":"ali-thowfeek","description":"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)","archived":false,"fork":false,"pushed_at":"2024-05-19T10:14:22.000Z","size":504,"stargazers_count":45,"open_issues_count":7,"forks_count":29,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-13T10:08:21.474Z","etag":null,"topics":["css","dart","flutter","hacktoberfest","html"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ali-thowfeek.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-23T21:31:12.000Z","updated_at":"2024-11-14T15:06:03.000Z","dependencies_parsed_at":"2024-05-19T06:30:10.787Z","dependency_job_id":"b7b3cde0-dbdc-4377-8a98-9b47d6930583","html_url":"https://github.com/ali-thowfeek/simple_html_css_flutter","commit_stats":{"total_commits":51,"total_committers":4,"mean_commits":12.75,"dds":0.4117647058823529,"last_synced_commit":"631d6adaa3a09367f309d1b8e25ce957d43315e3"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ali-thowfeek%2Fsimple_html_css_flutter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ali-thowfeek%2Fsimple_html_css_flutter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ali-thowfeek%2Fsimple_html_css_flutter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ali-thowfeek%2Fsimple_html_css_flutter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ali-thowfeek","download_url":"https://codeload.github.com/ali-thowfeek/simple_html_css_flutter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248830416,"owners_count":21168271,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","dart","flutter","hacktoberfest","html"],"created_at":"2025-03-27T19:25:57.228Z","updated_at":"2025-10-09T16:06:29.967Z","avatar_url":"https://github.com/ali-thowfeek.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simple Html CSS\n\n[![Pub Version](https://img.shields.io/pub/v/simple_html_css?style=flat-square)](https://pub.dev/packages/simple_html_css) [![GitHub](https://img.shields.io/badge/License-Apache%202.0-blue.svg?style=flat-square)](https://github.com/ali-thowfeek/simple_html_css_flutter/blob/master/LICENSE)\n\nThis is a fork of [css_text_for_flutter](https://github.com/hathibelagal-dev/css_text_for_flutter)\n\nThis package makes it easy for you to convert HTML with inline CSS content\ninto `RichText` widgets. It supports most CSS properties that are\nrelevant to **text** content, except for a few. Also gives the ability to\noverride the styles of the content passed in.\n\n\u003eNOTE: This is not an alternative to webview packages. This package only deals with text.\n\nHere's a sample HTML content with inline CSS styles:\n\n```html\n\u003cbody\u003e\n    \u003ch1 style='color: white; font-size:50px; font-style:italic; \n    background-color: rgb(0,122,255); font-weight:100;)'\u003e Hello word! \u003c/h1\u003e\n    \u003ch1 style=''\u003eConvert your \u003cspan style='color:lightseagreen;'\u003e\n    HTML\u003c/span\u003e and \u003cspan style='color:dodgerblue'\u003eCSS\u003c/span\u003e \n    easily into RichText\u003c/h1\u003e\n    \u003cp\u003eLorem ipsum dolor sit, consectetur adipiscing elit. Pellentesque in leo \n    id dui bibendum fringilla in et arcu. In vehicula vel est sed mattis.\u003c/p\u003e\n    \u003cp\u003e\u003ca href=\"https://google.com\"\u003eNeed more? click this link\u003c/a\u003e\u003c/p\u003e\n    \u003cp\u003eWe all spell \u003cspan style='color:crimson; \n    text-decoration: underline wavy;'\u003erecieve\u003c/span\u003e wrong.\u003cbr /\u003eSome times we \n    delete \u003cdel\u003estuff\u003c/del\u003e\u003c/p\u003e\n    \u003cdiv style='font-size:17px'\u003eWe write things that are \n    \u003cspan style='font-size:1.5em;'\u003eBig,\u003c/span\u003e \u003cb\u003ebold\u003c/b\u003e\u0026nbsp; or \n    \u003cspan style='color:brown'\u003ecolorful\u003c/span\u003e\u003c/div\u003e\n    \u003cp style='font-family:times;'\u003eSome different FONT with \n    \u003cspan style='background-color:lightcyan;'\u003ethis part highlighted\u003c/span\u003e\u003c/p\u003e\n    \u003cdiv style='line-height:2; font-size:17px;'\u003e\u003cb style='color: rgb(0,122,255); \n    font-weight:500;'\u003eFinally some line heights.\u003c/b\u003e Lorem ipsum dolor sit amet, \n    consectetur adipiscing elit. Pellentesque in leo id dui bibendum fringilla \n    in et arcu. In vehicula vel est sed mattis. Duis varius, sem non mattis.\u003c/div\u003e\n\u003c/body\u003e\n```\n\nThis package can automatically convert all the HTML content above into\n`TextSpan` objects or a `RichText` widget. Here's what the render will look like:\n\n![Sample](sample.png)\n\n## Getting Started\n\nUsing `simple_html_css` is extremely easy. First import the library in\nyour Dart code:\n\n```\nimport 'package:simple_html_css/simple_html_css.dart';\n```\n\nYou can then create `TextSpan` from any HTML content by calling the `HTML.toTextSpan()` method. Which you can use to create a `RichText` widget.\n\n```dart\nString htmlContent = \"\"\"\n\u003cp style=\"font-size:1.5em;\"\u003eHello World\u003c/p\u003e\n\"\"\";\n\nRichText(\n  text: HTML.toTextSpan(context, htmlContent),\n  maxLines: 4,\n  //...\n  );\n```\n\nAs a shortcut, you can also use the `HTML.toRichText()` method.\n\n```dart\nvar myRichText = HTML.toRichText(context, htmlContent);\n\nContainer(\n  child: myRichText,\n);\n```\n\n## Handling Links\n\nYour HTML content can have links. To handle them, you must use the\n`linksCallback` optional parameter.\n\n```dart\nString htmlContent = \"\"\"\u003cspan style=\"font-size:2em\"\u003e\nPlease click \u003ca href=\"https://pub.dartlang.org\"\u003ehere\u003c/a\u003e or \n\u003ca href=\"https://old.reddit.com\"\u003ehere\u003c/a\u003e.\u003cbr/\u003e\n\u003cbr/\u003e\nGo ahead! Try it.\n\u003c/span\u003e\"\"\";\n\nvar myRichText = HTML.toRichText(context, htmlContent, linksCallback: (link) {\n    // You can now use the url_launcher library to open the link.\n    // Or you can handle the link in your app itself. This gives you\n    // complete control over your links.\n    // For now, let's just print it\n    print(link);\n});\n```\n\n## Apply a default style\n\nYou can apply a global text sytle. This acts as the base text style of all content.\n\n```dart\nHTML.toTextSpan(\n      context,\n      htmlContent,\n      defaultTextStyle: TextStyle(\n        color: Colors.grey[700],\n        fontSize: 12,\n        // etc etc\n      ),\n    );\n```\n\n## Overriding styles\n\nYou can override the inline styles and apply global styles for each of the\nHTML tags in your HTML content.\n\n```dart\nString htmlContent =\n   \"\"\"\n   \u003cp\u003eThis has no font size css property, but global style will be applied\u003c/p\u003e\n   \u003ca style='color: orange;'\u003eThe inline color for this is orange, but it will \n   get overridden by global style defined below\u003c/a\u003e\n   \"\"\";\n\nHTML.toTextSpan(\n      context,\n      htmlContent,\n      overrideStyle: {\n        \"p\": TextStyle(fontSize: 17.3),\n        \"a\": TextStyle(color: Colors.red),\n        // specify any tag not just the supported ones,\n        // and apply TextStyles to them and/override them\n      },\n    );\n```\n\n## Supported HTML Tags\n\nSupports all tags which prints text normally like `p`, `div`, `span`, `body` etc.  \nAnd the following special tags which change the text appearance\n\n* `\u003ch1\u003e - \u003ch6\u003e`\n* `\u003cb\u003e` `\u003cstrong\u003e`\n* `\u003cbr\u003e` `\u003cbr /\u003e`\n* `\u003ci\u003e` `\u003cem\u003e`\n* `\u003cu\u003e`\n* `\u003cstrike\u003e` `\u003cdel\u003e` `\u003cs\u003e`\n* `\u003ca\u003e` - anchor tags with link click `callback`\n\n## Supported CSS properties (text related)\n\n| supported Css property | supported value(s)                                                                                                            |\n|:-----------------------|:------------------------------------------------------------------------------------------------------------------------------|\n| font-weight            | `100 to 900`, `normal`, `medium`, `bold`                                                                                      |\n| 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` |\n| background-color       | same as above                                                                                                                 |\n| font-style             | `italic` and `normal`                                                                                                         |\n| font-family            | any valid font family. eg: `times`                                                                                            |\n| font-size              | eg: `18px` or `1.5em`                                                                                                         |\n| text-decoration        | `underline`, `overline`, `none`, `line`, `dotted`, `dashed`, `wavy`                                                           |\n| line-height            | any valid value. eg: `1.5`                                                                                                    |\n\n## Partially supported HTML tags\n\n`\u003col\u003e` `\u003cul\u003e` `\u003cli\u003e`\nThese tags will be rendered on new lines, but without the number or symbol\n\n## Workaround for text not rendering properly\n\n![Render issue](render_problem.png)\n\nIf you experienced any rendering issue like this,\nIt is becuase you need to have the build `context` of a Material parent\nWidget such as a `Scaffold` or `Material`.\n\nTo get the context directly a quick workaround is adding a `Builder`\n\n```dart\nScaffold(\n  body: Builder(\n    builder: (context) {\n        return RichText(\n          text: HTML.toTextSpan(context, htmlContent),\n      );\n    },\n  ),\n)\n```\n\n## TODO\n* Add support `\u003cul\u003e` tag with correct indentation\n* Add support `\u003col\u003e` tag with correct indentation\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fali-thowfeek%2Fsimple_html_css_flutter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fali-thowfeek%2Fsimple_html_css_flutter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fali-thowfeek%2Fsimple_html_css_flutter/lists"}