How to remove right overflowed by 7.8 pixels

Question

I am working on an e-commerce site that includes both the admin backend on the web-based and front end on both android and IOS using flutter. I am facing one problem on how to remove the error saying "RIGHT OVERFLOWED BY 7.8 PIXEL" on cut items. as shown in the image bellow

this is my flutter code. I named the file cart.list_item.dart

import 'package:flutter/material.dart';
import 'package:flutter_icons/flutter_icons.dart';
import 'package:fuodz/models/cart.dart';
import 'package:fuodz/constants/app_strings.dart';
import 'package:fuodz/utils/ui_spacer.dart';
import 'package:fuodz/widgets/custom_image.view.dart';
import 'package:velocity_x/velocity_x.dart';

class CartListItem extends StatelessWidget {
  const CartListItem(
    this.cart, {
    this.onQuantityChange,
    this.deleteCartItem,
    Key key,
  }) : super(key: key);

  final Cart cart;
  final Function(int) onQuantityChange;
  final Function deleteCartItem;

  @override
  Widget build(BuildContext context) {
    //
    final currencySymbol = AppStrings.currencySymbol;

    return HStack(
      [
        //
        //PRODUCT IMAGE
        CustomImage(
          imageUrl: cart.product.photo,
          width: context.percentWidth * 18,
          height: context.percentWidth * 18,
        ).box.clip(Clip.antiAlias).roundedSM.make(),

        //
        UiSpacer.horizontalSpace(),
        VStack(
          [
            //product name
            cart.product.name.text.semiBold.xl.make(),
            UiSpacer.verticalSpace(space: 0),
            //product options
            cart.optionsSentence.isNotEmpty
                ? cart.optionsSentence.text.lg.gray600.medium.make()
                : UiSpacer.emptySpace(),
            cart.optionsSentence.isNotEmpty
                ? UiSpacer.verticalSpace(space: 10)
                : UiSpacer.verticalSpace(space: 5),
            //
            VxStepper(
              defaultValue: cart.selectedQty ?? 1,
              min: 1,
              max: cart.product.availableQty ?? 20,
              disableInput: true,
              onChange: onQuantityChange,
            ),
          ],
        ).expand(),

        //
        UiSpacer.horizontalSpace(),
        VStack(
          [
            //delete icon
            Icon(
              FlutterIcons.delete_ant,
              size: 16,
              color: Colors.white,
            )
                .centered()
                .p8()
                .onInkTap(
                  this.deleteCartItem,
                )
                .box
                .roundedFull
                .color(Colors.red)
                .make(),

            //cart item price
            UiSpacer.verticalSpace(),
            "$currencySymbol ${(cart.selectedQty * cart.price).numCurrency}"
                .text
                .semiBold
                .xl
                .make(),
          ],
          crossAlignment: CrossAxisAlignment.end,
        )
      ],
    );
  }
}

Add your widgets inside `Expanded` or `Flexible` **Widget** refer my answer [here](https://stackoverflow.com/a/68559619/13997210) or [here](https://stackoverflow.com/a/68463935/13997210) or [here](https://stackoverflow.com/a/68444861/13997210) for that hope its helpful to you — Ravindra S. Patil, Nov 08 '21 at 13:58

score 0 · Answer 1 · answered Nov 08 '21 at 10:17

You can wrap overflowed Widget with Padding this will let you some space.

e.g,

Padding(
           padding: EdgeInsets.all(10.0), \\add padding to Left,top,right,bottom
           child: (Your_Widget)
),

Or just for right side:

Padding(
          padding: EdgeInsets.only(right: 10.0), \\add padding only to right side
          child: (Your_Widget)
),

How to remove right overflowed by 7.8 pixels

1 Answers1