Flutter：查看在 whatsapp 上发送的消息？

Question

我想获取此消息视图，但我无法在末尾添加时钟和蓝色刻度。当消息变长时，它不应该看起来扭曲。

我试过这样的代码，但结果不一样。

Row sentMessage(BuildContext context, int index) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          child: Container(
            constraints: BoxConstraints(
              maxWidth: displayWidth(context) * 0.80,
              minWidth: displayWidth(context) * 0.20,
            ),
            decoration: BoxDecoration(
                color: Color(0xffDCF8C6),
                borderRadius: BorderRadius.all(Radius.circular(9))),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Container(
                  child: Text(messages[index]),
                ),
                Container(
                  child: Text('11:11'),
                )
              ],
            ),
            margin: EdgeInsets.symmetric(
              horizontal: displayWidth(context) * 0.02,
              vertical: displayWidth(context) * 0.004,
            ),
            padding: EdgeInsets.all(displayWidth(context) * 0.02),
          ),
          alignment: Alignment.centerRight,
          width: displayWidth(context),
        ),
      ],
    );
  }

这是结果

Answer 1

经过一些时间和思考，我能够自己完成。

Row sentMessage(BuildContext context, int index) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          child: Container(
            constraints: BoxConstraints(
              maxWidth: displayWidth(context) * 0.80,
              minWidth: displayWidth(context) * 0.20,
            ),
            decoration: BoxDecoration(
                color: Color(0xffDCF8C6),
                borderRadius: BorderRadius.all(Radius.circular(5))),
            child: Wrap(
              verticalDirection: VerticalDirection.down,
              alignment: WrapAlignment.end,
              children: [
                Container(
                  margin: EdgeInsets.zero,
                  padding: EdgeInsets.only(
                      bottom: displayHeightOutAppBar(context) * 0.005),
                  constraints: BoxConstraints(
                    maxWidth: displayWidth(context) * 0.80,
                  ),
                  child: Text(
                    messages[index],
                    style: TextStyle(
                      fontSize: displayWidth(context) * 0.04,
                      color: Colors.black,
                    ),
                  ),
                ),
                Container(
                  padding: EdgeInsets.zero,
                  margin: EdgeInsets.only(
                      top: displayHeightOutAppBar(context) * 0.006,
                      left: displayWidth(context) * 0.015),
                  //alignment: Alignment.bottomRight,
                  constraints: BoxConstraints(
                    maxWidth: displayWidth(context) * 0.20,
                  ),
                  child: Text(
                    '11:11',
                    style: TextStyle(color: Colors.grey),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(
                      top: displayHeightOutAppBar(context) * 0.006),
                  child: Icon(
                    Icons.done_all,
                    size: displayWidth(context) * 0.04,
                    color: Colors.blue,
                  ),
                ),
              ],
            ),
            margin: EdgeInsets.symmetric(
              horizontal: displayWidth(context) * 0.02,
              vertical: displayWidth(context) * 0.004,
            ),
            padding: EdgeInsets.only(
                left: displayWidth(context) * 0.015,
                right: displayWidth(context) * 0.015,
                top: displayWidth(context) * 0.015),
          ),
          alignment: Alignment.centerRight,
          width: displayWidth(context),
        ),
      ],
    );
  }

我在@gmdev的推荐下补充说明

我做错的是使用“列”将项目一个放在另一个上。相反，我使用“环绕”将它们并排放置。我将“MaxWidth”值赋予了“Containers”，它覆盖了里面的项目而不是主要的“Container”。我用“Padding”和“Margin”调整了它们之间的空间。

也许有不同的方法可以做到这一点，但我认为这是最简单的way.Those，可以写出不同的解决方案

这里我又愣住了，补上第二次编辑

通过Whatsapp.The发送的第一条消息的边缘有一个小三角形，唯一的方法是“ClipPath”。如果你的数学不好，你将不得不努力做到this.Couldn在互联网上找不到类似的例子。

