[SOLVED] How to localize text with TextSpan widget?

How to localize text with TextSpan widget?

I am using Flutter Intl android studio plugin for ready made localization. But in my scenario i have the widget like this,

Text.rich(
      TextSpan(
        text: 'It is time to',
        children: [
          TextSpan(
            text: 'Stay Relaxed',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    )

So how can i translate a single message "It is time to Stay Relaxed" and use in Text.rich widget?

Solution

EDIT 2: THIS WAS AN ANSWER TO THE QUESTION ABOVE, AS MENTIONED IT IS NOT TAILORED FOR EVERYONE ALSO, THE ANSWER IS 3 YEARS OLD. WE BUILT LIBRARIES FOR THIS AT THIS STAGE.

EDIT: More explanation The text can not be handled as one piece. Each part of needs to be handled separately. Because from the TextSpans concern, those are different texts. So you need to create two different texts within the arb file.

From the Flutter Intl's perspective, these are two different components. TextSpan has its own drawing perspective. That is why you need to create two different components for these items.

There are packages out there like https://pub.dev/packages/localized_rich_text but I did not use it. In our app I use it like the following.

Flutter Intl creates the localized elements as follows:

AppLocalizations.of(context).tranlatedElement;

//or
AppLocalizations.current.tranlatedElement;

So your Code should be like the following

Text.rich(
   TextSpan(
     text: AppLocalizations.current.relaxTextPrefix,
     children: [
       TextSpan(
         text: AppLocalizations.current.relaxTextSuffix,
         style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
         ),
       ),
     ],
   ),
 ),
)