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
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
EDITED:
Code (used
fontSize: 25
only for demonstration):You can wrap it by Column pic