Row firstSentMessage(BuildContext context, int index) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          child: ClipPath(
            clipper: MyCustomClipper1(),
            child: Container(
              constraints: BoxConstraints(
                maxWidth: displayWidth(context) * 0.80,
                minWidth: displayWidth(context) * 0.20,
              ),
              decoration: BoxDecoration(
                color: Color(0xffDCF8C6),
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(5),
                    bottomLeft: Radius.circular(5),
                    bottomRight: Radius.circular(5)),
              ),
              child: Wrap(
                verticalDirection: VerticalDirection.down,
                alignment: WrapAlignment.end,
                children: [
                  Container(
                    margin: EdgeInsets.zero,
                    padding: EdgeInsets.only(
                        bottom: displayHeightOutAppBar(context) * 0.005),
                    constraints: BoxConstraints(
                      maxWidth: displayWidth(context) * 0.80,
                    ),
                    child: Text(
                      messages[index],
                      style: TextStyle(
                        fontSize: displayWidth(context) * 0.04,
                        color: Colors.black,
                      ),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.zero,
                    margin: EdgeInsets.only(
                      top: displayHeightOutAppBar(context) * 0.006,
                      left: displayWidth(context) * 0.015,
                    ),
                    //alignment: Alignment.bottomRight,
                    constraints: BoxConstraints(
                      maxWidth: displayWidth(context) * 0.20,
                    ),
                    child: Text(
                      '11:11',
                      style: TextStyle(color: Colors.grey),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(
                      top: displayHeightOutAppBar(context) * 0.006,
                      right: displayWidth(context) * 0.015,
                    ),
                    child: Icon(
                      Icons.done_all,
                      size: displayWidth(context) * 0.04,
                      color: Colors.blue,
                    ),
                  ),
                ],
              ),
              margin: EdgeInsets.symmetric(
                horizontal: displayWidth(context) * 0.01,
                vertical: displayWidth(context) * 0.004,
              ),
              padding: EdgeInsets.only(
                  left: displayWidth(context) * 0.015,
                  right: displayWidth(context) * 0.015,
                  top: displayWidth(context) * 0.015),
            ),
          ),
          alignment: Alignment.centerRight,
          width: displayWidth(context),
          margin: EdgeInsets.only(top: displayHeightOutAppBar(context) * 0.007),
        ),
      ],
    );
  }

这是“快船”。

class MyCustomClipper1 extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();

    path.lineTo(0, size.height);
    path.lineTo(20, size.height);
    path.arcToPoint(Offset(size.width - 12, 13),
        radius: Radius.circular(1), clockwise: false);
    path.lineTo(size.width, 0);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}

我在新的 codes.I 中为其添加了“ClipPath”和“clipper”，稍微更改了“padding”和“margin”值以使图像正确。

Answer 2

我的代码：

[import 'package:flutter/material.dart';

class OwnMessageCard extends StatelessWidget {
  const OwnMessageCard({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.centerLeft,
      child: ConstrainedBox(
        constraints: BoxConstraints(
          maxWidth: MediaQuery.of(context).size.width - 45,
        ),
        child: Card(
          elevation: 1,
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
          color: Color(0xffdcf8c6),
          margin: EdgeInsets.symmetric(
            horizontal: 15,
            vertical: 5,
          ),
          child: Stack(children: \[
            Padding(
              padding: const EdgeInsets.only(
                left: 10,
                right: 60,
                top: 10,
                bottom: 20,
              ),
              child: Text(
                "Hey, Joy Sinha",
                style: TextStyle(
                  fontSize: 16,
                ),
              ),
            ),
            Positioned(
              bottom: 4,
              right: 10,
              child: Row(
                children: \[
                  Text(
                    "20:58",
                    style: TextStyle(
                      fontSize: 13,
                      color: Colors.grey\[600\],
                    ),
                  ),
                  SizedBox(
                    width: 5,
                  ),
                  Icon(
                    Icons.done_all,
                    size: 20,
                  ),
                \],
              ),
            ),
          \]),
        ),
      ),
    );
  }
}][1]

Flutter：查看在 whatsapp 上发送的消息？

Flutter: View of message sent on whatsapp?

whatsapp

flutter