Wrap text in container without using a fixed width in Flutter

Question

I'm trying to create a basic chat application in Flutter and I want to display the conversation in simple containers which will adapt its length to the text inside. Everything works fine until the text does not fit the length of the container, when I get an overflow error.

The code that I'm using is this one

Widget _buildMessage(Message message) {
    return Row(children: <Widget>[
      message.author == username ? Expanded(child: Container()) : Container(),
      Container(
          padding: EdgeInsets.all(8.0),
          margin: EdgeInsets.all(4.0),
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(8.0))),
          child: Row(
            children: <Widget>[
              Text(
                message.text,
              ),
              SizedBox(
                width: 8.0,
              ),
              Padding(
                padding: EdgeInsets.only(top: 6.0),
                child: Text(
                  message.time,
                  style: TextStyle(fontSize: 10.0, color: Colors.grey),
                ),
              ),
              SizedBox(
                width: 8.0,
              ),
              Padding(
                padding: EdgeInsets.only(top: 6.0),
                child: Text(
                  message.author,
                  style: TextStyle(fontSize: 10.0, color: Colors.grey),
                ),
              ),
            ],
          )),
      message.author != username ? Expanded(child: Container()) : Container(),
    ]);
  }

I'm using a Row within a Row so that I can get this alignment to the right or to the left depending on the author. If I type something with a multiline in my input, the text is rendered properly, with the container expanding vertically as needed. The problem is when I just type beyond the width of the container.

I can fix this by wrapping the Text with a Container and a fixed with, but I don't want that as I want the width to be dynamic and adapt to the text.

I've seen other questions where people suggests using Flexible or Expanded, but I can't figure out how to do it.

Any ideas would be appreciated.

Answer 1

I tried to edit your code and here is what I've made:

return Row(
  mainAxisAlignment: message.author == username ? MainAxisAlignment.end : MainAxisAlignment.start,
  //this will determine if the message should be displayed left or right
  children: [
    Flexible(
    //Wrapping the container with flexible widget
      child: Container(
        padding: EdgeInsets.all(8.0),
        margin: EdgeInsets.all(4.0),
        decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(8.0))),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Flexible(
            //We only want to wrap the text message with flexible widget
              child: Container(
                child: Text(
                  message.text,
                  )
                )
              ),    
              SizedBox(
                width: 8.0,
              ),
              Padding(
                padding: EdgeInsets.only(top: 6.0),
                child: Text(
                  message.time,
                  style: TextStyle(fontSize: 10.0, color: Colors.grey),
                  ),
                ),
              SizedBox(
                width: 8.0,
              ),
              Padding(
                padding: EdgeInsets.only(top: 6.0),
                child: Text(
                  message.author,
                  style: TextStyle(fontSize: 10.0, color: Colors.grey),
                  ),
                ),
              ],
            )),

           )

        ]
        );

Here is the full version of my dummy code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

List<String> username = ['foo', 'bar', 'foo', 'bar', 'foo'];
List<String> messages = ['aaaaaaaaaaaaaaaaaaaaaaaaaaaaa', 'bb', 'cccccccccccccccccccccccccccccc', 'dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd', 'ee'];
List<String> time = ['131', '6454', '54564', '54546', '88888'];
List<String> author = ['Jesus', 'Joseph', 'Mary', 'John', 'Cardo'];

@override
Widget build(BuildContext context){

return Scaffold(
  body: Container(
    color: Colors.blue[200],
    child: ListView.builder(
      itemCount: 5, 
      itemBuilder: (_, int index){

        return  Row(
          mainAxisAlignment: username[index] == "foo" ? MainAxisAlignment.end : MainAxisAlignment.start,
          children: [
            Flexible(
              child: Container(
                padding: EdgeInsets.all(8.0),
                margin: EdgeInsets.all(4.0),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(8.0))),
                child: Row(

                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[

                    Flexible(
                      child: Container(
                        child: Text(
                          messages[index],
                        ),
                      )
                    ),

                    SizedBox(
                      width: 8.0,
                    ),
                    Padding(
                      padding: EdgeInsets.only(top: 6.0),
                      child: Text(
                        time[index],
                        style: TextStyle(fontSize: 10.0, color: Colors.grey),
                      ),
                    ),
                    SizedBox(
                      width: 8.0,
                    ),
                    Padding(
                      padding: EdgeInsets.only(top: 6.0),
                      child: Text(
                        author[index],
                        style: TextStyle(fontSize: 10.0, color: Colors.grey),
                      ),
                    ),
                  ],
                )),

              )

          ]
          );

      }
      ) 
      )
    );
  }
}