title: Why is the row expanding to full container width in flutter?
body: <p>I am making a widget which will contain message with profile picture and name of sender.
  But when I am inserting the row containing the profile picture and sender's name it is using
  more than required width.</p>
  <p><strong>MessageWidget</strong></p>
  <pre><code>class GroupTextMessage extends StatelessWidget {
    final String _id;
    final String _sender;
    final String _content;
    final String _time;
  
    const GroupTextMessage(
        {required final String id,
        required final String sender,
        required final String content,
        required final String time})
        : _id = id,
          _sender = sender,
          _content = content,
          _time = time;
    @override
    Widget build(BuildContext context) {
      bool isMe = _sender == FirebaseService.currentUserEmail;
      final displaySize = MediaQuery.of(context).size;
      return Container(
        margin: EdgeInsets.only(
            top: kDefaultPadding / 5.0,
            bottom: kDefaultPadding / 5.0,
            left: isMe ? displaySize.width * .20 : kDefaultPadding / 5.0,
            right: isMe ? kDefaultPadding / 5.0 : displaySize.width * .20),
        child: Column(
          crossAxisAlignment:
              isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
          children: [
            Material(
              elevation: 1.0,
              color: isMe ? Color(0xAA2EA043) : Color(0xAA1F6FEB),
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(kDefualtBorderRadius),
                topRight: Radius.circular(kDefualtBorderRadius),
                bottomRight:
                    isMe ? Radius.zero : Radius.circular(kDefualtBorderRadius),
                bottomLeft:
                    isMe ? Radius.circular(kDefualtBorderRadius) : Radius.zero,
              ),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  crossAxisAlignment:
                      isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
                  children: [
                    //Problem causing Row
                    if (!isMe)
                      Row(
                        children: [
                          CircularProfilePicture(
                            email: _sender,
                            radius: displaySize.width * 0.03,
                          ),
                          SizedBox(width: kDefaultPadding / 4.0),
                          TextStreamBuilder(
                            stream: FirebaseService.getStreamToUserData(
                                email: _sender),
                            key: UserDocumentField.DISPLAY_NAME,
                            style: TextStyle(
                              letterSpacing: 1.5,
                              fontWeight: FontWeight.bold,
                              color: Colors.white,
                            ),
                          )
                        ],
                      ),
                    if (!isMe) SizedBox(height: kDefaultPadding / 4.0),
                    Text(_content,
                        style:
                            TextStyle(color: Colors.white, letterSpacing: 1.5)),
                    SizedBox(height: kDefaultPadding / 5.0),
                    Text(_time,
                        style: TextStyle(color: Colors.black87, fontSize: 10.0)),
                  ],
                ),
              ),
            ),
          ],
        ),
      );
    }
  }
  </code></pre>
  <p><strong>Without using that Row</strong></p>
  <p><a href="https://i.stack.imgur.com/6yTUK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6yTUK.jpg" alt="enter image description here" /></a></p>
  <p><strong>When using that Row</strong></p>
  <p><a href="https://i.stack.imgur.com/zyzcB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zyzcB.jpg" alt="enter image description here" /></a></p>
  <p><strong>What I want</strong></p>
  <p><a href="https://i.stack.imgur.com/nGoh9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nGoh9.jpg" alt="enter image description here" /></a></p>
  <p>I want row to use only required width. But it is occupying the whole container width.</p>
  <p>Please help me to resolve this issue.</p>