1
+ import 'package:flutter/material.dart' ;
2
+
3
+ class HomePage extends StatelessWidget {
4
+ const HomePage ({super .key});
5
+
6
+ @override
7
+ Widget build (BuildContext context) {
8
+ return Scaffold (
9
+ backgroundColor: const Color (0xFFF9F3FF ),
10
+ appBar: AppBar (
11
+ backgroundColor: Colors .transparent,
12
+ elevation: 0 ,
13
+ toolbarHeight: 0 ,
14
+ ),
15
+ body: SafeArea (
16
+ child: Padding (
17
+ padding: const EdgeInsets .symmetric (horizontal: 16.0 ),
18
+ child: SingleChildScrollView (
19
+ child: Column (
20
+ crossAxisAlignment: CrossAxisAlignment .start,
21
+ children: [
22
+ const SizedBox (height: 16 ),
23
+ const Text (
24
+ 'Welcome,' ,
25
+ style: TextStyle (
26
+ color: Colors .black,
27
+ fontSize: 32 ,
28
+ fontWeight: FontWeight .bold,
29
+ ),
30
+ ),
31
+ const SizedBox (height: 8 ),
32
+ const Text (
33
+ 'Millions of movies, TV shows and people to discover. Explore now.' ,
34
+ style: TextStyle (
35
+ color: Colors .black87,
36
+ fontSize: 14 ,
37
+ ),
38
+ ),
39
+ const SizedBox (height: 24 ),
40
+ TextField (
41
+ decoration: InputDecoration (
42
+ hintText: 'Search' ,
43
+ hintStyle: const TextStyle (color: Colors .black54),
44
+ prefixIcon: const Icon (Icons .search, color: Colors .black54),
45
+ filled: true ,
46
+ fillColor: const Color (0xFFE7E2EC ),
47
+ border: OutlineInputBorder (
48
+ borderRadius: BorderRadius .circular (30 ),
49
+ borderSide: BorderSide .none,
50
+ ),
51
+ contentPadding: const EdgeInsets .symmetric (vertical: 0 ),
52
+ ),
53
+ style: const TextStyle (color: Colors .black),
54
+ ),
55
+ const SizedBox (height: 16 ),
56
+ SizedBox (
57
+ height: 36 ,
58
+ child: ListView (
59
+ scrollDirection: Axis .horizontal,
60
+ children: [
61
+ _CategoryChip (label: 'All' , selected: true ),
62
+ _CategoryChip (label: 'Action' ),
63
+ _CategoryChip (label: 'Adventure' ),
64
+ _CategoryChip (label: 'Animation' ),
65
+ _CategoryChip (label: 'Comedy' ),
66
+ ],
67
+ ),
68
+ ),
69
+ const SizedBox (height: 24 ),
70
+ const Text (
71
+ 'Today Trending' ,
72
+ style: TextStyle (
73
+ color: Colors .black,
74
+ fontSize: 20 ,
75
+ fontWeight: FontWeight .bold,
76
+ ),
77
+ ),
78
+ const SizedBox (height: 12 ),
79
+ SizedBox (
80
+ height: 240 ,
81
+ child: ListView (
82
+ scrollDirection: Axis .horizontal,
83
+ children: const [
84
+ _MovieCard (
85
+ image: 'https://image.tmdb.org/t/p/w500/ochi.jpg' ,
86
+ title: 'THE LEGEND OF OCHI' ,
87
+ borderColor: Color (0xFFF9D949 ),
88
+ ),
89
+ _MovieCard (
90
+ image: 'https://image.tmdb.org/t/p/w500/finaldestination.jpg' ,
91
+ title: 'FINAL DESTINATION BLOODLINES' ,
92
+ borderColor: Color (0xFFF9D949 ),
93
+ ),
94
+ _MovieCard (
95
+ image: 'https://image.tmdb.org/t/p/w500/mi.jpg' ,
96
+ title: 'MISSION: IMPOSSIBLE' ,
97
+ borderColor: Color (0xFFF9D949 ),
98
+ ),
99
+ ],
100
+ ),
101
+ ),
102
+ const SizedBox (height: 24 ),
103
+ const Text (
104
+ 'Popular' ,
105
+ style: TextStyle (
106
+ color: Colors .black,
107
+ fontSize: 20 ,
108
+ fontWeight: FontWeight .bold,
109
+ ),
110
+ ),
111
+ const SizedBox (height: 12 ),
112
+ SizedBox (
113
+ height: 180 ,
114
+ child: ListView (
115
+ scrollDirection: Axis .horizontal,
116
+ children: const [
117
+ _MovieCard (
118
+ image: 'https://image.tmdb.org/t/p/w500/minecraft.jpg' ,
119
+ title: 'A MINECRAFT MOVIE' ,
120
+ ),
121
+ _MovieCard (
122
+ image: 'https://image.tmdb.org/t/p/w500/finaldestination.jpg' ,
123
+ title: 'FINAL DESTINATION BLOODLINES' ,
124
+ ),
125
+ _MovieCard (
126
+ image: 'https://image.tmdb.org/t/p/w500/snowwhite.jpg' ,
127
+ title: 'SNOW WHITE' ,
128
+ ),
129
+ ],
130
+ ),
131
+ ),
132
+ const SizedBox (height: 24 ),
133
+ const Text (
134
+ 'Upcoming' ,
135
+ style: TextStyle (
136
+ color: Colors .black,
137
+ fontSize: 20 ,
138
+ fontWeight: FontWeight .bold,
139
+ ),
140
+ ),
141
+ const SizedBox (height: 24 ),
142
+ ],
143
+ ),
144
+ ),
145
+ ),
146
+ ),
147
+ bottomNavigationBar: Container (
148
+ decoration: const BoxDecoration (
149
+ color: Color (0xFFF3EDF7 ),
150
+ borderRadius: BorderRadius .only (
151
+ topLeft: Radius .circular (32 ),
152
+ topRight: Radius .circular (32 ),
153
+ ),
154
+ boxShadow: [
155
+ BoxShadow (
156
+ color: Colors .black12,
157
+ blurRadius: 10 ,
158
+ offset: Offset (0 , - 2 ),
159
+ ),
160
+ ],
161
+ ),
162
+ child: BottomNavigationBar (
163
+ backgroundColor: Colors .transparent,
164
+ elevation: 0 ,
165
+ selectedItemColor: Color (0xFFB388F6 ),
166
+ unselectedItemColor: Colors .black38,
167
+ showSelectedLabels: true ,
168
+ showUnselectedLabels: true ,
169
+ type: BottomNavigationBarType .fixed,
170
+ items: const [
171
+ BottomNavigationBarItem (
172
+ icon: Icon (Icons .explore),
173
+ label: 'Discover' ,
174
+ ),
175
+ BottomNavigationBarItem (
176
+ icon: Icon (Icons .favorite_border),
177
+ label: 'Favorites' ,
178
+ ),
179
+ BottomNavigationBarItem (
180
+ icon: Icon (Icons .settings_outlined),
181
+ label: 'Settings' ,
182
+ ),
183
+ ],
184
+ currentIndex: 0 ,
185
+ onTap: (index) {},
186
+ ),
187
+ ),
188
+ );
189
+ }
190
+ }
191
+
192
+ class _CategoryChip extends StatelessWidget {
193
+ final String label;
194
+ final bool selected;
195
+ const _CategoryChip ({required this .label, this .selected = false });
196
+
197
+ @override
198
+ Widget build (BuildContext context) {
199
+ return Padding (
200
+ padding: const EdgeInsets .only (right: 8.0 ),
201
+ child: ChoiceChip (
202
+ label: Text (label),
203
+ selected: selected,
204
+ selectedColor: Colors .pinkAccent,
205
+ backgroundColor: Colors .white,
206
+ labelStyle: TextStyle (
207
+ color: selected ? Colors .white : Colors .black87,
208
+ fontWeight: FontWeight .bold,
209
+ ),
210
+ side: BorderSide (
211
+ color: selected ? Colors .pinkAccent : Colors .black26,
212
+ ),
213
+ onSelected: (_) {},
214
+ ),
215
+ );
216
+ }
217
+ }
218
+
219
+ class _MovieCard extends StatelessWidget {
220
+ final String image;
221
+ final String title;
222
+ final bool small;
223
+ final Color ? borderColor;
224
+ const _MovieCard ({required this .image, required this .title, this .small = false , this .borderColor});
225
+
226
+ @override
227
+ Widget build (BuildContext context) {
228
+ return Container (
229
+ width: 140 ,
230
+ margin: const EdgeInsets .only (right: 16 ),
231
+ decoration: BoxDecoration (
232
+ borderRadius: BorderRadius .circular (20 ),
233
+ border: borderColor != null ? Border .all (color: borderColor! , width: 3 ) : null ,
234
+ boxShadow: [
235
+ BoxShadow (
236
+ color: Colors .black12,
237
+ blurRadius: 8 ,
238
+ offset: Offset (0 , 4 ),
239
+ ),
240
+ ],
241
+ image: DecorationImage (
242
+ image: NetworkImage (image),
243
+ fit: BoxFit .cover,
244
+ ),
245
+ ),
246
+ alignment: Alignment .bottomLeft,
247
+ child: Container (
248
+ width: double .infinity,
249
+ padding: const EdgeInsets .all (8 ),
250
+ decoration: BoxDecoration (
251
+ color: Colors .black.withOpacity (0.0 ),
252
+ borderRadius: const BorderRadius .only (
253
+ bottomLeft: Radius .circular (20 ),
254
+ bottomRight: Radius .circular (20 ),
255
+ ),
256
+ ),
257
+ child: Text (
258
+ title,
259
+ style: const TextStyle (
260
+ color: Colors .white,
261
+ fontWeight: FontWeight .bold,
262
+ fontSize: 14 ,
263
+ shadows: [
264
+ Shadow (
265
+ color: Colors .black54,
266
+ blurRadius: 4 ,
267
+ offset: Offset (0 , 1 ),
268
+ ),
269
+ ],
270
+ ),
271
+ maxLines: 2 ,
272
+ overflow: TextOverflow .ellipsis,
273
+ ),
274
+ ),
275
+ );
276
+ }
277
+ }
0 commit comments