将图标呈现在Flutter 克牌小工具的角落上

我正在try 开发一个聊天应用程序，用户可以通过双击消息来"喜欢"消息.我希望心形图标出现在卡片的右上角.作为参考，我有点想知道iMessage的react 是什么样子的.

The problem is that the corner of the icon is being clipped by the container constraints and I can't figure out how to not make it look like this:

class ChatBubble extends StatefulWidget {
  final String? messageText;
  final DateTime? timeStamp;

  // I want to use this as a way to identify individual messages
  final String? messageId;
  final bool? isSelf;
  bool? isLiked;
  ChatBubble(
      {super.key,
      required this.messageText,
      required this.isSelf,
      this.isLiked = false,
      this.timeStamp,
      this.messageId});

  @override
  State<ChatBubble> createState() => _ChatBubbleState();
}

class _ChatBubbleState extends State<ChatBubble> {
  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: !widget.isSelf! ? Alignment.centerLeft : Alignment.centerRight,
      child: Padding(
        padding: !widget.isSelf!
            ? EdgeInsets.only(left: AppPadding.globalSidePadding.scale(context))
            : EdgeInsets.only(
                right: AppPadding.globalSidePadding.scale(context)),
        child: GestureDetector(
          onDoubleTap: () {
            if (widget.isSelf == false) {
              setState(() {
                widget.isLiked ??= false;
                widget.isLiked = !widget.isLiked!;
              });
            }
          },
          child: LayoutBuilder(builder: (context, constraints) {
            return Padding(
              padding: EdgeInsets.only(
                  top: AppPadding.transactionCardTopPadding.scale(context)),
              child: Stack(
                children: [
                  Card(
                    color: !widget.isSelf! ? Colors.white : AppColors.pink,
                    shape: const RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(
                            AppNums.globalElevatedButtonBorderRadius))),
                    child: Container(
                      constraints: BoxConstraints(
                          maxWidth: constraints.maxWidth * 0.7),
                      child: Padding(
                        padding: EdgeInsets.symmetric(
                            vertical: AppPadding.cardTopPadding
                                
                            horizontal: AppPadding.chatMessageCardSidePadding
                                
                        child: Text(widget.messageText!,
                            style: Fonts.notoSansSerif
                                .copyWith(
                                    fontSize: 10,
                                    fontWeight: FontWeight.normal,
                                    color: !widget.isSelf!
                                        ? Colors.black
                                        : Colors.white)
                                ),
                      ),
                    ),
                  ),
                  if (widget.isLiked == true)
                    Positioned(
                        top: -5,
                        right: -5,
                        child: LikedMessage(
                            reactionCameFromSelf:
                                widget.isLiked! && !widget.isSelf!)),
                ],
              ),
            );
          }),
        ),
      ),
    );
  }
}

class LikedMessage extends StatelessWidget {
  final bool? reactionCameFromSelf;
  const LikedMessage({super.key, required this.reactionCameFromSelf});

  @override
  Widget build(BuildContext context) {
    return CircleAvatar(
        radius: 20,
        backgroundColor: reactionCameFromSelf! ? Colors.grey : AppColors.pink,
        foregroundColor: reactionCameFromSelf! ? AppColors.pink : Colors.white,
        child: const Icon(Icons.favorite));
  }
}

这里的棘手之处在于，每个气泡都被包裹在Align中，以控制卡片是显示在屏幕的左侧还是右侧，这取决于发送消息的人.

我try 了使用Stack小工具的不同组合，但再次try ，因为从技术上讲，每张卡片的底层小工具跨越整个屏幕宽度，心形图标将出现在远离卡片的地方.

我在这方面哪里错了？