Как получить ширину текстового виджета до его рендеринга

Question

Я пытаюсь создать MessageBubble для приложения обмена сообщениями. Вот как выглядит мой MessageBubble, когда он содержит одну строку:

В данный момент MessageBubble будет выглядеть так, если он содержит более одной строки :

Но я хочу решить, во время процесса сборки, отображаются ли две или более строки в тексте, так что я могу добавить необходимые отступы наверх и вниз, вот так (это жестко заданный пример):

Есть ли способ узнать количество отображаемые строки или ширина каждой строки во время сборки, поэтому я могу решить, добавлять ли отступы внизу и вверху или нет?

Это мой код:

import 'package:flutter/material.dart';

class BubbleTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: BoxDecoration(
        color: Colors.grey[350],
        borderRadius: BorderRadius.all(Radius.circular(20.0)),
      ),
      child: Padding(
        padding: EdgeInsets.only(right: 15.0),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            CircleAvatar(
              backgroundColor: Colors.grey,
              child: Icon(
                Icons.person,
                color: Colors.white,
              ),
            ),
            ConstrainedBox(
              constraints: BoxConstraints(
                minHeight: 40.0,
                maxWidth: 250.0,
              ),
              child: Align(
                heightFactor: 1,
                widthFactor: 1,
                alignment: Alignment.center,
                child: Padding(
                  padding: EdgeInsets.only(left: 15.0),
                  child: Text(
                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacus libero, molestie vitae dui non, venenatis maximus sem.',
                    style: TextStyle(
                      fontSize: 18.0,
                    ),
                    textWidthBasis: TextWidthBasis.longestLine,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

Я нашел способ обойти необходимость получения фактической ширины виджета «Текст» перед применением заполнения к MessageBubble. Вместо этого я могу просто добавить некоторые постоянные отступы в виджет выравнивания, например:

Padding(
  padding: EdgeInsets.symmetric(vertical: 8.0),
  child: Align(
    heightFactor: 1,
    widthFactor: 1,
    alignment: Alignment.center,
    child: Padding(
      padding: EdgeInsets.only(
        left: 15.0,
      ),
      child: Text(
        text,
        style: TextStyle(
            fontSize: 18.0,
            color: isFromCurrentUser
                ? Colors.white
                : Colors.black),
      ),
    ),
  ),
),

Вывод:

Если я Я хотел, чтобы MessageBubble адаптировался к разным размерам текста. Я мог сделать так, чтобы размер CircleAvatar зависел от размера текста. Если бы текст был очень большим, то CircleAvatar мог бы увеличиваться в размере, поэтому одна строка текста по-прежнему находилась бы в центре MessageBubble

Answer 2

Если вы не уверены в том, как вы должны расположить свой виджет на основе размера, вы можете использовать LayoutBuilder.

 LayoutBuilder(
     builder: (context, constraints){
          Padding(
    //based on size if you want to put up your spacing then
                  padding: (constraints.maxHeight < 20)? EdgeInsets.only(left: 15.0): EdgeInsets.symmetric(horizontal: 15.0, vertical: 15.0),
                  child: Text(
                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacus libero, molestie vitae dui non, venenatis maximus sem.',
                    style: TextStyle(
                      fontSize: 18.0,
                    ),
                    textWidthBasis: TextWidthBasis.longestLine,
                ),
            ),
        }
    )