Flutter FittedBox / Expand / Flexible base on a widget in a column

Question

I'm creating a flutter chat app, and I want my messages to be flexible based on the text widget width (short / long text).

I have a column of widgets, And I want the message text to determine the max width for all other widgets in the same column.

I will explain it better with some screenshots:

BAD EXAMPLE:

GOOD EXAMPLES:

My Code:

return Padding(
      padding:
          EdgeInsets.only(left: MediaQuery.of(context).size.width * 0.15),
      child: Bubble(
        elevation: 1,
        shadowColor: Colors.black45,
        margin: BubbleEdges.only(top: 5, bottom: 5),
        alignment: Alignment.topRight,
        nip: BubbleNip.rightTop,
        nipRadius: 3,
        nipWidth: 13,
        nipHeight: 10,
        radius: Radius.circular(13),
        color: Color.fromRGBO(225, 255, 199, 1.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            (document.data() as Map<String, dynamic>)
                        .containsKey('reply_message') &&
                    document.get('reply_message') != null
                ? FittedBox(
                    fit: BoxFit.fitWidth, // this is not fitting based on column current width (not max width)
                    child: Container(
                        decoration: BoxDecoration(
                            color: Color.fromRGBO(216, 247, 188, 1.0),
                            borderRadius: BorderRadius.circular(8)),
                        child: Padding(
                          padding: const EdgeInsets.all(6),
                          child: getReplyMessage(
                            document.get('reply_message'),
                          ),
                        )),
                  )
                : SizedBox(),
            Padding(
              padding: const EdgeInsets.only(bottom: 5),
              child: SelectableLinkify(
                onOpen: onOpenLink,
                text: document['content'],
                textAlign:
                    intl.Bidi.detectRtlDirectionality(document['content'])
                        ? TextAlign.right
                        : TextAlign.left,
                textDirection:
                    intl.Bidi.detectRtlDirectionality(document['content'])
                        ? ui.TextDirection.rtl
                        : ui.TextDirection.ltr,
                style: TextStyle(
                  fontSize: 16,
                  height: 1.35,
                  letterSpacing: -0.1,
                  fontFamily: 'Arimo',
                ),
              ),
            ),
            getMessageBottom(document)
          ],
        ),
      ),
    );

UPDATE

Answer 1

You can use IntrinsicWidth which is an expensive widget.

IntrinsicWidth(
   child: Column(
      children:[...]
   )
)

In this way, all children are scaled so that they are as wide as the widest among them.