Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ghost opened this issue Feb 9, 2022 · 1 comment
Open

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

ghost opened this issue Feb 9, 2022 · 1 comment
Labels
bug Something isn't working

Comments

@ghost
Copy link

ghost commented Feb 9, 2022

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
@ghost ghost added the bug Something isn't working label Feb 9, 2022
@TomTom0815
Copy link

Related to: #119

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant