How to fix Bottom Overflowed by 10 Pixels? - flutter

Question

As you can see in the these two photos below, this problem happened only when the address contains many words, if the address contains fewer words I don't see any issues, I got stuck here and can't think anymore :)
what shall I do in this case, please?
Code:
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
UserAvatarView(
urlPrefix: serverUrl,
url: null,
cornerRadius: 60,
size: 20),
const SizedBox(width: 8),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
order.service.name,
style: Theme.of(context).textTheme.titleMedium,
),
Text(
"${(driverDistance / 1000).round()} KM away",
style: Theme.of(context).textTheme.labelMedium,
)
],
),
const Spacer(),
Container(
padding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: CustomTheme.primaryColors.shade200,
borderRadius: BorderRadius.circular(12)),
child: Text(
NumberFormat.simpleCurrency(name: order.currency)
.format(order.costBest),
style: Theme.of(context).textTheme.headlineMedium,
),
)
],
),
const Divider(),
...order.addresses.mapIndexed((e, index) {
if (order.addresses.length > 2 &&
index > 0 &&
index != order.addresses.length - 1) {
return const SizedBox(
width: 1,
height: 1,
);
}
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.all(0),
child: Icon(
getIconByIndex(index, order.addresses.length),
color: CustomTheme.neutralColors.shade500,
),
),
Expanded(
child: Text(e,
overflow: TextOverflow.visible,
style: Theme.of(context).textTheme.bodySmall),
),
if (index == order.addresses.length - 1)
Text(
order.durationBest == 0
? ""
: durationToString(
Duration(seconds: order.durationBest)),
style: Theme.of(context).textTheme.bodySmall)
],
).pOnly(right: 0),
if (index < order.addresses.length - 1)
DottedLine(
direction: Axis.vertical,
lineLength: 25,
lineThickness: 3,
dashLength: 3,
dashColor: CustomTheme.neutralColors.shade500)
.pOnly(left: 10)
],
);
}).toList(),
const Spacer(),
Row(
children: order.options
.map((e) => OrderPreferenceTagView(
icon: e.icon,
name: e.name,
))
.toList()),
ElevatedButton(
onPressed: !isActionActive
? null
: () => onAcceptCallback(order.id),
child: Row(
children: [
const Spacer(),
Text(S.of(context).available_order_action_accept),
const Spacer()
],
).p4())
.p4()
],
),
Photo of a few address words:
Photo of many address words:

Answer 1

Try to wrap your Text() widget with a Flexible(). This should size your widget to make the Text fit.
More here

Answer 2

So i fixed it by adding maxLines and added softWrap and set it to true, (thanks to #Marcel Dz) for his suggestion, but it doesn't work with only Wrap the text with Flexible.
The problem is that the address is changeable, every address has a different number of words, when the address is long it's mean more words and these words are pushing the Button to the bottom because there's no more free space to show the full words of address.
here is the piece of code that i modified:
Expanded(
child: Text(e,
overflow: TextOverflow.visible,
maxLines: 3,
softWrap: true,
style: Theme.of(context).textTheme.bodySmall),
),
Another solution with Flexible:
Flexible(
child: Text(e,
overflow: TextOverflow.visible,
maxLines: 3,
softWrap: true,
style: Theme.of(context).textTheme.bodySmall),
),
Result:
Now it's working perfectly, and i can have as many words as i need, both Expended and Flexible can be used.