Skip to content

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

@ghost

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions