I am trying to design a simple chat bubble with sender’s name and message. Why my row is expanded?
HEre is my code:

> Container(
>     padding: const EdgeInsets.symmetric(
>     horizontal: 10, vertical: 0),
>     child: Align(
>         alignment: widget.senderid ==
>         chatState.messages[index].senderid
>         ? Alignment.topLeft: Alignment.topRight,
>         child: Container(
>            decoration: BoxDecoration(
>            borderRadius: BorderRadius.circular(15),
>            color: widget.senderid ==chatState.messages[index].senderid
>                 ? Colors.grey.shade200
>                 : Colors.blue[200]),
>           padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 5),
>           child: Column(
>                children: [ Row(children: [
>                    Text('alex')]),
>                     Text('chatState.messages[index].text!')]))));

>Solution :

To allow row to use minimum size you need to use mainAxisSize which is property of row.

Eg:

Row(
   mainAxisSize: MainAxisSize.min. //default is max
   children: [...]
)

Same property is available for Column as well if you want to make column to use minimum size.