Need automatic adjustment for my text to fit within a container with a length of 100

Question

Container(
                  height: 100,
                  color: Colors.black,
                  child: const Text(
                    'height, width vs varsa önce bunlar kendisini ön plana çıkartır. ardından expanded olanlar geri kalan kısımları bölüşür',
                    style: TextStyle(color: Colors.white),
                  ),
                ),

I want to see my full text both horizontally and vertically. my text is clipped and I can't see parts of my text. cropped text(idont want this).There is no problem in the horizontal, but some of the texts are lost due to lack of space when turning vertically. I don't want it to be a single line. my text should take shape automatically with the most suitable size in the whole container

I tried widgets such as FittedBox, FractionallySizedBox, LayoutBuilder, but without success.I don't want to use 'AutoSizeText'. because I don't want to specify values ​​such as how many rows it will occupy, its minimum and maximum size. all features such as sizing, line decrease/increase should be automatic

Answer 1

The way that layout works in Flutter is: "Constraints go down, sizes go up."

Source: https://docs.flutter.dev/ui/layout/constraints

What does it mean?

• The parent of your Text widget is a Container and its setting its maximum height to 100.0.
• The Text widget is receiving a constraint where its maximum height is 100.0.
• Since the specified string, along with the text style, take up more than 100.0 in height, your text will overflow.

How can I solve it?

Container(
  // height: 100, Remove the height constraint.
  color: Colors.black,
  child: const Text(
    'height, width vs varsa önce bunlar kendisini ön plana çıkartır. ardından expanded olanlar geri kalan kısımları bölüşür',
  style: TextStyle(color: Colors.white),
  ),
),

The Text widget will now take up as much height as it needs. However, you need to keep in mind other constraints imposed higher up in the widget tree.

For example, if the Text is inside a Container, but the Container is inside a Row, it will have an unbounded width. For your specific case, you will like want to specify a maximum width, and let the Text widget take up as much height as it needs.

ConstrainedBox(
  /// Specify your max width, but let the height variate dynamically based
  /// on the text height.
  constraints: BoxConstraints(maxWidth: 300.0), // <= determine your width
  child: Container(
    ...
    child: Text(...),
  ),
);

BONUS: An utility function that allows you to determine String size:

Size intrinsicSize({
    BuildContext? context,
    double maxWidth = double.infinity,
    int? maxLines,
    TextStyle? style,
  }) {
    final double textScaleFactor;
    final TextDirection textDirection;

    if (context == null) {
      textScaleFactor = 1.0;
      textDirection = TextDirection.ltr;
    } else {
      textScaleFactor = MediaQuery.of(context).textScaleFactor;
      textDirection = Directionality.of(context);
    }

    return (TextPainter(
      text: TextSpan(text: this, style: style),
      textScaleFactor: textScaleFactor,
      textDirection: textDirection,
      maxLines: maxLines,
    )..layout(maxWidth: maxWidth))
        .size;
  }

Usage:

final style = theme.textTheme.bodyMedium;
final height = "my text".intrinsicSize(context: context, style: style).height;