1
// new widget : Positioned, Stack, RichText, and TextSpan
2
// jagan lupa export dulu image png nya di folder assets/images/nama_image.png
3
// klo ga paham..tanya aja, jangan diem
4
 
5
 
6
class HomeScreen extends StatelessWidget {
7
  const HomeScreen({super.key});
8
 
9
  @override
10
  Widget build(BuildContext context) {
11
    return Scaffold(
12
      body: Padding(
13
        padding: const EdgeInsets.symmetric(horizontal: 20.0),
14
        child: ListView(
15
          children: [
16
            Row(
17
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
18
              children: [
19
                Text(
20
                  'Hello, Human!',
21
                  style: GoogleFonts.manrope(fontSize: 24, fontWeight: FontWeight.w900),
22
                ),
23
                Stack(
24
                  clipBehavior: Clip.none,
25
                  children: [
26
                    const Icon(
27
                      FeatherIcons.shoppingBag,
28
                      color: Color(0xff818AF9),
29
                      size: 24,
30
                    ),
31
                    Positioned(
32
                      left: 15,
33
                      top: -3,
34
                      child: Container(
35
                        width: 14,
36
                        height: 14,
37
                        decoration: const BoxDecoration(
38
                          color: Color(0xffEF6497),
39
                          shape: BoxShape.circle,
40
                        ),
41
                        child: Text(
42
                          '2',
43
                          textAlign: TextAlign.center,
44
                          style: GoogleFonts.mPlus1p(
45
                            fontSize: 10,
46
                            fontWeight: FontWeight.w900,
47
                            color: Colors.white,
48
                          ),
49
                        ),
50
                      ),
51
                    ),
52
                  ],
53
                ),
54
              ],
55
            ),
56
            const SizedBox(
57
              height: 20,
58
            ),
59
            Container(
60
              width: 336,
61
              height: 184,
62
              decoration: BoxDecoration(
63
                color: const Color(0xff818AF9),
64
                borderRadius: BorderRadius.circular(14),
65
              ),
66
              child: Stack(
67
                children: [
68
                  Image.asset(
69
                    'assets/images/cat_card.png',
70
                    fit: BoxFit.cover,
71
                    width: double.infinity,
72
                  ),
73
                  Padding(
74
                    padding: const EdgeInsets.only(top: 34.0, left: 22),
75
                    child: Column(
76
                      crossAxisAlignment: CrossAxisAlignment.start,
77
                      children: [
78
                        RichText(
79
                          text: const TextSpan(
80
                              text: 'Your',
81
                              style: TextStyle(
82
                                fontSize: 14,
83
                                fontWeight: FontWeight.normal,
84
                              ),
85
                              children: [
86
                                TextSpan(
87
                                    text: ' Catrine',
88
                                    style: TextStyle(
89
                                      fontWeight: FontWeight.bold,
90
                                    )),
91
                                TextSpan(text: ' will get \nvaccination'),
92
                                TextSpan(
93
                                    text: ' tomorrow \nat 07.00 am!',
94
                                    style: TextStyle(
95
                                      fontWeight: FontWeight.bold,
96
                                    ))
97
                              ]),
98
                        ),
99
                        const SizedBox(
100
                          height: 20,
101
                        ),
102
                        ElevatedButton(
103
                          onPressed: () {},
104
                          style: ElevatedButton.styleFrom(
105
                            shape: RoundedRectangleBorder(
106
                                side: BorderSide(
107
                                  width: 2,
108
                                  color: Colors.white.withOpacity(12 / 100),
109
                                ),
110
                                borderRadius: BorderRadius.circular(14)),
111
                            backgroundColor: const Color(0xffFFFFFF).withOpacity(0.6),
112
                            foregroundColor: Colors.white,
113
                            padding: const EdgeInsets.symmetric(
114
                              horizontal: 10,
115
                              vertical: 10,
116
                            ),
117
                          ),
118
                          child: const Text(
119
                            'See details',
120
                            style: TextStyle(
121
                              fontSize: 12,
122
                              fontWeight: FontWeight.bold,
123
                            ),
124
                          ),
125
                        ),
126
                      ],
127
                    ),
128
                  )
129
                ],
130
              ),
131
            ),
132
          ],
133
        ),
134
      ),
135
    );
136
  }
137
}