Press "Enter" to skip to content

Using Rich Text on Flutter – Read and Display from Json File

This tutorial shows you how to read rich text type content from a json file. Reading plain text from a json file is simple and we already learnt in the previous lesson. If your text contains special characters, multiple lines, emoticons, using languages other than English, Unicode special icons and characters, etc, then you cannot read such content from the json file. Basically, we read single lines of text content from a json file.

To solve this problem, there are mainly two solutions.

Edit Json file on Android Studio

Open the json file on Android Studio and paste the Rich Content directly, then your content will be automatically convert into supportable format. That is, next lines and unsupported characters will be converted into supportable form.

Using rich text on flutter android studio

Use Encrypted Data on Json File

You need to encrypt your content using any encryption method. Here we use base64 or base64ulr encryption method.
You can simply paste and convert your rich content into single line base64ulr format using this site. https://simplycalc.com/base64url-encode.php

base64 url encoding in flutter

Use the encrypted value on the json file.

But on your flutter app, you need to decrypt the content.

Text(utf8.decode(base64Url.decode(_items[index]["fruit"]))),

Read: Learn how to read data from json

Note: If you are using encrypt – decrypt method, then all your text even simple a text should be on this method.

Sample Output:

Flutter display rich text with format

Be First to Comment

Leave a Reply