Question 162183 in Flutter Question posted in
The official Flutter documentation can be found here.

Can I prevent my widget from overflowing & extending down for long chat msgs in Flutter?

How do I limit these chat bubbles to a max certain width (about middle of the screen) and also make long messages extend downwards, i.e. wrap text?

The chat message:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel est quis dolor dignissim imperdiet at eget dui. Sed tincidunt hendrerit condimentum. Morbi et porttitor nisi. Vestibulum consectetur justo sem, quis rhoncus urna cursus sed. Etiam molestie tellus in tincidunt aliquam. Aliquam mattis scelerisque sapien, nec lobortis ante vehicula placerat. Aliquam in elit pulvinar, pulvinar elit non, interdum enim. Vivamus eu placerat nisl. In vitae nunc vel mi vehicula dictum et vel erat. Nunc pharetra tincidunt felis eu egestas. Sed tincidunt, ligula ut sodales auctor, libero arcu gravida eros, id semper est sem sit amet lorem. Pellentesque eleifend sit amet ligula non tempor. Integer a elit nec dolor ultrices dapibus vitae eget metus. Sed nec ornare leo, sed efficitur sapien. Mauris eros neque, suscipit a mattis vitae, porttitor eget lacus.

The code:

return Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Expanded(flex: 10,
            child: Column(
              children: [
                Row(
                  children: [
                    Text(timestamp),
                  ],
                ),
                Container(
                  constraints: BoxConstraints(minWidth: 10, maxWidth: 200, minHeight: 15, maxHeight: 200),
                  padding: EdgeInsets.all(5),
                  decoration: BoxDecoration(
                    color: Color.fromRGBO(66, 135, 245, 100.0),
                    borderRadius: BorderRadius.circular(30)
                  ),
                  child: Row(
                    children: [
                      Text(text),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      );

Picture of the problem (ignore the "Hello World!" message):

enter image description here

Tags:

2

Answers


  1. 0

    To make your widget not overflow and extend downwards for long chat messages, you can use the Expanded widget along with the Wrap widget. Here’s an updated version of your code with the necessary changes:

    return Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    Expanded(
      flex: 10,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Text(timestamp),
            ],
          ),
          Container(
            constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.5),
            padding: EdgeInsets.all(5),
            decoration: BoxDecoration(
              color: Color.fromRGBO(66, 135, 245, 100.0),
              borderRadius: BorderRadius.circular(30),
            ),
            child: Wrap(
              children: [
                Text(text),
              ],
            ),
          ),
        ],
      ),
    ),
  ],
);

    In this updated code, the Wrap widget is used instead of the Row widget for the chat message container. The Wrap widget automatically wraps the text when it exceeds the maximum width specified in the BoxConstraints.

    I’ve also added crossAxisAlignment: CrossAxisAlignment.start to the Column widget to align the chat message and timestamp to the start of the container.

    Additionally, the maximum width of the chat message container is set to 50% of the screen width using MediaQuery.of(context).size.width * 0.5. You can adjust this value as needed to fit your requirements.

    With these changes, long chat messages will wrap and extend downwards within the maximum width specified, preventing overflow and maintaining the chat bubble appearance.

    I hope this helps to resolve the issue.

    Login or Signup to reply.
  2. 0

    you need to wrap the message text with Flexible or Expanded widget, like this:

    return Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Expanded(flex: 10,
            child: Column(
              children: [
                Row(
                  children: [
                    Text(timestamp),
                  ],
                ),
                Container(
                  constraints: BoxConstraints(minWidth: 10, maxWidth: 200, minHeight: 15, maxHeight: 200),
                  padding: EdgeInsets.all(5),
                  decoration: BoxDecoration(
                    color: Color.fromRGBO(66, 135, 245, 100.0),
                    borderRadius: BorderRadius.circular(30)
                  ),
                  child: Row(
                    children: [
                      Expanded(
                        child: Text(text),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search