G

heathy_pet

public
Guest Sep 13, 2024 Never 36
Clone
Dart home_screen.dart 137 lines (134 loc) | 5.16 KB
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
}