flutter - 通过添加片段来自定义左下角的聊天气泡

Question

我已经阅读了几种Flutter聊天气泡自定义设置，但是由于是初学者，所以我没有实现它们。我想在聊天底部的左下方添加一个小区，但是我做不到。

我很想提出这个聊天气泡，但我失败了:


这是我当前的代码:

Expanded(
      child: Container(
        padding:
            EdgeInsets.only(left: isAuthor ? 0 : 7, right: isAuthor ? 7 : 0),
        margin: EdgeInsets.symmetric(vertical: 7),
        width: MediaQuery.of(context).size.width,
        alignment: isAuthor ? Alignment.centerRight : Alignment.centerLeft,
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 24, vertical: 8),
          decoration: BoxDecoration(
              color: isAuthor ? Colors.red[800] : Colors.grey[200],
              borderRadius: isAuthor
                  ? BorderRadius.only(
                      topRight: Radius.circular(17),
                      topLeft: Radius.circular(17),
                      bottomLeft: Radius.circular(17))
                  : BorderRadius.only(
                      topLeft: Radius.circular(17),
                      topRight: Radius.circular(17),
                      bottomRight: Radius.circular(17),
                      bottomLeft: Radius.elliptical(-20, -3))),
          child: Column(
            children: <Widget>[
              SizedBox(
                height: 10,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text(
                    name.toUpperCase(),
                    style: TextStyle(
                      color: isAuthor ? Colors.white : Colors.black,
                      letterSpacing: 1.5,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  Text(
                    date.toUpperCase(),
                    style: TextStyle(
                        color: isAuthor ? Colors.white : Color(0xFF9E9E9E),
                        letterSpacing: 1.5,
                        fontWeight: FontWeight.w500),
                  )
                ],
              ),
              SizedBox(
                height: 10,
              ),
              Container(
                alignment:
                    isAuthor ? Alignment.centerRight : Alignment.centerLeft,
                child: Text(isAuthor ? 'AUTHOR : $message' : message,
                    textAlign: TextAlign.left,
                    style: TextStyle(
                        color: isAuthor ? Colors.white : Colors.black,
                        letterSpacing: 0.4,
                        fontSize: 15)),
              )
            ],
          ),
        ),
      ),
    );

这就是我的输出的样子:

Answer 1

您可以使用ClipPath实现它。看一下这个

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipPath(
      child: Container(
        padding: EdgeInsets.all(10),
        width: 200,
        height: 200,
        color: Colors.green,
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text("Person Name"),
                Text("5/2/2020")
              ]
            ),
            SizedBox(height: 10),
            Text("Lor sjkdsjdskdhskjdhsdkjs hdkj hsdkj shkdshdksjdhskhdjskdhskjd shsjdhsk hsdjks hdsjkdhsdhsjkdhsdjsh dkjshsjkdhskjh sjdhsjkdhskjhdsjkhdjskhdsjkhdskjhdkjshdksjhdkjshskjhdsjkhsdjsdkhskjhdsjkshs")
          ]
        )
      ),
      clipper: MyClipper(),
    );
  }
}

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    double factor = 10.0;
    path.lineTo(0, size.height);
    path.lineTo(factor, size.height - factor);
    path.lineTo(size.width - factor, size.height - factor);
    path.quadraticBezierTo(size.width, size.height - factor, size.width,
        size.height - (factor * 2));
    path.lineTo(size.width, factor);
    path.quadraticBezierTo(size.width, 0, size.width - factor, 0);
    path.lineTo(factor, 0);
    path.quadraticBezierTo(0, 0, 0, factor);
    return path;
  }

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

输出: