How to Scale a Text Widget Vertically to Fit an Expanded Widget in Flutter?

Question

I am working on a Flutter application where I need to display a Text widget inside an Expanded widget. My goal is to scale the Text widget so that it fits both horizontally and vertically within the available space provided by the Expanded widget. However, I am having trouble achieving this.

Here's what I have so far:

Check the link below to get what issue I'm facing https://dartpad.dev/?id=11d199185a47361425b8b38e84c224a7

Output of DartPad

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Text Scale Example'),
        ),
        body: Column(
          children: [
            WidgetA(),
            Expanded(
              child: Container(
                color: Colors.blue, // Container rengi sadece görünürlük için.
                child: Align(
                  alignment: Alignment.center,
                  child: ConstrainedBox(
                    constraints: BoxConstraints(
                      maxHeight: double.infinity,
                    ),
                    child: FittedBox(
                      fit: BoxFit.scaleDown,
                      alignment: Alignment.center,
                      child: Text(
                        "samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample ",
                        style: TextStyle(color: Colors.white),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                ),
              ),
            ),
            WidgetA(),
          ],
        ),
      ),
    );
  }
}

class WidgetA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50, // Yükseklik sadece örnek amaçlı.
      color: Colors.red,
      child: Center(child: Text('Widget A', style: TextStyle(color: Colors.white))),
    );
  }
}

Issue: The Text widget is scaling horizontally but not vertically. I want the text to scale both horizontally and vertically to fully utilize the space provided by the Expanded widget.

What I've Tried:

• Using FittedBox with BoxFit.contain, but it only scales the text horizontally.
• Trying to use Align and Center widgets to manage positioning.

Question: How can I scale the Text widget vertically and horizontally to fit within the Expanded widget's space? Is there a specific Flutter widget or method that can achieve this?

Answer 1

You can wrap it by Column pic

Expanded(
        child: Column(
          children: [
            Container(
            color: Colors.blue, // Container rengi sadece görünürlük için.
            child: Align(
              alignment: Alignment.center,
              child: ConstrainedBox(
                constraints: BoxConstraints(
                  maxHeight: double.infinity,
                ),
                child: Text(
                    "samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample ",
                    style: TextStyle(color: Colors.white),
                    textAlign: TextAlign.center,
                  ),
              ),
            ))
          ],
        )
        )

Answer 2

EDITED:

1. I eliminated some levels of widgets in previous hierarchy. They are not necessary to provide needed behaviour
2. Used package auto_size_text – it is great for your task since it is automatically resizes text and you actually do not have to do anything :) See GIF of the result here: https://imgur.com/a/auto-size-text-2weLq2V

Code (used fontSize: 25 only for demonstration):

    Scaffold(
      body: Column(
        children: [
          WidgetA(),
          Expanded(
            child: Container(
              color: Colors.blue, // Container rengi sadece görünürlük için.
              child: const Align(
                alignment: Alignment.center,
                child: AutoSizeText(
                  "samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample samplesample sample ",
                  style: TextStyle(fontSize: 25, color: Colors.white),
                  textAlign: TextAlign.center,
                  softWrap: true,
                ),
              ),
            ),
          ),
          WidgetA(),
        ],
      ),
    );