Question 256953 in Flutter Question posted in
The official Flutter documentation can be found here.

RichText / Text.rich() widget in Flutter not responding to bold text Accessibility option

I’m currently working on a Flutter app where I’m using the RichText widget to display text with various styles. I’ve noticed that the text within the RichText widget does not change when the Accessibility option for bold text is enabled on the device, although it does respond correctly to the option for large text.

Here’s an example of my RichText widget code:

RichText(
  text: TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(
        text: 'This is some bold text',
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 16.0,
        ),
      ),
      TextSpan(
        text: ' and this is normal text.',
        style: TextStyle(fontSize: 16.0),
      ),
    ],
  ),
)

I’ve also tried using Text.rich() but the results are other way around. Text within the Text.rich() widget does not change when the Accessibility option for large text is enabled on the device, although it does respond perfactly to the option for bold text.

Text.rich(
  TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(
        text: 'This is some bold text',
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 16.0,
        ),
      ),
      TextSpan(
        text: ' and this is normal text.',
        style: TextStyle(fontSize: 16.0),
      ),
    ],
  ),
)

Is there a way to make the text respond to both the Accessibility option for bold text and large text? Am I missing something in my code, or is there a workaround for this issue?

Here is an example of my Text.rich() widget code:

Tags:

2

Answers


  1. 0 
        DefaultTextStyle(
    style: TextStyle(
     fontSize: 16.0,
     fontWeight: FontWeight.normal, // Use normal weight as default
     ),
    child: RichText(
    text: TextSpan(
     style: DefaultTextStyle.of(context).style,
      children: <TextSpan>[
    TextSpan(
      text: 'This is some bold text',
      style: TextStyle(
        fontWeight: FontWeight.bold,
      ),
    ),
    TextSpan(
      text: ' and this is normal text.',
    ),
        ],
     ),
   ), 
 )
    Login or Signup to reply.
  2. 0

    I’ve noticed that the text within the RichText widget does not change when the Accessibility option for bold text is enabled on the device

    Just to make sure we’re on the same page, for iOS, are you talking about Settings > Accessibility > Display & Text Size > Bold Text?

    enter image description here

    Most apps and widgets seem to respond to it but a lot of website contents do not. For example, in Safari on the iPhone, the following BBC webpage contents did not change but the iPhone widgets for the time (upper left), the website name (center), and the battery charge (upper right), are bolder.

    enter image description here

    It looks like widgets on webpages (such as buttons [submit] and text areas), honor the bold setting. And the onscreen keyboard is bold, including the text suggestions and emoji and microphone icons.

    enter image description here

    Flutter has information on accessibility. It talks about large fonts but not about bold text. (You noticed that large fonts seems to work.)

    If there’s a Flutter widget that doesn’t respond to accessibility settings, it’s probably not an issue with your code but with the widget itself and you should report a bug.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search