Testing with the DevicePreview

lib/main.dart

@@ -1,9 +1,11 @@
 import 'package:flutter/material.dart';
 
+import 'package:device_preview/device_preview.dart';
+
 import 'pages/home/home_page.dart';
 
 void main() {
-  runApp(MyApp());
+  runApp(DevicePreview(builder: (_) => MyApp()));
 }
 
 class MyApp extends StatelessWidget {
@@ -16,6 +18,8 @@ class MyApp extends StatelessWidget {
         primarySwatch: Colors.blue,
         scaffoldBackgroundColor: const Color(0XFF0A0A0A),
       ),
+      builder: DevicePreview.appBuilder,
+      locale: DevicePreview.locale(context),
       home: HomePage(),
     );
   }

lib/pages/home/widgets/sections/advantages_section.dart

@@ -1,28 +1,32 @@
 import 'package:flutter/material.dart';
 
+import '../../../../breakpoints.dart';
+
 class AdvantagesSection extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
-    Widget buildAdvantage(IconData iconData, String title, String subtitle) {
+    Widget buildHorizontalAdvantage(
+        IconData iconData, String title, String subtitle) {
       return Row(
         mainAxisSize: MainAxisSize.min,
         children: [
           Icon(iconData, color: Colors.grey[50], size: 50),
-          SizedBox(width: 8),
+          const SizedBox(width: 8),
           Column(
             children: [
               Text(
                 title, 
+                textAlign: TextAlign.center,
                 style: TextStyle(
                   fontSize: 14, 
                   fontWeight: FontWeight.w800, 
                   color: Colors.grey[50],
                   letterSpacing: 1.1,
-                  height: 0.25,
                 ),
               ),
               Text(
                 subtitle, 
+                textAlign: TextAlign.center,
                 style: TextStyle(
                   fontSize: 12, 
                   fontWeight: FontWeight.w600, 
@@ -36,24 +40,97 @@ class AdvantagesSection extends StatelessWidget {
       );
     }
 
-    return Container(
-      padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
-      decoration: BoxDecoration(
-        border: Border(bottom: BorderSide(color: Colors.grey[700])),
-      ),
-      child: Wrap(
-        alignment: WrapAlignment.spaceEvenly,
-        runSpacing: 16,
-        spacing: 16,
+    Widget buildVerticalAdvantage(
+        IconData iconData, String title, String subtitle) {
+      return Column(
+        mainAxisSize: MainAxisSize.min,
         children: [
-          buildAdvantage(
-            Icons.connect_without_contact, '+100.000 developers\n', 'Awesome!'),
-          buildAdvantage(
-            Icons.card_membership, 'Certificate of Complete\n', 'Sensational!'),
-          buildAdvantage(
-            Icons.verified, 'Full Access\n', 'Anywhere!'),
+          Icon(iconData, color: Colors.grey[50], size: 50),
+          const SizedBox(height: 8),
+          Text(
+            title, 
+            textAlign: TextAlign.center,
+            style: TextStyle(
+              fontSize: 14, 
+              fontWeight: FontWeight.w800, 
+              color: Colors.grey[50],
+              letterSpacing: 1.1,
+            ),
+          ),
+          Text(
+            subtitle, 
+            textAlign: TextAlign.center,
+            style: TextStyle(
+              fontSize: 12, 
+              fontWeight: FontWeight.w600, 
+              color: Colors.grey[50],
+              letterSpacing: 1.2,
+            ),
+          ),
         ],
-      ),
+      );
+    }
+
+    return LayoutBuilder(
+      builder: (_, constraints) {
+        if (constraints.maxWidth >= mobileBreakpoint) {
+          return Container(
+            padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
+            decoration: BoxDecoration(
+              border: Border(bottom: BorderSide(color: Colors.grey[700])),
+            ),
+            child: Wrap(
+              alignment: WrapAlignment.spaceEvenly,
+              runSpacing: 16,
+              spacing: 16,
+              children: [
+                buildHorizontalAdvantage(
+                  Icons.connect_without_contact, 
+                  '+100.000 developers', 
+                  'Awesome!'
+                ),
+                buildHorizontalAdvantage(
+                  Icons.card_membership, 
+                  'Certificate of Complete', 
+                  'Sensational!'
+                ),
+                buildHorizontalAdvantage(
+                  Icons.verified, 
+                  'Full Access', 
+                  'Anywhere!'
+                ),
+              ],
+            ),
+          );
+        }
+        return Container(
+          padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
+          decoration: BoxDecoration(
+            border: Border(bottom: BorderSide(color: Colors.grey[700])),
+          ),
+          child: Wrap(
+            alignment: WrapAlignment.center,
+            children: [
+              buildVerticalAdvantage(
+                Icons.connect_without_contact, 
+                '+100.000 developers', 
+                'Awesome!'
+              ),
+              const SizedBox(width: 16),
+              buildVerticalAdvantage(
+                Icons.card_membership, 
+                'Certificate of Complete', 
+                'Sensational!'
+              ),
+              buildVerticalAdvantage(
+                Icons.verified, 
+                'Full Access', 
+                'Anywhere!'
+              ),
+            ],
+          ),
+        ); 
+      }
     );
   }
 }

pubspec.yaml

@@ -29,6 +29,7 @@ dependencies:
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^1.0.1
   auto_size_text: ^2.1.0
+  device_preview: ^0.6.2-beta
 
 dev_dependencies:
   effective_dart: ^1.3.0