Flutter rich content localization

Question

The package intl exists to localize the flutter application but the Intl.message only returns String

How can I have a rich content localization?

Hello $name! , and make only $name bold, Consider that the order of hello and $name can be different in different languages
I read terms of services and accepted it , and link only terms of services part
in [TEXT_INPUT] days , the [TEXT_INPUT] has a text after and a text before, but in some languages there is no 2 text, just one text after or before, or days is before and in is after [TEXT_INPUT]

score 6 · Answer 1 · answered Aug 10 '22 at 12:13

Have a look at the styled_text package. You get to specify the text (content) separately from the formatting, witch allows you to use standard i18n approaches.

Text format is specified as tags wich you can define globally (e.g. in a resource class) and then use everywhere. Sounds like a good solution to me.

Example (from the Readme):

StyledText(
  text: 'Test: <bold>bold</bold> text.',
  tags: {
    'bold': const StyledTextTag(style: const TextStyle(fontWeight: FontWeight.bold)),
  },
)

will display like:

Test: bold text.

If you use the i18n package and a resource class instance R for the tags, this might look like:

StyledText(
  text: S.testBoldText,
  tags: R.styledTextTags,
);

Just keep in mind that the tags need to be preserved in translation.

What a great tool! Thanks for sharing :) – flocbit Dec 08 '22 at 12:34 — flocbit, Dec 08 '22 at 12:34

score 1 · Answer 2 · answered Oct 10 '21 at 13:46

1

Here is an example of how you can inject variables into your translation.

"hello_name": "Hello {name}",
"@hello_name": {
        "placeholders": {
            "name": {
                "type": "String"
            }
        }
    },

This will generate a function hello_name for you to pass name

There is no styling support but if you need it then just don't use placeholders like in the above example and have your text be separate and style it using RichText where you specify what parts of your text need to have what styling. You don't need to worry about directionality as it will be handled for you depending on your local.

answered Oct 10 '21 at 13:46

moneer alhashim

800
4
11

I know it intl has inject variables, the problem is there is no advanced options for variable, see my 3rd example, we cannot have a text field variable – WebMaster Oct 10 '21 at 13:58
1

There are no advanced options as you know. So as you probably know you can use `RichText` to work around this. – moneer alhashim Oct 10 '21 at 14:04
Ok thanks, I just wanted to be sure – WebMaster Oct 10 '21 at 15:38
I use this mark_down package to add some simple styles to localised strings. https://pub.dev/packages/flutter_markdown – Sander Roest Oct 22 '21 at 14:54

score 1 · Accepted Answer · answered Apr 11 '23 at 11:11

The slang package has built-in rich text support.

It will look like this:

{
  "myRichText(rich)": "Welcome {name}"
}

Widget a = Text.rich(t.myRichText(
  // Show name in blue color
  name: TextSpan(text: 'Tom', style: TextStyle(color: Colors.blue)),
));

Flutter rich content localization

3 Answers3