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()
],
),
CodePudding user response:
Try to wrap your Text()
widget with a Flexible()
. This should size your widget to make the Text fit.
Now it's working perfectly, and i can have as many words as i need, both Expended and Flexible can be used.