A Tricky Solution for Implementing Inline-Image-In-Text Feature in Flutter.
Switch branches/tags
Nothing to show
Clone or download
Li Mengyun
Li Mengyun fix bug
Change-Id: I6a1238bc69e9a1a1d6f5218003070e30cfbb64c3
Latest commit 5ad3eac Dec 13, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
android fix bug Dec 13, 2018
doc Add: support setting image margin Dec 4, 2018
example Add: support setting image margin Dec 4, 2018
images add all code Nov 25, 2018
ios add all code Nov 25, 2018
lib fix bug Dec 13, 2018
.gitignore fix bug Dec 13, 2018
CHANGELOG.md add all code Nov 25, 2018
LICENSE add all code Nov 25, 2018
README.md Add: support setting image margin Dec 4, 2018
pubspec.yaml add all code Nov 25, 2018

README.md

RealRichText

A Tricky Solution for Implementing Inline-Image-In-Text Feature in Flutter.

Getting Started

According to the related 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:

  1. 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.
  2. Override the paint function,calculate the right offset via the getOffsetForCaret() api to draw the image over the space.

For more details, please refer to the source code.

Usage

The only thing you have to do is converting your origin text to a TextSpan/ImageSpan List first.

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:real_rich_text/real_rich_text.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: RealRichText([
            TextSpan(
              text: "A Text Link",
              style: TextStyle(color: Colors.red, fontSize: 14),
              recognizer: TapGestureRecognizer()
                ..onTap = () {
                  debugPrint("Link Clicked.");
                },
            ),
            ImageSpan(
              AssetImage("packages/real_rich_text/images/emoji_9.png"),
              imageWidth: 24,
              imageHeight: 24,
            ),
            ImageSpan(AssetImage("packages/real_rich_text/images/emoji_10.png"),
                imageWidth: 24,
                imageHeight: 24,
                margin: EdgeInsets.symmetric(horizontal: 10)),
            TextSpan(
              text: "哈哈哈",
              style: TextStyle(color: Colors.yellow, fontSize: 14),
            ),
            TextSpan(
              text: "@Somebody",
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 14,
                  fontWeight: FontWeight.bold),
              recognizer: TapGestureRecognizer()
                ..onTap = () {
                  debugPrint("Link Clicked");
                },
            ),
            TextSpan(
              text: " #RealRichText# ",
              style: TextStyle(color: Colors.blue, fontSize: 14),
              recognizer: TapGestureRecognizer()
                ..onTap = () {
                  debugPrint("Link Clicked");
                },
            ),
            TextSpan(
              text: "showing a bigger image",
              style: TextStyle(color: Colors.black, fontSize: 14),
            ),
            ImageSpan(AssetImage("packages/real_rich_text/images/emoji_10.png"),
                imageWidth: 24,
                imageHeight: 24,
                margin: EdgeInsets.symmetric(horizontal: 5)),
            TextSpan(
              text: "and seems working perfect……",
              style: TextStyle(color: Colors.black, fontSize: 14),
            ),
          ]),
        ),
      ),
    );
  }
}

Note

ImageSpan must set the width & height properties.

if 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.