How to localize text with TextSpan widget?

user_13293357 0
Viewed 428

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?

dart flutter localization
1 Answers

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,
         ),
       ),
     ],
   ),
 ),
)
user_17448730
Related