FittedBox for fit text to container doesn't work - flutter

Question

I'm trying to fit text to the container with FittedBox, but it doesn't work. On device text goes to the right and it does not break to the next line. (On device I have right overflowed warning).
Do someone know what's wrong with this code? I think there is some issue with Row and Column combination so then FittedBox doesn't affect text, but I'm not sure.
Thanks.
class HomePage extends StatelessWidget {
final Greetings greetings = new Greetings();
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
SafeArea(
child:
SizedBox(height: MediaQuery.of(context).size.height * 0.025)),
Center(child: greetings),
/*ListView(
children: [greetings],
)*/
],
),
);
}
}
class Greetings extends StatelessWidget {
#override
Widget build(BuildContext context) {
var bought = true;
var color;
if (bought) {
color = Colors.blue[700];
} else {
color = Colors.red;
}
return Container(
decoration: BoxDecoration(
color: color, borderRadius: BorderRadius.all(Radius.circular(10))),
height: MediaQuery.of(context).size.height * 0.40,
width: MediaQuery.of(context).size.width * 0.85,
child: Padding(
padding: new EdgeInsets.all(20),
child: Row(
//mainAxisAlignment: MainAxisAlignment.start, --> NOT NECESSARY
children: [
Column(
//mainAxisAlignment: MainAxisAlignment.start, --> NOT NECESSARY
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'hi',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
SizedBox(height: 10),
FittedBox(
fit: BoxFit.contain,
child: Text(
'kodsajhnidoasdoisahioasdohiasdhioúsadiophas',
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.normal),
)),
],
)
],
)));
}
}

Answer 1

At first FittedBox does not break the text to the new line, it just decrease or increases the fontSize on it. secondly you are now providing any constraints for the FittedBox wrap it with a container and set its width.

Answer 2

Just use Flexible Widget to make it parent for Column
Flexible(
child: Column(
//...
));
Full Example:
Container(
decoration: BoxDecoration(
color: color, borderRadius: BorderRadius.all(Radius.circular(10))),
height: MediaQuery.of(context).size.height * 0.40,
width: MediaQuery.of(context).size.width * 0.85,
child: Padding(
padding: new EdgeInsets.all(20),
child: Row(
//mainAxisAlignment: MainAxisAlignment.start, --> NOT NECESSARY
children: [
Flexible(
child: Column(
//mainAxisAlignment: MainAxisAlignment.start, --> NOT NECESSARY
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'hi',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
SizedBox(height: 10),
FittedBox(
fit: BoxFit.contain,
child: Text(
'kodsajhnidoasdoisahioasdohiasdhioúsadiophas',
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.normal),
)),
],
),
)
],
),
),
);
Row Widget causing the issue as it is taking full space horizontally, by adding Flexible it can shrink/grow according to text.