How to set the width of a Container based on the length of its child Text? Flutter

问题

I am Trying to develop a chat app and I am trying to display the text messages inside a container and set the width according to the length of the message. How can I set the width according to the length of a String? P.S messages are displayed using listview.builder and each container has a background color.

ListView.builder(
        padding: EdgeInsets.only(top: 8.0, left: 15.0, right: 15.0),
        itemCount: messages.length,
        itemBuilder: (context, index) {
          return Container(
            padding: EdgeInsets.all(20.0),
            margin: index % 2 == 0
                ? EdgeInsets.only(bottom: 5.0, right: 60.0)
                : EdgeInsets.only(bottom: 5.0, left: 60.0),
            decoration: index % 2 == 0
                ? BoxDecoration(
                    border: Border.all(
                      color: Colors.grey,
                    ),
                    borderRadius: BorderRadius.all(
                      Radius.circular(30.0),
                    ),
                  )
                : BoxDecoration(
                    color: Colors.grey[300],
                    borderRadius: BorderRadius.all(
                      Radius.circular(30.0),
                    ),
                  ),
            child: Text(
              messages[index].text,
              style: TextStyle(color: Colors.black),
            ),
          );
        },
      ),

What I want:

What I am getting:

回答1:

  @override
  Widget build(BuildContext context) {
    final messages = [
      'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
      'This is a short message.',
      'This is a relatively longer line of text.',
      'Hi!'
    ];
    return Scaffold(
      body: ListView.builder(
        itemCount: messages.length,
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.all(20.0),
            child: Flex(
              direction: Axis.horizontal,
              mainAxisAlignment: index % 2 == 0
                  ? MainAxisAlignment.start
                  : MainAxisAlignment.end,
              children: <Widget>[
                Container(
                  padding: const EdgeInsets.all(20.0),
                  constraints: BoxConstraints(
                    maxWidth: MediaQuery.of(context).size.width * 0.7,
                  ),
                  decoration: index % 2 == 0
                      ? BoxDecoration(
                          border: Border.all(
                            color: Colors.grey,
                          ),
                          borderRadius: BorderRadius.all(
                            Radius.circular(30.0),
                          ),
                        )
                      : BoxDecoration(
                          color: Colors.grey[300],
                          borderRadius: BorderRadius.all(
                            Radius.circular(30.0),
                          ),
                        ),
                  child: Text(messages[index],
                      style: TextStyle(color: Colors.black)),
                ),
              ],
            ),
          );
        },
      ),
    );
  }

回答2:

Ok, that's because children of ListView always are stretched , I made some changes to your code, first use Align widget to align to left or right depends of the index, and wrap your Container with UnconstrainedBox to avoid filling the width.

  ListView.builder(
        padding: EdgeInsets.only(top: 8.0, left: 15.0, right: 15.0),
        itemCount: messages.length,
        itemBuilder: (context, index) {
          return Align(
            alignment:
                index % 2 == 0 ? Alignment.centerLeft : Alignment.centerRight,
            child: UnconstrainedBox(
              child: Container(
                padding: EdgeInsets.all(20.0),
                decoration: index % 2 == 0
                    ? BoxDecoration(
                        border: Border.all(
                          color: Colors.grey,
                        ),
                        borderRadius: BorderRadius.all(
                          Radius.circular(30.0),
                        ),
                      )
                    : BoxDecoration(
                        color: Colors.grey[300],
                        borderRadius: BorderRadius.all(
                          Radius.circular(30.0),
                        ),
                      ),
                child: Text(
                  messages[index].text,
                  style: TextStyle(color: Colors.black),
                ),
              ),
            ),
          );
        },
      );

来源：https://stackoverflow.com/questions/52875445/how-to-set-the-width-of-a-container-based-on-the-length-of-its-child-text-flutt