当前输出:

预期输出:

代码:

Align(
  alignment: Alignment.topRight,
  child: Container(
    padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 20),
    margin: EdgeInsets.only(right: 12, top: 8),
    decoration: BoxDecoration(
      color: Color(0xFF486993),
      borderRadius: BorderRadius.all(Radius.circular(20)),
    ),
    child: Text("This is my message"),
  ),
)

最佳答案

这就是在 Flutter 中创建整洁的对话泡泡所需要的。

首先创建一个扩展 Painter 类的自定义 painter 类

class CustomChatBubble extends CustomPainter {
  CustomChatBubble({this.color, @required this.isOwn});

  final Color color;
  final bool isOwn;

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = color ?? Colors.blue;

    Path paintBubbleTail() {
      Path path;
      if (!isOwn) {
        path = Path()
          ..moveTo(5, size.height - 5)
          ..quadraticBezierTo(-5, size.height, -16, size.height - 4)
          ..quadraticBezierTo(-5, size.height - 5, 0, size.height - 17);
      }
      if (isOwn) {
        path = Path()
          ..moveTo(size.width - 6, size.height - 4)
          ..quadraticBezierTo(
              size.width + 5, size.height, size.width + 16, size.height - 4)
          ..quadraticBezierTo(
              size.width + 5, size.height - 5, size.width, size.height - 17);
      }
      return path;
    }

    final RRect bubbleBody = RRect.fromRectAndRadius(
        Rect.fromLTWH(0, 0, size.width, size.height), Radius.circular(16));
    final Path bubbleTail = paintBubbleTail();

    canvas.drawRRect(bubbleBody, paint);
    canvas.drawPath(bubbleTail, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return true;
  }
}

然后在您的聊天屏幕中使用它。请注意，此屏幕仅用于演示目的，因此您可以根据需要进行修改。

class ChatSampleWidget extends StatefulWidget {
  @override
  _ChatSampleWidgetState createState() => _ChatSampleWidgetState();
}

class _ChatSampleWidgetState extends State<ChatSampleWidget> {
  TextEditingController _editingController = TextEditingController();
  FocusNode _focusNode = FocusNode();
  final TextStyle textStyle = TextStyle(color: Colors.white);
  @override
  void initState() {
    super.initState();
  }

  @override
  dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chatter'),
      ),
      body: SafeArea(
        child: Stack(
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(20),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
               
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      CustomPaint(
                          painter: CustomChatBubble(isOwn: false),
                          child: Container(
                              padding: EdgeInsets.all(8),
                              child: Text(
                                'Message from someone else \n Says sometihngs',
                                style: textStyle,
                              ))),
                    ],
                  ),
                  SizedBox(
                    height: 5,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      CustomPaint(
                          painter:
                              CustomChatBubble(color: Colors.grey, isOwn: false),
                          child: Container(
                              padding: EdgeInsets.all(10),
                              child: FlutterLogo())),
                    ],
                  ),
                  SizedBox(
                    height: 5,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      CustomPaint(
                          painter:
                              CustomChatBubble(color: Colors.green, isOwn: true),
                          child: Container(
                              padding: EdgeInsets.all(8),
                              child: Text(
                                'Message from me',
                                style: textStyle,
                              ))),
                    ],
                  )
                ],
              ),
            ),
            Positioned(
                bottom: 0,
                child: Container(
                  padding: EdgeInsets.all(8),
                  width: MediaQuery.of(context).size.width,
                  color: Colors.grey.withOpacity(0.1),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      Flexible(
                        child: TextField(
                          controller: _editingController,
                          focusNode: _focusNode,
                          decoration:
                              InputDecoration(hintText: 'Say something...'),
                        ),
                      ),
                      IconButton(
                          icon: Icon(
                            Icons.send,
                            size: 30,
                          ),
                          onPressed: () {
                            print(_editingController.text);
                          })
                    ],
                  ),
                ))
          ],
        ),
      ),
    );
  }
}

这是它的样子；

关于Flutter:如何在聊天消息中制作电报式气泡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56922524/