If MediaQuery boldText is true, you get undesired text overflow.

Steps to Reproduce

Ensure boldText is true. You can do this by having this kind of code for your MaterialApp

MaterialApp(
      builder: (context, child) {
        final MediaQueryData data = MediaQuery.of(context);
        return MediaQuery(
          data: data.copyWith(
            boldText: true,
          ),
          child: const Home(),
        );
      },
    );

You can then notice that it seems text isn't resized correctly, provided that the TextStyle of AutoSizeText has a normal FontWeight;

Below is all the code you need to see an easy example. Here is an image of what you get.

Screen Shot 2022-02-09 at 3 04 22 PM

import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        final MediaQueryData data = MediaQuery.of(context);
        return MediaQuery(
          data: data.copyWith(
            boldText: true,
          ),
          child: const Home(),
        );
      },
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final AutoSizeGroup autoSizeGroup = AutoSizeGroup();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            children: [
              Expanded(
                child: TextWidget(
                  'AB',
                  autoSizeGroup: autoSizeGroup,
                ),
              ),
              Expanded(
                child: TextWidget(
                  'ABCDE',
                  autoSizeGroup: autoSizeGroup,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class TextWidget extends StatelessWidget {
  const TextWidget(
    this.label, {
    required this.autoSizeGroup,
    Key? key,
  }) : super(key: key);

  final String label;
  final AutoSizeGroup autoSizeGroup;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 7),
      child: Row(
        children: [
          Expanded(
            flex: 5,
            child: Padding(
              padding: const EdgeInsets.only(
                left: 16,
                top: 20,
              ),
              child: AutoSizeText(
                label + ':',
                style: const TextStyle(
                  fontSize: 20,
                ),
                maxLines: 1,
                minFontSize: 1,
                group: autoSizeGroup,
                maxFontSize: 20,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ),
          Flexible(
            fit: FlexFit.loose,
            flex: 7,
            child: Padding(
              padding: const EdgeInsets.only(right: 8),
              child: Container(
                child: const Text('Some variable content!'),
                color: Colors.amber.shade800,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

However, if you change the fontWeight in the TextStyle of the AutoSizeText widget to be FontWeight.bold, everything is okay.

One quick fix for those who have the same issue is to add

fontWeight: MediaQuery.of(context).boldText ? FontWeight.bold : null

to the TextStyle of all AutoSizeText widgets.

This is a problem when people turn on Bold Text in accessibility settings on iOS.

Version

Flutter version: 2.10.0
auto_size_text version: 3.0.0

simc / auto_size_text

If MediaQuery boldText is true, you get undesired text overflow. #104