{"id":20464447,"url":"https://github.com/bytedance/realrichtext","last_synced_at":"2025-09-01T15:32:16.436Z","repository":{"id":49845645,"uuid":"159003183","full_name":"bytedance/RealRichText","owner":"bytedance","description":" A Tricky Solution for Implementing Inline-Image-In-Text Feature in Flutter.","archived":false,"fork":false,"pushed_at":"2019-07-25T11:59:24.000Z","size":314,"stargazers_count":658,"open_issues_count":16,"forks_count":84,"subscribers_count":17,"default_branch":"master","last_synced_at":"2024-12-22T03:06:17.468Z","etag":null,"topics":["flutter","inline-images","rich-text"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bytedance.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}},"created_at":"2018-11-25T06:05:52.000Z","updated_at":"2024-09-17T00:17:39.000Z","dependencies_parsed_at":"2022-09-02T06:21:02.745Z","dependency_job_id":null,"html_url":"https://github.com/bytedance/RealRichText","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytedance%2FRealRichText","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytedance%2FRealRichText/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytedance%2FRealRichText/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytedance%2FRealRichText/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bytedance","download_url":"https://codeload.github.com/bytedance/RealRichText/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231698635,"owners_count":18412843,"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":["flutter","inline-images","rich-text"],"created_at":"2024-11-15T13:15:04.209Z","updated_at":"2024-12-29T04:17:10.032Z","avatar_url":"https://github.com/bytedance.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RealRichText\n\nA Tricky Solution for Implementing **Inline-Image-In-Text** Feature in Flutter.\n\n\u003cimg src=\"https://github.com/limengyun2008/RealRichText/blob/master/doc/example.png\" width=\"320\"\u003e\n\n## Getting Started\n\nAccording to the related Flutter Issues([#2022](https://github.com/flutter/flutter/issues/2022)) , Inline-Image-In-Text is a long-time(2 years) missing feature since RichText(or the underlying Paragraph) does only support pure text. But we can solve this problem in a simple/tricky way:\n\n1. Regard the images as a particular blank TextSpan, convert image's width and height to textspan's letterSpacing and fontSize. the origin paragraph will do the layout operation and leave the desired image space for us.\n2. Override the paint function，calculate the right offset via the getOffsetForCaret() api to draw the image over the space.\n\nFor more details, please refer to the source code.\n\n## Usage\n\nThe only thing you have to do is converting your origin text to a TextSpan/ImageSpan List first.\n\n```Dart\nimport 'package:flutter/gestures.dart';\nimport 'package:flutter/material.dart';\nimport 'package:real_rich_text/real_rich_text.dart';\n\nvoid main() =\u003e runApp(MyApp());\n\nclass MyApp extends StatefulWidget {\n  @override\n  _MyAppState createState() =\u003e _MyAppState();\n}\n\nclass _MyAppState extends State\u003cMyApp\u003e {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: Scaffold(\n        appBar: AppBar(\n          title: const Text('Plugin example app'),\n        ),\n        body: Center(\n          child: RealRichText([\n            TextSpan(\n              text: \"A Text Link\",\n              style: TextStyle(color: Colors.red, fontSize: 14),\n              recognizer: TapGestureRecognizer()\n                ..onTap = () {\n                  debugPrint(\"Link Clicked.\");\n                },\n            ),\n            ImageSpan(\n              AssetImage(\"packages/real_rich_text/images/emoji_9.png\"),\n              imageWidth: 24,\n              imageHeight: 24,\n            ),\n            ImageSpan(AssetImage(\"packages/real_rich_text/images/emoji_10.png\"),\n                imageWidth: 24,\n                imageHeight: 24,\n                margin: EdgeInsets.symmetric(horizontal: 10)),\n            TextSpan(\n              text: \"哈哈哈\",\n              style: TextStyle(color: Colors.yellow, fontSize: 14),\n            ),\n            TextSpan(\n              text: \"@Somebody\",\n              style: TextStyle(\n                  color: Colors.black,\n                  fontSize: 14,\n                  fontWeight: FontWeight.bold),\n              recognizer: TapGestureRecognizer()\n                ..onTap = () {\n                  debugPrint(\"Link Clicked\");\n                },\n            ),\n            TextSpan(\n              text: \" #RealRichText# \",\n              style: TextStyle(color: Colors.blue, fontSize: 14),\n              recognizer: TapGestureRecognizer()\n                ..onTap = () {\n                  debugPrint(\"Link Clicked\");\n                },\n            ),\n            TextSpan(\n              text: \"showing a bigger image\",\n              style: TextStyle(color: Colors.black, fontSize: 14),\n            ),\n            ImageSpan(AssetImage(\"packages/real_rich_text/images/emoji_10.png\"),\n                imageWidth: 24,\n                imageHeight: 24,\n                margin: EdgeInsets.symmetric(horizontal: 5)),\n            TextSpan(\n              text: \"and seems working perfect……\",\n              style: TextStyle(color: Colors.black, fontSize: 14),\n            ),\n          ]),\n        ),\n      ),\n    );\n  }\n}\n```\n\n## Note\n\nImageSpan must set the width \u0026 height properties.\n\nif your image's width or height is not specific, you can wrap two RealRichText in a StatefulWidget, one for showing placeholder image and the other for showing the actual image when it is ready.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbytedance%2Frealrichtext","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbytedance%2Frealrichtext","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbytedance%2Frealrichtext/lists"}