Как реализовать поведение переноса текста во времени в чате пузыря на Flutter

Question

Многие нативные мессенджеры мобильного чата, такие как telegram, whatsapp и т. Д., Реализуют такое поведение обтекания: перенос метки времени на новую строку, когда недостаточно места для текста.

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

Это будет легко понять, если я покажу его с помощью картинок и видео:

И 2 видео:

многострочный https://youtu.be/eigLIHWaub8

однострочный https://youtu.be/9GMDFYwMqdU

Какреализовать это на флаттер?

Answer 1

Вы можете использовать стек с фальшивым заполнителем для времени (или другой информации) на первом слое и реальный позиционированный текст на втором слое.

    class CustomCard extends StatelessWidget {


     final String msg;
      final String additionalInfo;

      CustomCard({
        @required this.msg,
        this.additionalInfo = ""
      });

      @override
      Widget build(BuildContext context) {
        return Card(
          child: Stack(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: RichText(
                  text: TextSpan(
                    children: <TextSpan>[

                  //real message
                  TextSpan(
                    text: msg + "    ",
                    style: Theme.of(context).textTheme.subtitle,
                  ),

                  //fake additionalInfo as placeholder
                  TextSpan(
                      text: additionalInfo,
                      style: TextStyle(
                          color: Color.fromRGBO(255, 255, 255, 1)
                      )
                  ),
                ],
              ),
            ),
          ),

          //real additionalInfo
          Positioned(
            child: Text(
              additionalInfo,
              style: TextStyle(
                fontSize: 12.0,
              ),
            ),
            right: 8.0,
            bottom: 4.0,
          )
        ],
      ),
    );
 }

И результат может выглядеть следующим образом: скриншот результата

Answer 2

Вы можете сделать что-то очень похожее, используя Wrap виджет, но не совсем то же самое поведение:

Card(
            color: Colors.greenAccent,
            child: Wrap(
              alignment: WrapAlignment.end,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                      "Text message in multi-lines and it looks similar to what's in the picture "),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text("10:0 PM"),
                ),
              ],
            ),
          ),