Issue

Disclaimer:

I am very new to flutter, this is my first solo project that I am creating. All other projects have only been very short tutorials. The problem I am having (described below) may seem like a very easy fix, but as I am new please do explain it in detail as best you can, being able to visualize what you are saying also helps (through code, diagrams etc). Thank you.

Problem:

Unable to get auto_size_text maxLines to work correctly. On top of this, unable to get MaxFontSize working.

Further Explanation

I am using the auto_size_text package, setup with the pubspec.yaml dependency: auto_size_text: ^2.1.0 and import: 'package:auto_size_text/auto_size_text.dart'. I also changed my pubspec.yaml environment from sdk: ">=2.12.0 <3.0.0" to sdk: ">=2.11.0 <3.0.0" to allow non null safe packages to work – as per direction of this tutorial.

I am creating a container inside of my app, inside of this container is a Column widget, inside the Column widget are several rows. One of these rows is intended as a title. The code for it is below:

Row( // Row is inside of a Column which is inside of a Container
                children: [
                  const SizedBox(width: 55), // Used to create padding either side of text
                  Expanded(
                    child: FittedBox(
                        child: AutoSizeText(
                          '70 | Brighton  - Abbotsford and Green Island', // Header Example
                          maxLines: 2, // Cannot get this to work, always remains one line
                          maxFontSize: 20, // Does not work, always resizes to max font in order to fill whole FittedBox
                          style: TextStyle(
                            fontSize: 20, // Unsure if I need this, adding or removing seems to have to effect.
                            color: color.AppColor.textMain.withOpacity(0.8), 
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  const SizedBox(width: 55), // Used to create padding either side of text
                ],
              ),

With this code I get this result – Note that the blue line is another row above the title but still inside of the same Column widget.

Desired Result:

The font is far too small, so I want it to be split among two lines. I am designing this container to be reused and I will later change it so the text is imported from a CSV file so name lengths will be varied. They all need to be readable, and while it’s fine for smaller titles (example), larger ones need to have a bigger font while still fitting inside the same boundaries, so two lines is required. As also mentioned, I am unable to get the maxFontSize working, resulting in shorter titles having too large of a font.

Attempted Solutions:

I have tired using a null safe version of auto_size_text but was unable to get it working (as it’s a prerelease I assume it isn’t functioning properly).

Solution

Solved

I solved my own problem almost accidently while playing around with the code I posted in the original question.

Solution:

Although not the most convenient, the solution is to replace the Expanded widget and FittedBox to a SizedBox. Below is the adjusted code including comments about changes made.

               Row( // Row is inside of a Column which is inside of a Container
                children: [
                  const SizedBox(width: 55), // Used to create padding either side of text
                  SizedBox( // Changed the Expanded and FittedBox to a sized box with a width of 280, source container has a width of 390, so text is allowed a width of 280 once you subtract the width 55 SizedBox's either side
                    width: 280,
                      child: AutoSizeText(
                        '70 | Brighton  - Abbotsford and Green Island', // Header Example
                        maxLines: 2, // Cannot get this to work, always remains one line
                        maxFontSize: 20, // Does not work, always resizes to max font in order to fill whole FittedBox
                        style: TextStyle(
                          fontSize: 20, // Unsure if I need this, adding or removing seems to have to effect.
                          color: color.AppColor.textMain.withOpacity(0.8),
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  const SizedBox(width: 55), // Used to create padding either side of text
                ],
              ),

Thanks

Answered By – Lucas

Answer Checked By – Clifford M. (FlutterFixes Volunteer)