How to make my content responsive and not overflow on container - flutter

Question

Here is what my container looks like on the emulator (Pixel 3) :
And now this is what it looks like on my Galaxy S9 :
The text of my column is overflowing. I thought it would "adapt" automatically, but it seems that it's not the case.
The code of the 4 elements that are overflowing is :
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
//mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.turned_in_not,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(width: 7.0,),
Text(
'Economy',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400
),
),
],
),
SizedBox(
height: 15.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.location_on,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(width: 7.0,),
Text(
'Terminal 1',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400
),
),
],
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.airline_seat_legroom_normal,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(width: 7.0,),
Text(
'Standard legroom',
style: TextStyle(
//fontFamily: 'SamsungSans',
fontSize: 14.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400
),
),
],
),
SizedBox(
height: 15.0,
),
Row(
children: <Widget>[
Icon(
Icons.card_travel,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(width: 7.0,),
Text(
'1 included',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400
),
),
],
)
],
)
],
),
Any idea on what should I change so that the text doesn't overflow its container ?
Thank you.

Answer 1

I would suggest to wrap your overflowing widgets with Expanded widget. Hope it will help.
UPD
I just used code above on some old device with mdpi resolution. To fix overflow I've added Expanded to the second Column, it solves the overflow issues, but it 'Standard legroom' text is still overflowing. So in case of really long String I would suggest to add overflow: TextOverflow.ellipsis for your Text.
In case you want to keep whole string, just add Expanded to the overflowing Text widget. But in this case there will be to lines text, and it could not be a solution.
Anyway here is my final code:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
//mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.turned_in_not,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(
width: 7.0,
),
Text(
'Economy',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400),
),
],
),
SizedBox(
height: 15.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.location_on,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(
width: 7.0,
),
Text(
'Terminal 1',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400),
),
],
),
],
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.airline_seat_legroom_normal,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(
width: 7.0,
),
Expanded(
child: Text(
'Standard legroom',
overflow: TextOverflow.ellipsis,
style: TextStyle(
//fontFamily: 'SamsungSans',
fontSize: 14.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400),
),
),
],
),
SizedBox(
height: 15.0,
),
Row(
children: <Widget>[
Icon(
Icons.card_travel,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(
width: 7.0,
),
Text(
'1 included',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400),
),
],
)
],
),
)
],
);
]2