Most Popular Creation #1

*Create Most Popular layout.
*Import images.

Author: rayliverified

assets/images/image_packages_1.png

@@ -41,8 +41,9 @@ class MyApp extends StatelessWidget {
                         alignment: Alignment.topCenter)),
                 child: Column(
                   mainAxisSize: MainAxisSize.min,
+                  crossAxisAlignment: CrossAxisAlignment.center,
                   children: [
-                    Container(height: 400),
+                    MostPopular(),
                     Container(height: 400),
                   ],
                 ),

assets/images/image_packages_2.png

@@ -176,35 +176,33 @@ class FlutterFavorites extends StatelessWidget {
                   ],
                 ),
               ),
-              Padding(padding: EdgeInsets.only(bottom: 12)),
-              Align(
+              Padding(padding: EdgeInsets.only(bottom: 10)),
+              ResponsiveGridView.builder(
+                gridDelegate: ResponsiveGridDelegate(
+                    crossAxisExtent: 260,
+                    mainAxisSpacing: 16,
+                    crossAxisSpacing: 16,
+                    childAspectRatio: 1.37),
+                maxRowCount: 1,
+                itemCount: 4,
+                shrinkWrap: true,
+                padding: EdgeInsets.fromLTRB(4, 8, 0, 8),
                 alignment: Alignment.center,
-                child: ResponsiveGridView.builder(
-                  gridDelegate: ResponsiveGridDelegate(
-                      crossAxisExtent: 260,
-                      mainAxisSpacing: 16,
-                      crossAxisSpacing: 16,
-                      childAspectRatio: 1.37),
-                  maxRowCount: 1,
-                  itemCount: 10,
-                  shrinkWrap: true,
-                  padding: EdgeInsets.fromLTRB(4, 8, 0, 8),
-                  alignment: Alignment.center,
-                  itemBuilder: (context, index) {
-                    return PackageCard();
-                  },
-                ),
+                itemBuilder: (context, index) {
+                  return PackageCard();
+                },
               ),
               Align(
-                  alignment: Alignment.centerRight,
-                  child: Padding(
-                    padding: EdgeInsets.only(right: 16),
-                    child: Text('VIEW ALL',
-                        style: TextStyle(
-                            color: linkColor,
-                            fontSize: 16,
-                            fontWeight: FontWeight.bold)),
-                  )),
+                alignment: Alignment.centerRight,
+                child: Padding(
+                  padding: EdgeInsets.only(right: 16),
+                  child: Text('VIEW ALL',
+                      style: TextStyle(
+                          color: linkColor,
+                          fontSize: 16,
+                          fontWeight: FontWeight.bold)),
+                ),
+              ),
             ],
           ),
         ),
@@ -213,6 +211,66 @@ class FlutterFavorites extends StatelessWidget {
   }
 }
 
+class MostPopular extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Flexible(
+          child: ConstrainedBox(
+            constraints: BoxConstraints(maxHeight: 240),
+            child: Image.asset('assets/images/image_packages_1.png',
+                fit: BoxFit.contain),
+          ),
+        ),
+        Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Padding(padding: EdgeInsets.only(bottom: 24)),
+            Text('Most popular packages', style: titleTextStyle),
+            Text('The most downloaded packages over the past 60 days',
+                style: TextStyle(
+                    color: textPrimaryColor, fontSize: 18, height: 1.6)),
+            Padding(padding: EdgeInsets.only(bottom: 10)),
+            Container(
+              constraints: BoxConstraints(maxWidth: 834),
+              child: ResponsiveGridView.builder(
+                gridDelegate: ResponsiveGridDelegate(
+                    crossAxisExtent: 260,
+                    mainAxisSpacing: 16,
+                    crossAxisSpacing: 16,
+                    childAspectRatio: 1.37),
+                maxRowCount: 2,
+                itemCount: 6,
+                shrinkWrap: true,
+                padding: EdgeInsets.fromLTRB(4, 8, 0, 16),
+                alignment: Alignment.center,
+                itemBuilder: (context, index) {
+                  return PackageCard();
+                },
+              ),
+            ),
+            Align(
+              alignment: Alignment.centerRight,
+              child: Padding(
+                padding: EdgeInsets.only(right: 16),
+                child: Text('VIEW ALL',
+                    style: TextStyle(
+                        color: linkColor,
+                        fontSize: 16,
+                        fontWeight: FontWeight.bold)),
+              ),
+            ),
+          ],
+        )
+      ],
+    );
+  }
+}
+
 class PackageCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {