skip to Main Content

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?

2

Answers


  1. 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(),
            ],
          ),
        );
    
    Login or Signup to reply.
  2. 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,
                      ),
                  ),
                ))
              ],
            )
            )
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search