Rich text components in Flutter

Question

I would like to make a hybrid app using Flutter. One particular kind of component I'm looking at sounds something like this:

• A Chinese character like 家 (which means home) is shown
• When an user clicks on the character, it can display its pronunciation (jia)
• The user also has the option to click to play the pronunciation
• The user can also choose to open a window where an animation of how the character is being written is played.
• So for a sentence like: 蓝天是白云的家（literally translated as: The blue sky is the home of the white clouds）, each of these 7 characters can be individually clicked and users can choose to display / play pronunciation / show how they are written.

Normal static text won't be rich enough to display all these information. My current idea is to make every character a customized widget with such data embedded within.

This task can be quite huge if each Chinese character (there are approximately 5000 characters that are commonly used) has its own rich data format.

Any suggestions on how to approach this problem in an efficient manner in Flutter?

Thanks in advance!

Answer 1

There are a few ways to do this. Using widgets could definitely be an option, but that's probably going to cause you issues in the long run.

Let's break this into two parts:

---

1: Displaying the text

Instead of using widgets, I'd suggest using a RichText with many TextSpan children. You could create a custom class that accepts the string, splits it into characters, and puts each character in its own TextSpan. By using TextSpan.recognizer. You could then either use a TapGestureRecognizer with onTap to show the information when tapped if you don't need the position at which it was tapped, or onTapDown/onTapUp if you do (for example if you want to show a popup right where the click happened as opposed to something like a bottom sheet that comes up).

---

2: Showing the information

Because you're wanting to deal with a large amount of characters, I'd suggest not doing it all in code but instead handling the characters in some other sort of format that can easily be manipulated, for example JSON. That way you can do things like splitting the data it into blocks and loading them as needed, and/or getting them from a web server.

Your data could look something like:

{
  "家": {
    "pronunciation": "jia",
    "audio": "path/to/sound.m4a",
    "animation": "path/to/animation.gif"
  },
  ...
}

You could theoretically even do things like start loading the pronunciation files when the character is first shown or when they click on it.

When the character is tapped, you could:

1. check if data in cache
2. load the data if needed from network/disk
3. open bottom sheet or popup displaying the pronunciation info + buttons for audio & drawing animation