Home > Back-end >  How to fix Bottom Overflowed by 10 Pixels?
How to fix Bottom Overflowed by 10 Pixels?

Time:10-30

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: enter image description here

Photo of many address words: enter image description here

CodePudding user response:

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

More enter image description here

Now it's working perfectly, and i can have as many words as i need, both Expended and Flexible can be used.

  • Related