有没有办法制作这个很酷的聊天气泡小部件？

Question

我会尝试思考如何制作这个聊天气泡

widget

但找不到任何方法，我尝试检查这个包flutter_chat_bubble但与我想要实现的设计没有任何相似之处，如果你知道的话请告诉我。

我现在真的没有任何想法来制作这个小部件

Answer 1

使用此代码：

Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            CustomPaint(
              painter: Bubble(),
              child: Container(
                padding: const EdgeInsets.symmetric(vertical:8,horizontal:15 ),
                constraints: BoxConstraints(
                  maxWidth: MediaQuery.of(context).size.width * .7,
                ),
                child:   const Padding(
                  padding:EdgeInsets.symmetric(vertical: 10, horizontal: 0),
                  child: Text(
                    'your text',
                  ),
                ),
              ),
            ),
            Container(
              margin:  const EdgeInsets.only(top: 10),
                padding: const EdgeInsets.symmetric(horizontal: 15,vertical: 5),
                decoration: const BoxDecoration(
                  color: Colors.grey,
                  shape: BoxShape.circle
                ),
                child: const Icon(Icons.image,size: 30,color: Colors.white,))
          ],
        ),

气泡小部件是：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:koja/theme/theme.dart';

class Bubble extends CustomPainter {
  double _radius = 5.0;
  double _x = 10.0;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRRect(
        RRect.fromLTRBAndCorners(
          0,
          0,
          size.width - _x,
          size.height-10,
          bottomLeft: Radius.circular(_radius),
          bottomRight: Radius.circular(_radius),
          topRight: Radius.circular(_radius),
          topLeft: Radius.circular(_radius),
        ),
        Paint()
          ..color = Colors.grey
          ..style = PaintingStyle.fill);
    var path = Path();
    path.moveTo(20,size.height-12);
    path.lineTo(30,size.height);
    path.lineTo(40,size.height-10);
    canvas.clipPath(path);
    canvas.drawRRect(
        RRect.fromLTRBAndCorners(
          0,
          0.0,
          size.width,
          size.height,
        ),
        Paint()
          ..color = Colors.grey
          ..style = PaintingStyle.fill);
  }
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Answer 2

尝试使用自定义代码

clipper

return SafeArea(
      child: Scaffold(
        body: SizedBox(
          height: 200,
          child: Stack(
            children: [
              Container(
                margin: EdgeInsets.only(bottom: 20),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                  color: Colors.red,
                ),
                width: MediaQuery.of(context).size.width,
                height: 200,
                child: Center(child: Text("Hello")),
              ),
              Align(
                alignment: Alignment.bottomLeft,
                child: Padding(
                  padding: const EdgeInsets.only(left: 50.0),
                  child: ClipPath(
                    clipper: TringleShape(),
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.red,
                      ),
                      width: 20,
                      height: 20,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );

这是定制的

pathClipper

class TringleShape extends CustomClipper<Path> {

  TringleShape();

  @override
  Path getClip(Size size) {
    double width = size.width;
    double height = size.height;
    final path = Path();
    path.moveTo(width, 0);
    path.lineTo(width/2, height);
    path.lineTo(0, 0);
    path.lineTo(width, 0);
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return true;
  }
}

Answer 3

也许您可以尝试 pop over dependency 对于类似类型的 UI。