How can create the pencil with the overlapping image in flutter?

I tried to use a stack but could not get it to work

Widget _shoppingCartBadge() {
    return Stack(
      children: [
        Positioned(
          left: 40.0,
          child: Badge(
            elevation: 0,
            padding: EdgeInsets.zero,
            badgeColor: Colors.red,
            position: BadgePosition.topEnd(top: 5, end: 8),
            animationDuration: Duration(milliseconds: 300),
            animationType: BadgeAnimationType.slide,
            badgeContent: Icon(
              FontAwesomeIcons.info,
              color:,
              size: 10,
            ),
          ),
        ),
        Positioned(
          child: IconButton(
            icon: Icon(Icons.edit, color: Palette.TAUPE),
            onPressed: () {},
          ),
        ),
      ],
    );
  }

CodePudding user response：

You can simply achieve it using the Badges package. It has some default properties set, which may get in your way, e.g. default padding.

        Badge(
          badgeContent: const Icon(
            Icons.error_outline,
            color: Colors.white,
            size: 25,
          ),
          padding: EdgeInsets.zero,
          child: const Icon(Icons.edit, size: 40),
        );

CodePudding user response：

You can use anything Instead of icon

 Widget _shoppingCartBadge() {
        return Stack(
          children: [
           
            const Icon(Icons.info, color: Colors.red,),
             Positioned(
              top: -18,
              left: -8,
              child: IconButton(
                icon: const Icon(Icons.edit, color: Colors.black, size: 10,),
                onPressed: () {},
              ),
            ),
          ],
        );
      }