Skip to content

Commit 7e39ef5

Browse files
rayliverifiedrayliverified
committed
Top Packages Creation
*Create top packages blocks.
1 parent 78948b3 commit 7e39ef5

2 files changed

Lines changed: 191 additions & 52 deletions

File tree

‎lib/main.dart‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,18 +33,19 @@ class MyApp extends StatelessWidget {
3333
FlutterFavorites(),
3434
// Background squares image container.
3535
Container(
36-
constraints: BoxConstraints(maxWidth: 1480),
36+
constraints: BoxConstraints(maxWidth: 1440, minWidth: 1440),
3737
decoration: BoxDecoration(
3838
image: DecorationImage(
3939
image: AssetImage('assets/images/bg_squares.png'),
40-
fit: BoxFit.cover,
41-
alignment: Alignment.topCenter)),
40+
fit: BoxFit.fitWidth,
41+
alignment: Alignment.center)),
4242
child: Column(
4343
mainAxisSize: MainAxisSize.min,
4444
crossAxisAlignment: CrossAxisAlignment.center,
4545
children: [
4646
MostPopular(),
47-
Container(height: 400),
47+
TopFlutter(),
48+
TopDart(),
4849
],
4950
),
5051
),

‎lib/ui/blocks.dart‎

Lines changed: 186 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -214,59 +214,197 @@ class FlutterFavorites extends StatelessWidget {
214214
class MostPopular extends StatelessWidget {
215215
@override
216216
Widget build(BuildContext context) {
217-
return Row(
218-
mainAxisSize: MainAxisSize.min,
219-
children: [
220-
Flexible(
221-
child: ConstrainedBox(
222-
constraints: BoxConstraints(maxHeight: 240),
223-
child: Image.asset('assets/images/image_packages_1.png',
224-
fit: BoxFit.contain),
217+
return Padding(
218+
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 20),
219+
child: Row(
220+
mainAxisSize: MainAxisSize.min,
221+
children: [
222+
Flexible(
223+
child: ConstrainedBox(
224+
constraints: BoxConstraints(maxHeight: 280),
225+
child: Image.asset('assets/images/image_packages_1.png',
226+
fit: BoxFit.contain),
227+
),
225228
),
226-
),
227-
Column(
228-
mainAxisSize: MainAxisSize.min,
229-
crossAxisAlignment: CrossAxisAlignment.start,
230-
mainAxisAlignment: MainAxisAlignment.center,
231-
children: [
232-
Padding(padding: EdgeInsets.only(bottom: 24)),
233-
Text('Most popular packages', style: titleTextStyle),
234-
Text('The most downloaded packages over the past 60 days',
235-
style: TextStyle(
236-
color: textPrimaryColor, fontSize: 18, height: 1.6)),
237-
Padding(padding: EdgeInsets.only(bottom: 10)),
238-
Container(
239-
constraints: BoxConstraints(maxWidth: 834),
240-
child: ResponsiveGridView.builder(
241-
gridDelegate: ResponsiveGridDelegate(
242-
crossAxisExtent: 260,
243-
mainAxisSpacing: 16,
244-
crossAxisSpacing: 16,
245-
childAspectRatio: 1.37),
246-
maxRowCount: 2,
247-
itemCount: 6,
248-
shrinkWrap: true,
249-
padding: EdgeInsets.fromLTRB(4, 8, 0, 16),
250-
alignment: Alignment.center,
251-
itemBuilder: (context, index) {
252-
return PackageCard();
253-
},
229+
Column(
230+
mainAxisSize: MainAxisSize.min,
231+
crossAxisAlignment: CrossAxisAlignment.start,
232+
mainAxisAlignment: MainAxisAlignment.center,
233+
children: [
234+
Padding(padding: EdgeInsets.only(bottom: 24)),
235+
Text('Most popular packages', style: titleTextStyle),
236+
Text('The most downloaded packages over the past 60 days',
237+
style: TextStyle(
238+
color: textPrimaryColor, fontSize: 18, height: 1.6)),
239+
Padding(padding: EdgeInsets.only(bottom: 10)),
240+
Container(
241+
constraints: BoxConstraints(maxWidth: 834),
242+
child: ResponsiveGridView.builder(
243+
gridDelegate: ResponsiveGridDelegate(
244+
crossAxisExtent: 260,
245+
mainAxisSpacing: 16,
246+
crossAxisSpacing: 16,
247+
childAspectRatio: 1.37),
248+
maxRowCount: 2,
249+
itemCount: 6,
250+
shrinkWrap: true,
251+
padding: EdgeInsets.fromLTRB(4, 8, 0, 16),
252+
alignment: Alignment.center,
253+
itemBuilder: (context, index) {
254+
return PackageCard();
255+
},
256+
),
257+
),
258+
// TODO: Alignment isn't working due to Flutter issue.
259+
Align(
260+
alignment: Alignment.centerRight,
261+
child: Padding(
262+
padding: EdgeInsets.only(right: 16),
263+
child: Text('VIEW ALL',
264+
style: TextStyle(
265+
color: linkColor,
266+
fontSize: 16,
267+
fontWeight: FontWeight.bold)),
268+
),
269+
),
270+
],
271+
),
272+
],
273+
),
274+
);
275+
}
276+
}
277+
278+
class TopFlutter extends StatelessWidget {
279+
@override
280+
Widget build(BuildContext context) {
281+
return Padding(
282+
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 20),
283+
child: Row(
284+
mainAxisSize: MainAxisSize.min,
285+
children: [
286+
Column(
287+
mainAxisSize: MainAxisSize.min,
288+
crossAxisAlignment: CrossAxisAlignment.start,
289+
mainAxisAlignment: MainAxisAlignment.center,
290+
children: [
291+
Padding(padding: EdgeInsets.only(bottom: 24)),
292+
Text('Top Flutter packages', style: titleTextStyle),
293+
Text('Top packages that extend Flutter with new features',
294+
style: TextStyle(
295+
color: textPrimaryColor, fontSize: 18, height: 1.6)),
296+
Padding(padding: EdgeInsets.only(bottom: 10)),
297+
Container(
298+
constraints: BoxConstraints(maxWidth: 834),
299+
child: ResponsiveGridView.builder(
300+
gridDelegate: ResponsiveGridDelegate(
301+
crossAxisExtent: 260,
302+
mainAxisSpacing: 16,
303+
crossAxisSpacing: 16,
304+
childAspectRatio: 1.37),
305+
maxRowCount: 2,
306+
itemCount: 6,
307+
shrinkWrap: true,
308+
padding: EdgeInsets.fromLTRB(4, 8, 0, 16),
309+
alignment: Alignment.center,
310+
itemBuilder: (context, index) {
311+
return PackageCard();
312+
},
313+
),
314+
),
315+
// TODO: Alignment isn't working due to Flutter issue.
316+
Align(
317+
alignment: Alignment.centerRight,
318+
child: Padding(
319+
padding: EdgeInsets.only(right: 16),
320+
child: Text('VIEW ALL',
321+
style: TextStyle(
322+
color: linkColor,
323+
fontSize: 16,
324+
fontWeight: FontWeight.bold)),
325+
),
326+
),
327+
],
328+
),
329+
Flexible(
330+
child: Container(
331+
margin: EdgeInsets.only(top: 60),
332+
child: ConstrainedBox(
333+
constraints: BoxConstraints(maxHeight: 280),
334+
child: Image.asset('assets/images/image_packages_2.png',
335+
fit: BoxFit.contain),
254336
),
255337
),
256-
Align(
257-
alignment: Alignment.centerRight,
258-
child: Padding(
259-
padding: EdgeInsets.only(right: 16),
260-
child: Text('VIEW ALL',
261-
style: TextStyle(
262-
color: linkColor,
263-
fontSize: 16,
264-
fontWeight: FontWeight.bold)),
338+
),
339+
],
340+
),
341+
);
342+
}
343+
}
344+
345+
class TopDart extends StatelessWidget {
346+
@override
347+
Widget build(BuildContext context) {
348+
return Padding(
349+
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 20),
350+
child: Row(
351+
mainAxisSize: MainAxisSize.min,
352+
children: [
353+
Flexible(
354+
child: Container(
355+
margin: EdgeInsets.only(top: 60),
356+
child: ConstrainedBox(
357+
constraints: BoxConstraints(maxHeight: 280),
358+
child: Image.asset('assets/images/image_packages_3.png',
359+
fit: BoxFit.contain),
265360
),
266361
),
267-
],
268-
)
269-
],
362+
),
363+
Column(
364+
mainAxisSize: MainAxisSize.min,
365+
crossAxisAlignment: CrossAxisAlignment.start,
366+
mainAxisAlignment: MainAxisAlignment.center,
367+
children: [
368+
Padding(padding: EdgeInsets.only(bottom: 24)),
369+
Text('Top Flutter packages', style: titleTextStyle),
370+
Text('Top packages that extend Flutter with new features',
371+
style: TextStyle(
372+
color: textPrimaryColor, fontSize: 18, height: 1.6)),
373+
Padding(padding: EdgeInsets.only(bottom: 10)),
374+
Container(
375+
constraints: BoxConstraints(maxWidth: 834),
376+
child: ResponsiveGridView.builder(
377+
gridDelegate: ResponsiveGridDelegate(
378+
crossAxisExtent: 260,
379+
mainAxisSpacing: 16,
380+
crossAxisSpacing: 16,
381+
childAspectRatio: 1.37),
382+
maxRowCount: 2,
383+
itemCount: 6,
384+
shrinkWrap: true,
385+
padding: EdgeInsets.fromLTRB(4, 8, 0, 16),
386+
alignment: Alignment.center,
387+
itemBuilder: (context, index) {
388+
return PackageCard();
389+
},
390+
),
391+
),
392+
// TODO: Alignment isn't working due to Flutter issue.
393+
Align(
394+
alignment: Alignment.centerRight,
395+
child: Padding(
396+
padding: EdgeInsets.only(right: 16),
397+
child: Text('VIEW ALL',
398+
style: TextStyle(
399+
color: linkColor,
400+
fontSize: 16,
401+
fontWeight: FontWeight.bold)),
402+
),
403+
),
404+
],
405+
),
406+
],
407+
),
270408
);
271409
}
272410
}

0 commit comments

Comments
 (0)