This article explains how to extend a Flutter rich‑text editor to support mixed text‑image layout by using WidgetSpan, InlineSpan trees, and the image_picker plugin, providing detailed code examples and a deep dive into the rendering pipeline.
The article details Xianyu’s migration of its messaging rich‑text system to Flutter, explaining how RichText became a MultiChildRenderObjectWidget, how custom emoji placeholders are converted to HTML tags and parsed into TextSpan and WidgetSpan elements, enabling colored text, clickable links, and emoji rendering across Flutter versions.
To meet Xianyu’s e‑commerce product‑detail needs, the team built a custom RichText solution in Flutter that uses a zero‑width‑space placeholder (SpaceSpan) with adjustable letter‑spacing and font‑size to reserve space, then positions any widget via a Stack, enabling inline images, emojis and custom components without altering Flutter’s core rendering, though further work is needed for automatic sizing, text selection and editor integration.
