Styling the flutter arb files

Question

     "verificationScreenInfoText": "If your sms code does not reach the {phoneNumber} in {timerText}, you can request a new sms code.",
  "@verificationScreenInfoText": {
    "placeholders": {
      "phoneNumber": {
        "type": "String",
        "example": "**********"
      },
      "timerText": {
        "type": "String",
        "example": "23:09"
      }
    }
  },

I have an arb file with this concept. I want to give text styling to,for example, {phoneNumber} bold. Is there a way to do that?

Answer 1

From the perspective of the translation files, that is a single text object. You can not also should not give styling to the arb items anyway.

What you can do is use RichText and create different texts and for the prefix and suffix of the related parts of the related span.

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(
        /// This can be AppLocalizations.current.numberPrefix
        text: 'If your sms code does not reach the ',
        style: DefaultTextStyle.of(context).style,
        children: const <TextSpan>[
          TextSpan(text: 'xxx-xxx-xx-xx', style: TextStyle(fontWeight: FontWeight.bold)),
          /// This can be AppLocalizations.current.numberSuffix
          TextSpan(text: ' in '),
          TextSpan(text: 'xx', style: TextStyle(fontWeight: FontWeight.bold)),
          /// This can be AppLocalizations.current.countDownSuffix
          TextSpan(text: ' seconds you can request a new sms code. '),
        ],
      ),
    );
  }
}

This will look like the following: