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?
asudeA is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.