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),
)),
],
)
],
)));
}
}
At first, FittedBox does not break the text to the new line, it just decreases or increases the fontSize of the text. secondly, you are not providing any constraints for the FittedBox wrap it with a container and set its width.