Как установить ширину контейнера в зависимости от длины его дочернего текста?флаттер

Question

Я пытаюсь разработать приложение для чата, и я пытаюсь отображать текстовые сообщения внутри контейнера и устанавливать ширину в соответствии с длиной сообщения.Как я могу установить ширину в соответствии с длиной строки?Сообщения PS отображаются с использованием listview.builder, и каждый контейнер имеет цвет фона.

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),
            ),
          );
        },
      ),

Что я хочу:

Что я получаю:

Answer 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)),
                ),
              ],
            ),
          );
        },
      ),
    );
  }

Answer 2

Хорошо, это потому, что потомки ListView всегда растягиваются, я внес некоторые изменения в ваш код, сначала используйте виджет Align для выравнивания влево или вправо, в зависимости от индекса, и оберните ваш Container с помощью UnconstrainedBox чтобы избежать заполнения ширины.

  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),
                ),
              ),
            ),
          );
        },
      );