aboutsummaryrefslogtreecommitdiff
path: root/lib/widgets/chat_bubble.dart
blob: aaac93d57cc1f9ca83bce3f15cac251c3ebaf7ef (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import 'package:custom_clippers/custom_clippers.dart';
import 'package:flutter/material.dart';

enum ChatBubbleAlignment { start, end }

class ChatBubble extends StatelessWidget {
  final String text;
  final ChatBubbleAlignment alignment;

  const ChatBubble(
    this.text, {
    super.key,
    required this.alignment,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        alignment == ChatBubbleAlignment.start
            ? BubbleLeft(text)
            : BubbleRight(text),
      ],
    );
  }
}

class BubbleLeft extends StatelessWidget {
  final String text;

  const BubbleLeft(this.text, {super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(right: 77),
      child: ClipPath(
        clipper: UpperNipMessageClipper(MessageType.receive),
        child: Container(
          padding: const EdgeInsets.all(20),
          decoration: const BoxDecoration(
            color: Color(0xFFE1E1E2),
          ),
          child: Text(
            text,
            style: const TextStyle(fontSize: 15, color: Colors.black),
          ),
        ),
      ),
    );
  }
}

class BubbleRight extends StatelessWidget {
  final String text;

  const BubbleRight(this.text, {super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.centerRight,
      child: Padding(
        padding: const EdgeInsets.only(top: 20, left: 77),
        child: ClipPath(
          clipper: LowerNipMessageClipper(MessageType.send),
          child: Container(
            padding:
                const EdgeInsets.only(left: 20, top: 10, bottom: 20, right: 20),
            decoration: const BoxDecoration(
              color: Color(0xFF113753),
            ),
            child: Text(
              text,
              style: const TextStyle(fontSize: 15, color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}